Upload file to Google Cloud Storage using AngularJS multipart form data

3
votes

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

1
javascriptangularjsgoogle-app-enginefile-upload

1 Answers

1
votes

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.