Google Photos Integration

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

Only image files are selectable

Section Quick Jump:

API OAUTH Webhooks


Using the Google Photos API

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

Google Photos api upload widget

Upload from Google Photos

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

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

Download to Google Photos

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

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

Sample Image Conversion Code for Google Photos

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 Photos and use the Javascript API convert method to resize the image to 400w by 400h in pixels.

Sample Conversion Code
filepicker.pick( { services: ['PICASA'], 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 Photos

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

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

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

By default, you do not need to configure anything to start uploading photos from Google Photos, Filestack is ready to go out of the box. When a user logs into their Picasa 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.

  1. Go to https://console.developers.google.com/project and sign into your google account. Now click create project, give the project a name and click create.
  2. Create a new project in your google developers account
  3. Use the side menu to select Credentials, then click Create Credentials and select OAuth Client ID.
    select Credentials under Apis and auth, Add Credentials and select Oauth 2.0 Client ID
  4. On the next page click Configure consent screen. Product name is the only required field for the consent screen. Enter the information you want to display and click save.
    Click configure consent screen
    Configure the consent screen for the Picasa application
  5. Now you can select your application type. Select Web Application and enter https://www.filestackapi.com/api/client/picasa/authCallback/open in the Authorized redirect URIs field, and https://www.filestackapi.com as the authorized origin and click create. You will be presented with your client ID and client secret. Copy these.
    Select Web Application and enter the Authorized Redirect URI
    Copy the Client ID and Client Secret
  6. Now go to the Filestack developer portal and click on Auth Keys, scroll down to the bottom and enter the client ID and the client secret into the Picasa fields for App Key and App Secret and click Save Auth Credentials.
    Enter the App Key and App Secret in the Filestack developer portal
  7. Go and test that you can connect to your Google Photos application through Filestack.
    Authorize the request at the consent screen
    Congratulations, your Picasa application works

Congratulations! Your custom Picasa application is all set up for use with Filestack!

Google Photos Webhooks for Your Application

Google Photos 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 Photos:

  • Google Photos File Uploads
  • Google Photos File Exports
  • Google Photos File Conversions

Configuring Google Photos 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 Photos. To learn more about configuring and receiving webhooks please visit our main webhooks documentation page.

Receiving a Google Photos 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 Photos" if the link to the file was a symlink.

The following are examples of what the Google Photos 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 Photos",
          "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 Photos",
          "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 Photos",
        "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 Photos",
             "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
    }