Problem grabbing image from server with https request in PlayCanvas

443 Views Asked by At

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.

0

There are 0 best solutions below