title: How to use Google Drive API to download files with Javascript
body: <p>I want to download files from google drive with javascript API. I have managed to authenticate and load list of files using <code>gapi.client.drive.files</code> request. However, I stuck at downloading those files.<br>
  My attempt to download the file:</p>
  
  <pre><code>var request = gapi.client.drive.files.get({
          fileId:id,
          alt:'media'
  });
  request.execute(function(resp){
          console.log(resp);
  });
  </code></pre>
  
  <p>I have these errors when trying to run the above:</p>
  
  <pre><code>(403) The user has not granted the app 336423653212 read access to the file 0B0UFTVo1BFVmeURrWnpDSloxQlE.
  
  (400) Bad Request
  </code></pre>
  
  <p>I recognize that the files which aren't google drive file (google doc, google slide) return the 403 error. <br>
  I am new to this. Any help and answer is really appreciated.</p>
  
  <p><strong>Update 0</strong></p>
  
  <p>From Google Drive documentation about <a href="https://developers.google.com/drive/v3/web/handle-errors#400_bad_request" rel="noreferrer">Handling API Error</a>, here is part of the explanation for <code>400 errors</code> </p>
  
  <blockquote>
    <p>This can mean that a required field or parameter has not been provided, the
    value supplied is invalid, or the combination of provided fields is
    invalid.</p>
  </blockquote>
  
  <p>This is because I have <code>alt:'media'</code> in my parameter object. <br><br>
  I tried <code>gapi.client.drive.files.export</code>, but it doesn't work either and it returns <code>(403) Insufficient Permission</code> although my Google Drive account has the edit permission for those files. Here is my code:</p>
  
  <pre><code>var request = gapi.client.drive.files.get({
      fileId:element.id,
  });
  request.then(function(resp){
      console.log(resp.result);
      type = resp.result.mimeType;
      id = resp.result.id;
      var request = gapi.client.drive.files.export({
          fileId:id,
          mimeType:type
      })
      request.execute(function(resp){
          console.log(resp);
      });
  });
  </code></pre>
  
  <p><strong>Update 1</strong></p>
  
  <p>Based on <a href="https://stackoverflow.com/a/37875835/3588080">abielita's answer</a>, I have tried to make an authorized HTTP request but it doesn't download the file. It actually returns the file information in <code>response</code> and <code>responseText</code> attribute in the <code>XMLHttpRequest</code> object.</p>
  
  <pre><code>  function test() {
      var accessToken = gapi.auth.getToken().access_token;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://www.googleapis.com/drive/v3/files/"+'1A1RguZpYFLyO9qEs-EnnrpikIpzAbDcZs3Gcsc7Z4nE', true);
      xhr.setRequestHeader('Authorization','Bearer '+accessToken);
      xhr.onload = function(){
          console.log(xhr);
      }
      xhr.send('alt=media');
    }
  </code></pre>
  
  <p><strong>______________________________________________________</strong>
  <br><br></p>
  
  <p>I found out that I can actually retrieve URLs of all those files from the folder using files' <code>webViewLink</code> or <code>webViewContent</code> attributes. </p>
  
  <ul>
  <li><p>A file which is from Google Drive type (Google Doc, Google Sheet,
  etc...) will have <code>webViewLink</code> attribute. A <code>webViewLink</code> will open
  the file in Google Drive.</p></li>
  <li><p>A non Google Drive type file will have <code>webContentLink</code>.  A
  <code>webContentLink</code> will download the file.</p></li>
  </ul>
  
  <p>My code:</p>
  
  <pre><code>var request = gapi.client.drive.files.list({
      q:"'0Bz9_vPIAWUcSWWo0UHptQ005cnM' in parents", //folder ID
      'fields': "files(id, name, webContentLink, webViewLink)"
    });
  request.execute(function(resp) {
          console.log(resp);
  }
  </code></pre>