0

I'm trying to use the PlayCanvas OAuth and CORS to request an image from a service via HTML request. as I understood the response return a JSON holding the data, and in this question I just want to save the path in the JSON to a .txt file located in the PlayCanvas Assets.

I'm not 100% sure about my code. I haven't found how to grab the .txt into the JS script (it cannot be attached to an object)

will appreciate help with both

URL is https://s3-us-west-2.amazonaws.com/ticomsoft-image-repo/1.png

I've tried to use an async request like the example appearing here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests in the 'createCORSRequest':

if ("withCredentials" in xhr) {

    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.

    xhr.open(method, url, true);
    xhr.onload = function (e) {
        if (xhr.readyState === 46) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            } else {
                console.error(xhr.statusText);
            }
        }
    };
    xhr.onerror = function (e) {
        console.error(xhr.statusText);
    };

I tried to place the 'stringify' and 'download' commands in initialize (moved then inside the callback

and finally ended up with what's appearing here

var Https = pc.createScript('https');
var token = 'That's the PlayCanvas Token'; 
var request = 'curl -H "Authorization: Bearer '+token+'" ';

var ts_URL ='https://s3-us-west-2.amazonaws.com/ticomsoft-image-repo/1.png';


// initialize code called once per entity
Https.prototype.initialize = function() {
    var url = request+ts_URL;
    // ref: curl -H "Authorization: Bearer nesgdxhiqe7hylfilr6ss1rds0gq1uj8" https://playcanvas.com/api/...
    var xhr = createCORSRequest('GET', url);
    if (!xhr) {
        throw new Error('CORS not supported');
    }      
};


function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {

    // Check if the XMLHttpRequest object has a "withCredentials" property.
        // "withCredentials" only exists on XMLHTTPRequest2 objects.
    if(method=="GET")
    {

        loadFile(url, DownloadToText(xhr));      
    }

    // else... all the other cases

    return xhr;
}


function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
    var xhr = new XMLHttpRequest();
    xhr.callback = callback;
    xhr.arguments = Array.prototype.slice.call(arguments, 2);
    xhr.onload = xhrSuccess;
    xhr.onerror = xhrError;
    xhr.open("GET", url, true);
    xhr.send(null);
}

function DownloadToText (ans)
{
    JSON.stringify(ans);
    download(ans, 'json.txt', 'text/plain');
}

function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], {type: contentType});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

function xhrSuccess() { 
this.callback.apply(this, this.arguments); 
}

function xhrError() { 
console.error(this.statusText); 
}

expected results: I expected a json.txt file to be downloaded with the URL of the image inside.

Actual results: when I launched the program and went to console, saw the image 1.png got a 404 Not Found error.

the json.txt was downloaded with '[object XMLHttpRequest]'.

Also in the F12 i got that the link leading to the error is https://launch.playcanvas.com/curl%20-H%20%22Authorization:%20Bearer%---theToken---%22%20https://s3-us-west-2.amazonaws.com/ticomsoft-image-repo/1.png

while simply https://s3-us-west-2.amazonaws.com/ticomsoft-image-repo/1.png leads to the image.

but i can't get away from the prefix if i wanna pass through the OAuth.. which is why i don't understand what was i'm doing wrong.

likuku
  • 358
  • 6
  • 21
  • a 404 is fairly descriptive: That means the image wasn't at the URL you expected it to be at. – random_user_name Feb 14 '19 at 15:07
  • true, but: I opened the URL to see that its there (check the link). i also added console.log for the link to see its really it. and still seems like no response. since i'm quite new to JS, its quite obvious that there is something wrong in the code but i don't really understand what. Is the flow for obtaining the data correct? – likuku Feb 14 '19 at 15:19

0 Answers0