Clever Geek Handbook

Loading Google Storage Media with Json api

I am trying to download a file from Google Storage using javascript json api. I can get information about an object using the code below, however I am not sure how to get the actual media. I'm familiar with the Java library method getMediaHttpDownloader, but I don't see the equivalent in JS. Any help would be appreciated!

gapi.client.storage.objects.get({"bucket":"bucketName","object":"objectName"});
+3


source to share


3 answers


The Javascript library does not currently support direct media loading. You can still get to the data, but you will have to access it differently.

Depending on the domain where your website is hosted and the buckets you are reading from, you need to configure CORS: https://developers.google.com/storage/docs/cross-origin



Then you need to request the object directly through the XML API. For example, you can do something like this:

var accessToken = gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://'+bucket+'.storage.googleapis.com/'+object);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.send();
+3


source


I ended up not using the api (not sure if you can download with the api, I wonder if you know) and use XmlHttpRequest instead. To do this, I had to configure CORS for my google store to allow domain access on my site. Below is my code:



var myToken = gapi.auth.getToken();
    var req = new XMLHttpRequest;

    req.open('GET','https://storage.googleapis.com/bucket/object',
                    true);
    req.setRequestHeader('Authorization', 'Bearer ' + myToken.access_token);

    req.send(null);
+2


source


I did it with gapi and jQuery.

In my case, the object is public. (need to check empty link in storage browser). If you don't want your object to be public, use $ .post instead of $ .get and provide the evaluation_token as a header just like you do in other answers.
Storage.getObjectInfo

retrieves the metadata of an object. Storage.getObjectMedia

retrieves the contents of an object.

var Storage = function() {};
Storage.bucket = 'mybucket';
Storage.object = 'myfolder/myobject'; //object name, got by gapi.objects.list 



Storage.getObjectMedia = function(object, callback) {
    function loadObject(objectInfo) {
      var mediaLink = objectInfo.mediaLink;
      $.get(mediaLink, function(data) {   //data is actually object content
        console.log(data);
        callback(data);
      });
    }
    Storage.getObjectInfo(object, loadObject);
};
Storage.getObjectInfo = function(object, callback) {
  var request = gapi.client.storage.objects.get({
    'bucket' : Storage.bucket,
    'object' : Storage.object
  });
  request.execute(function(resp) {
    console.log(resp);
    callback(resp);
  });
};

It is also relatively rare that we need to load the contents of an object. In most cases, the objects stored in the Storage are media files like images and sounds, and then all we need is actually mediaLink

that needs to be inserted into the attribute value of the src

corresponding dom ( img

or audio

) element .

0


source






More articles:


All Articles