Upload File Using Post/put Object Of Google Cloud Storage Html Form

I'm developing a VERY simple Web-App with Google-App-Engine Plugin for Eclipse. I've just written this snippet of code in HTML of my 'home.html'. Here home.html is:

Solution 1:

Here's a working form example:

<form action="http://storage.googleapis.com/bucketName" 
      method="post" enctype="multipart/form-data">
    <inputtype="hidden" name="key" value="${filename}" />
    <inputtype="hidden" name="success_action_status" value="201" />
    <inputtype="file" name="file">
    <inputtype="submit" value="Upload">
</form>

Note that there's no hidden bucket field as the bucket name is already included in the form POST URL.

The key parameter can be ${filename} which will take the original name of the file being uploaded. Though if you try to upload two files with the same name one will get overwritten by the other.

Also, don't forget that your bucket needs to have PUBLIC_WRITE acl. You can set it with gsutil, e.g.:

gsutil acl set public-read-write gs://bucketName

Solution 2:

<Details>Cannot create buckets using a POST.</Details>

Can mean :

• File parameter must be at the end.
• Content-type must be multipart/form-data
• only one file allowed
• key or filename (in file form-field) should be filled

Solution 3:

It is possible to upload files without allowing public write. I have found it is easier to use Google Cloud Platform's AWS S3 Interoperability for this kind of thing, because it uses a simpler authentication scheme than the typical GCloud OAuth.

To use S3 interop, go to Bucket Settings in the Google Cloud Platform Developer Console and click Interoperability. Enable interoperability and generate a key.

At this point, you can user any of the common upload scenarios for S3, while substituting these gcloud interop credentials, and changing the endpoint to storage.googleapis.com.

• AWS official docs on browser uploads to S3
• AWS browser JavaScript SDK examples
• S3 uploading using minimal HTML and JavaScript - TJ Holowaychuk

Share