Google Drive Integration

Uploads from the Google Drive API support the following types of files:

All file types are selectable. This includes audio, video, image, text, office, and compressed archive files.

Section Quick Jump:

API OAUTH Webhooks


Using the Google Drive API

  1. User selects Google Drive from services list
  2. user authenticates connection by logging into Google account
  3. user is connected and can select files from Google Drive in Filestack dialog

Google Drive api upload widget

Upload from Google Drive

Uploading or "picking" a file from Google Drive in the context of Filestack means choosing a file and creating a distributable link to that file where it exists in Google Drive. This is the Filestack URL that all "Pick" functions return. If you are using the pickAndStore method, then the file from Google Drive is copied to a new storage location.

Sample Upload Code
filepicker.pick( { mimetypes: ['*/*'], services:['GOOGLE_DRIVE'], }, function(Blob){ console.log(JSON.stringify(Blob)); } );

Download to Google Drive

Exporting a file to Google Drive in the context of Filestack means saving a file from a url or Filestack Blob object to Google Drive and creating a distributable link to that file where it exists in Google Drive. This is the Filestack URL that the "export" function returns.

Sample Export Code
filepicker.exportFile( 'https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw', { mimetype:'*/*', suggestedFilename: 'newFile', services: ['GOOGLE_DRIVE'] }, function(Blob){ console.log(Blob.url); } );

Sample Image Conversion Code for Google Drive

If you have a Filestack Blob object or Filestack URL, then you can use the Filestack REST or Javascript APIs to convert office documents and image files. In the sample code below we "pick" an image file from Google Drive and use the Javascript API convert method to resize the image to 400w by 400h in pixels.

Sample Conversion Code
filepicker.pick( { services: ['GOOGLE_DRIVE'], mimetype: 'image/*', }, function(pickedBlob){ console.log("Conversion in progress...") filepicker.convert( pickedBlob, { width: 400, height: 400, }, { location: 'S3' }, function(convertedBlob){ console.log("Converted file url: ", convertedBlob.url); console.log("File is stored under your S3: ", convertedBlob.key); filepicker.remove( pickedBlob, function(){ console.log("Removed"); } ); } ); } );

Combining Filestack Functions for Google Drive

Now let's combine these methods and see what you can achieve with Filestack and Google Drive! Here we pick an image from Google Drive, crop and resize it, then save it back into Google Drive.

Sample Multi-Function Code
filepicker.pick( { services: ['GOOGLE_DRIVE'], mimetype: 'image/*', }, function (Blob) { filepicker.convert( Blob, { width: 300, height: 300, crop_first: true }, function (converted_Blob) { filepicker.exportFile(converted_Blob.url, { services: ['GOOGLE_DRIVE'], mimetype: Blob.mimetype, suggestedFilename: 'converted_' + Blob.filename }, function (exported_Blob) { console.log('File successfully saved!'); }); }); });

Create your own Google Drive OAuth application to Connect to Filestack:

By default, you do not need to configure anything to start uploading files from Google Drive, Filestack is ready to go out of the box. When a user logs into their Google Drive account from your site, the Filestack company application will show up. You can configure it so that your application shows up instead in order to make a more seamless experience for your customers. So let's get started.

This video walks through the steps listed below

  1. Go to https://console.developers.google.com/flows/enableapi?apiid=drive and choose Create New Project.
  2. Choose Create New Project in your google account
    Once the project is created, click on "Go To Credentials". Go to the credentials page
  3. On the credentials screen select Google Drive API, Web Browser (Javascript), and User Data. Then go to the next step.
    Select the credential type you need.
  4. Give your client a name, and then enter https://www.filestackapi.com for Authorized Javascript Origins and https://www.filestackapi.com/api/client/googledrive/authCallback/open for Authorized Redirect URIs. Replace www.example.com and example.com/oauth2callback with these urls, then go to the next step.
    Enter the redirect URIs for your application.
  5. Design your oauth consent screen. This is the content your users will see when they connect to your Google Drive Application.
    Set up your oauth consent screen.
  6. Download your credentials
    Save your credentials.
  7. In your Filestack developer portal click on Auth Keys under Credentials and scroll down to find the Google Drive App Key and App Secret. Enter your Client ID in the Gdrive App Key field and your Client Secret in the Gdrive App Secret field. Then click Save Auth Credentials at the bottom of the page.
    Scroll down in the Auth section until you see Google Drive
    Enter the App Key and App Secret in the Filestack developer portal
  8. Test your Google Drive implementation by launching the filestack dialog and connecting to google drive:
    Click connect to Google Drive in the Filestack dialog and you should see your custom consent screen.
    You have successfully connected to Google Drive using your own APP.

