title: Google storage upload files in javascript
body: <p>I'm looking for the <code>absolute minimal</code> requirements to upload a file to a storage bucket. And the minimal required code.</p>
  
  <p>The minimal oAuth/API-key information I have is from <code>console.cloud.google.com/apis/credentials/oauthclient/</code></p>
  
  <ul>
  <li><code>clientId</code>: Client ID from Credentials page.</li>
  <li><code>apiKey</code>: Client secret from Credentials page?</li>
  <li><code>scopes</code>: '<a href="https://www.googleapis.com/auth/devstorage.read_write" rel="nofollow">https://www.googleapis.com/auth/devstorage.read_write</a>' (Why is it called <code>devstorage</code>? As if it's intended only for devs? Or is it short for <code>device</code>?</li>
  </ul>
  
  <p>I'm not sure if the apiKey is right, but using this from an example doesn't throw an error:</p>
  
  <pre><code>  // 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);
    }
  </code></pre>
  
  <p>So, that's step one, but correct me if I'm wrong.</p>
  
  <p>Now to handle Auth Result:</p>
  
  <pre><code>  function handleAuthResult(authResult) {
      if (authResult &amp;&amp; !authResult.error) {
        makeApiCall();
      }
    }
  </code></pre>
  
  <p>Here I'm kind of stuck, there's an example I'm working off: <a href="https://developers.google.com/api-client-library/javascript/start/start-js" rel="nofollow">https://developers.google.com/api-client-library/javascript/start/start-js</a></p>
  
  <p>There it stops working when it gets to <code>gapi.client.plus.people</code>, where <code>people</code> 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.</p>
  
  <p>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 <code>API-key</code> and the bucket name basically (which was in <code>PHP</code> unfortunately).</p>
  
  <p>I would be happy with just a simple <code>&lt;form&gt;</code>, 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)</p>
  
  <p>I understand that <code>bucket-name.storage.googleapis.com</code> is where the files end up, and that works when I manually upload images.</p>
  
  <p>I'm now looking for the absolute minimal piece of code, preferably javascript, using the <code>google client</code> so using something like (which I found in another example):</p>
  
  <pre><code>gapi.client.request({
      'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',
      'method': 'POST',
      'params': {'uploadType': 'media'}
      'headers': {
          'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
       }
  </code></pre>
  
  <p>Do I need <code>API_VERSION</code>? How do I find out which <code>path</code> to use? I know my <code>bucket</code> name, but where did the <code>upload/storage/</code> come from? and <code>/b/</code>? (although <a href="https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload" rel="nofollow">https://cloud.google.com/storage/docs/json_api/v1/how-tos/upload</a> shows that I need it)
  The example used a header with a <code>boundary</code> but I cannot find anything about that, and I probably also don't need that. Problem is I can't find any <code>minimally</code> required headers.
  I came across <code>'x-goog-acl': 'public-read'</code>, does this need to be in the headers?</p>
  
  <p>So to sum up, the questions I'd like answered:</p>
  
  <ul>
  <li>What headers would I minimally need to upload to a bucket with <code>allUsers</code> access set to <code>Owner</code> ( I know, not the best idea, this will change in the future)</li>
  <li>Any example code of how to get a file from an <code>html</code> form, and either use <code>ajax</code> to send the request, or use the <code>gapi</code>, which I think is meant to do that.</li>
  </ul>
  
  <p>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 <code>beta</code>..</p>