Google Drive API Upload Example in Action

How to Upload with Google Drive API

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Google Drive is an extremely popular platform for creating, editing, and storing documents. Over 800 million users keep more than 2 trillion files on Google Drive. Whether your application uploads resumes, blog posts, slide shows, or other documents, you can benefit from integrating the Google Drive API to allow your users to upload directly from their preferred storage location. Apps like Monster and Jobcase access the Google Drive API through Filestack to guarantee a flawless user experience.

Google Drive API Upload Example

Upload with Google Drive API

Filestack is the fastest way to add the Google Drive API for uploads into your website or application. Not only can you add Google Drive, but you can also include Dropbox, Box, Evernote, and more file upload sources with just a few lines of code. To add the Google Drive API to your file uploader, simply:

  1. Get your free API key that will enable you to run Filestack.
  2. Include Filestack’s library into your application:
    <script src="https://static.filestackapi.com/v3/filestack.js"></script>
  3. Use the filestack.init() function to initialize Filestack. Include this code where you would like the user to be able to open the file picker widget – likely on an “Upload File” button. (Note, include your own API key here!).
    <script>
    const client = filestack.init('YOUR API KEY');
    </script>
  4. Run your pick function. Google Drive is included as a default upload source. You can use the pick function as is, or add your customization in the function.
    <script>
    client.pick({OPTIONAL_Picker_Configuration})
    </script>
  5.  Console.log to see the magic at work.
    console.log(JSON.stringify(result))

Google Drive API Upload Example

Here is an example of Google Drive as an upload source. Note that Google Drive, as well as a few other upload sources, has been specified with fromSources.  For more customization options, see the file upload API documentation.

<head>
   <script src="https://static.filestackapi.com/v3/filestack.js">
</script>
</head>
<body> 
   <script> client = filestack.init('YOUR API KEY');
   client.pick({  
      fromSources: [ 'local_file_system','imagesearch','googledrive','facebook','instagram', 'dropbox', 'picasa', 'url'],
   }).then(function(result) {  
      console.log(JSON.stringify(result.filesUploaded)) 
   }) 
</script>
</body>

Additional Thoughts

Once your users’ files are uploaded, the question then becomes “what to do with the file now?” Filestack provides a multitude of resources for file management including an image processing engine, image tagging and OCR technology, integrated content delivery network (CDN), cloud storage, AWS integrations and more. Explore our file management features or contact us to chat directly.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Read More →

Ready to get started?

Create an account now!