Geek Answers Handbook

A user uploaded a file to Google Drive via javascript?

I have a web application that I would like for a user to be able to add a file from his computer and upload it to my Google drive. I have a file select button, but I'm not sure how the function should look for access to my Google Drive account and send the file when the button is clicked.

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

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

+5
source share
2 answers

We had the same problem - and therefore a web service was developed to anonymously upload to the site of the owner of Google Drive.

See https://driveuploader.com/

You can easily create a reliable download component that can be embedded in any website with iframe code, like YouTube, or used as part of other applications with a basic JavaScript API with webcams.

After creating the bootloader, embedding is performed using code like:

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

It works in all the latest web browsers and supports unlimited file downloads (it is checked for files with hundreds of gigabytes, yes GIGABYTES).

Because the component is responsive, it is also ideal for Wordpress sites or Google Sites.

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

Disclaimer: We are the developers of this service.

+1
source

You can find all the necessary information, and then in the Google API help system, but I copied the important material to download below. However, you definitely need to see their authentication information, which can be found at this link: https://developers.google.com/api-client-library/javascript/start/start-js . I 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>

You have the authentication configured below how you can upload the document. You can also use the "PUT" query. 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
0
source

More articles:


All Articles