upload to google cloud storage signed url with javascript

Question

With the following code I'm able to upload to my publicly writable bucket in google cloud storage. (allUsers has write permission). However If the bucket isn't publicly writable then I get a 401 unauthorised error. (I don't want the bucket to be publicly writable).

var file = $scope.myFile;
      var fileData = file;
      var boundary = '-------314159265358979323846';
      var delimiter = "\r\n--" + boundary + "\r\n";
      var close_delim = "\r\n--" + boundary + "--";

      var reader = new FileReader();
      reader.readAsBinaryString(fileData);
      reader.onload = function(e) {
        var contentType = fileData.type || 'application/octet-stream';
        var metadata = {
          'name': 'objectName', //'lol' + fileData.name,
          'mimeType': contentType
        };

        var base64Data = btoa(reader.result);
        var multipartRequestBody =
          delimiter +
          'Content-Type: application/json\r\n\r\n' +
          JSON.stringify(metadata) +
          delimiter +
          'Content-Type: ' + contentType + '\r\n' +
          'Content-Transfer-Encoding: base64\r\n' +
          '\r\n' +
          base64Data +
          close_delim;
        var stuff = angular.fromJson('{"Expires": "1415344534", "GoogleAccessId": "[e-mail]", "Signature": "AMkhO7mt2zg+s1Dzx28yQIMSrZlDC2Xx1SzvMCAgUVyiLXs5890/nA6PKzoc1KYBcRv/ALmkNaEVhvWHxE0EfcE151c0PYSG9x7AeSpQI/3dB1UPcSqpwilS1e2sgwB9piLNvBEXLNRXiLYyTiH22zkFZHAEQonJ3J25a47fwo4="}');
        var Expires = stuff.Expires;
        var GoogleAccessId = stuff.GoogleAccessId;
        var Signature = encodeURIComponent(stuff.Signature);
        var BUCKET = 'mybucket';
        var request = $window.gapi.client.request({
          'path': '/upload/storage/v1/b/' + BUCKET + '/o',
          'method': 'POST',
          'params': {
            'uploadType': 'multipart',
            'Expires': Expires,
            'GoogleAccessId': GoogleAccessId,
            'Signature': Signature
          },
          'headers': {
            'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
          },
          'body': multipartRequestBody});

        request.execute(function(r) {
          console.log(r);
        })
      }

Is it possible to use signed URLS with the gapi javascript client? Or does it not understand the params.

If not - are there any examples of doing CORS with the JSON api from javascript for upload with signed urls?

(lets assume that my expiry, GoogleAccessId & Signature are correct & match what i'm doing in the javascript & the permissions i've set up on the bucket)

basically are there any examples of uploading to google cloud storage from javascript client from localhost without requiring the user to have a google account & without using a publicly writable bucket but using dispensed signed urls?

Answer 1

Use https://storage.googleapis.com as a host to compose the URL that points to the desired resource. You can choose between a few ways to construct your base URL. Here are some possible combinations.

For reference, you can also check out a very simple snippet Python that could be helpful.

Hope it helps.

Answer 2

I was implementing the same issue. The problem is with SignedURL. After correcting the signedurl the upload worked like a charm.

As I was using php. Below is the code for generating signed urls.

private function createSignedUrl($objectName, $bucketName, $key, $serviceEmailAddress, $method = 'GET', $duration = 600)
{
    $expires = time() + $duration;

// Line breaks are important!
$toSign = (
    $method . "\n" .
    /* Content-MD5 */ "\n" .
    /* Content Type */ "\n" .
    $expires . "\n" .
    $objectName
);
$signature = urlencode(base64_encode(JWT::encode($toSign, $key, 'HS256')));
return array(
    'expires' => $expires,
    'accessid' => $serviceEmailAddress,
    'signature' => $signature,
);
}