CODEWITHSUNDEEP
javascriptgoogle-drive-api
Jacob Guthrie
Jacob Guthrie

Reputation: 63

User uploaded file to google drive via javascript?

I have a web app that I would like the user to be able to add a file from their computer and upload it to my google drive. I have the choose file button working but I'm not sure as to how the function should look to access my google drive account and send the file upon a button click.

<h4>Upload a file:</h4>
    <div class="form-group">
        <input type="file" id="fileInput" name="fileInput"/>
    </div><br>

I put this inside a infowindow and I'm able to search for and select a file from the user's computer. I really just looking for the JS function to send it to my google drive. Any help would be appreciated.

Upvotes: 6

Views: 21703

Answers (2)

MapTiler
MapTiler

Reputation: 1799

We had the same problem - and therefore developed a web service for anonymous uploading into the website owner's Google Drive.

See https://driveuploader.com/

You can easily create a reliable upload component, which can be embedded in any website with an iframe code, similarly like YouTube - or used as a part of other applications with a basic JavaScript API with webhooks.

After you create the uploader - embedding is done with the code like:

<iframe src="https://driveuploader.com/upload/{uploader key}/embed/"></iframe>

It runs in all latest web browsers - and supports unlimited file size uploads (tested on files with hundreds of gigabytes, yes GIGABYTES).

Because the component is responsive - it is perfect also for Wordpress or Google Sites websites.

If you need only a basic page where your friends, students, colleagues can securely drop into your Google Drive some (possibly large) files, then this is offered too - and completely for free.

Disclaimer: we are developers of this service.

Upvotes: 4

rmn36
rmn36

Reputation: 656

You can find all the information you need and then some in Google's API reference but I've copied the important stuff for upload below. However, you will definitely need to look at their information regarding authentication which can be found at this link: https://developers.google.com/api-client-library/javascript/start/start-js . I have also included their authentication example below.

<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">

  var clientId = '837050751313';

  var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';

  var scopes = 'https://www.googleapis.com/auth/plus.me';

  function handleClientLoad() {
    // Step 2: Reference the API key
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

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

  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }

  function handleAuthClick(event) {
    // Step 3: get authorization to use private data
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }

  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    // Step 4: Load the Google+ API
    gapi.client.load('plus', 'v1').then(function() {
      // Step 5: Assemble the API request
      var request = gapi.client.plus.people.get({
        'userId': 'me'
      });
      // Step 6: Execute the API request
      request.then(function(resp) {
        var heading = document.createElement('h4');
        var image = document.createElement('img');
        image.src = resp.result.image.url;
        heading.appendChild(image);
        heading.appendChild(document.createTextNode(resp.result.displayName));

        document.getElementById('content').appendChild(heading);
      }, function(reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    });
  }
</script>
// Step 1: Load JavaScript client library
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

One you have authentication set up the code below is how you can upload a document. You can also use a 'PUT' request. See this link for more information: https://developers.google.com/drive/web/manage-uploads

POST /upload/drive/v2/files?uploadType=media HTTP/1.1
Host: www.googleapis.com
Content-Type: image/jpeg
Content-Length: number_of_bytes_in_file
Authorization: Bearer your_auth_token

Upvotes: 0

Related Questions