AngularJS Direct Upload to Google Cloud Storage Error

Question

I want to upload file size higher than 32MB to GCS directly from AngularJS

I could successfully upload to Blobstore when the file size is less than 32MB using the code given below.

$http.post(uploadUrl, $scope.formData, {
    withCredentials: true,
    headers: {'Content-Type': undefined},
    transformRequest: angular.identity
});

When I try to upload the file using url https://storage.googleapis.com/bucket-name/filename, I got the following error.

Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:8080' is therefore not allowed access.

When I remove flag withCredentials: true used in http post, I got response as 403, no error details are given.

I have set the cors as mentioned for the upload bucket [{"maxAgeSeconds": 3600, "method": ["GET", "POST", "HEAD"], "origin": ["http://localhost:8088"], "responseHeader": ["Content-Type"]}]

How to enable Access-Control-Allow-Credentials flag in the server?

Eric Simonton Eric Simonton · Accepted Answer · 2016-07-09T04:04:51

You can accomplish this while continuing to use the blobstore, rather than switching to Cloud Storage. Google documents that process fairly well. Warning: it sounds to me like Google is supporting this as a legacy feature, but recommends using Could Storage instead. I have not done this personally, but it sounds like Signed URLs may be the answer there.

If you want to continue with the blobstore, as I have, instructions for the server-side setup in Java are here. You should find similar instructions for other languages at similar URLs. :)

The tricky part that I didn't understand at first: the direct upload request does its thing, then makes a call directly to your server with information about the upload, then uses your server's response as the response back to the client. So for example, you can set the Access-Control-Allow-Origin header in your server's upload handler, and it will be added to the response from the direct upload link.

AngularJS Direct Upload to Google Cloud Storage Error

1 Answers