Google storage upload files in javascript

Question

I'm looking for the absolute minimal requirements to upload a file to a storage bucket. And the minimal required code.

The minimal oAuth/API-key information I have is from console.cloud.google.com/apis/credentials/oauthclient/

• clientId: Client ID from Credentials page.
• apiKey: Client secret from Credentials page?
• scopes: 'https://www.googleapis.com/auth/devstorage.read_write' (Why is it called devstorage? As if it's intended only for devs? Or is it short for device?

I'm not sure if the apiKey is right, but using this from an example doesn't throw an error:

  // This is triggered after the `client.js` loads
  function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }

So, that's step one, but correct me if I'm wrong.

Now to handle Auth Result:

  function handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
      makeApiCall();
    }
  }

Here I'm kind of stuck, there's an example I'm working off: https://developers.google.com/api-client-library/javascript/start/start-js

There it stops working when it gets to gapi.client.plus.people, where people is not defined. This is because I have an anonymous user, and sort of a public API-key. Later I will implement per user ACL, but for now I just need it to work/upload.

Now, I've got something similar working on Amazon Cloud, with a simple jQuery-based widget that can upload files, where I only needed to input their API-key and the bucket name basically (which was in PHP unfortunately).

I would be happy with just a simple <form>, but the examples I encounter have a lot more information/fields in them than the above 3 minimal data (clientId, apiKey, scopes) and the additional url to the bucket (like strange encrypted acl strings)

I understand that bucket-name.storage.googleapis.com is where the files end up, and that works when I manually upload images.

I'm now looking for the absolute minimal piece of code, preferably javascript, using the google client so using something like (which I found in another example):

gapi.client.request({
    'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',
    'method': 'POST',
    'params': {'uploadType': 'media'}
    'headers': {
        'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
     }

Do I need API_VERSION? How do I find out which path to use? I know my bucket name, but where did the upload/storage/ come from? and /b/? (although https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload shows that I need it) The example used a header with a boundary but I cannot find anything about that, and I probably also don't need that. Problem is I can't find any minimally required headers. I came across 'x-goog-acl': 'public-read', does this need to be in the headers?

So to sum up, the questions I'd like answered:

• What headers would I minimally need to upload to a bucket with allUsers access set to Owner ( I know, not the best idea, this will change in the future)
• Any example code of how to get a file from an html form, and either use ajax to send the request, or use the gapi, which I think is meant to do that.

I hope my problem is clear, I basically don't know where to start/find the right code examples. Although this might have to do with the fact the google javascript client api is in beta..

Answer 1

What headers would I minimally need to upload to a bucket with allUsers access set to Owner ( I know, not the best idea, this will change in the future).

You are correct! This is not a good idea. If anonymous users own your bucket, that means they can delete any object in it, overwrite an existing objects, and otherwise cause expensive mischief. Nonetheless, the answer to your question:

<form action="https://storage.googleapis.com/YOUR_BUCKET_NAME" 
      method="post" enctype="multipart/form-data">
  <input name="key" type="text" value="objectName.txt" /><br/>
  <input name="file" type="file" /><br/>
  <input type="submit" value="Upload!" />
</form>

This is the absolute minimum required to upload an object. Note that it doesn't redirect you anywhere or otherwise indicate success. For that, you'd want to use the success_action_redirect parameter, and you asked for the absolute minimum.