Upload file to Google Cloud Storage using AngularJS multipart form data

Question

I'm trying to upload an image file to Google Cloud Storage from AngularJS using the multipart method specified in https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload#multipart

I generate an 'Authorization' header token server side and use that for authentication. I can successfully upload the image using postman (https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en) by attaching the image in the 'binary' field.

I've been using this jsfiddle.net/JeJenny/ZG9re/ fiddle to try manual upload but it's returning me 400 bad request error and I've checked all the header fields and they seem to be all good.

I was wondering if anyone has had experience in uploading images to Google Cloud Storage using AngularJS.

Thanks

Answer 1

I have been successfully uploading files with AngularJS through BlobStore. When you create an upload URL, you can set the Cloud Storage bucket name. Here is a Java example:

String uploadUrl = BlobstoreServiceFactory.getBlobstoreService()
   .createUploadUrl("callback-path",
      UploadOptions.Builder.withGoogleStorageBucketName("bucket-name"));

After a successful upload, your callback URL is called and you can get the blob's name.