Google Drive Webhooks for Your Application

Google Drive Webhooks serve the purpose of notifying users about events that occur in relation to their Filestack account. In your developer portal, you can set one or many urls whose purpose is to receive the messages triggered by specific Filestack events.

These are the three event types that will send messages to your webhook url(s) concerning Google Drive:

  • Google Drive File Uploads
  • Google Drive File Exports
  • Google Drive File Conversions

Configuring Google Drive Webhooks

Filestack Webhooks are configured in the developer portal under Credentials > Webhooks. If you enter your url and select "All", then one entry will be made for each type of Filestack Webhook Event, including the ones for Google Drive. To learn more about configuring and receiving webhooks please visit our main webhooks documentation page.

Receiving a Google Drive Webhook Notification

Configuring your server to receive a new webhook is the same as creating any page on your website. If you are using Sinatra, add a new route with the desired URL. In PHP you could create a new .php file on your server. It doesn't need to be complicated. With webhooks, your server is the server receiving the request. You can even use an external service such as RequestBin as shown in the screenshot above.

Webhook data is sent as JSON in the request's body. The full event details are included and can be used directly. The "action" in the JSON is the type of Filestack event that happened, be it a file being uploaded, or simply the Filestack dialog opening.

Filestack will retry sending a webhook 3 times if the first attempt fails. The second attempt to deliver a webhook happens 5 minutes after the first attempt, the third attempt happens after 1 hour, and the final attempt to deliver a webhook happens 12 hours after the first attempt.

Note that for file uploads, both symlinks and files copied with pickAndStore, the "client" field shows the service used.

For conversions, the "provider" shows where the file resides. If the file was stored to Filestack's storage, the provider will be "internal", otherwise it could be "amazon" if the original was stored to S3, or one of the cloud drives Filestack connects to, such as "Google Drive" if the link to the file was a symlink.

The following are examples of what the Google Drive specific webhook messages include and look like:

  1. File Upload (symlink):

  2. {  
       "action":"fp.upload",
       "timestamp":1443444905,
       "id":100946,
       "text":{  
          "url":"https://www.filestackapi.com/api/file/WAunDTTqQfCNWwUUyf6n",
          "client":"Google Drive",
          "type":"image/jpeg",
          "filename":"1579337399020824.jpg",
          "size":139154
       }
    }

  3. File Upload (with store):

  4. {
       "action":"fp.upload",
       "timestamp":1443515345,
       "id":105258,
       "text":{
          "container":"kg_bucket",
          "url":"https://www.filestackapi.com/api/file/0CpUz9H4QfaX7LwwsgUf",
          "filename":"Cat_crying_Lolcat.jpg",
          "client":"Google Drive",
          "key":"EqACdfNRmylz2h1SSYwT_Cat_crying_Lolcat.jpg",
          "type":"image/jpeg",
          "size":205354
       }
    }

  5. File Export (save to):

  6. {
      "action": "fp.export",
      "timestamp": 1444257665, 
      "id": 142447, 
      "text":{
        "source": "https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw",
        "client": "Google Drive",
        "filename": "newFiletest.jpg",
        "created": "https://www.filestackapi.com/api/file/s40jJOQDGVr2T86cgOAe"
      }
    }
            

  7. File Conversion:

  8. {
       "action":"fp.converse",
       "timestamp":1435586806,
       "text":{
          "url":"https://www.filestackapi.com/api/file/uydUKAcTSsWB3g5HOsB4/convert?w=102",
          "link":{
             "writeable":true,
             "mimetype":"image/jpeg",
             "handle":"uydUKAcTSsWB3g5HOsB4",
             "url":"filepicker_upload_persist/pHSrbCRqSqeR1wh8USfY_1.jpeg",
             "created_at":"2015-06-29T13:31:02.204Z",
             "provider":"Google Drive",
             "app_id":7876,
             "filename":"1.jpeg",
             "mongo_id":null,
             "_metadata":null,
             "access_tokens":[
    
             ],
             "is_folder":false,
             "persist":false,
             "user_id":null,
             "id":31968,
             "size":"111175"
          }
       },
       "id":109
    }