Google Image Search Integration

Uploads from the Google Image Search API support the following types of files:

Only image files are selectable.

Section Quick Jump:

API OAUTH Webhooks


Using the Google Image Search API

  1. User selects Web Images from services list
  2. user enters a search term
  3. user is presented with images matching their search in the Filestack dialog

Google Image Search api upload widget

Upload from Google Image Search

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

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

Download to Google Image Search

Exporting a file to Google Image Search with Filestack is not currently possible.

Sample Image Conversion Code for Google Image Search

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

Sample Conversion Code
filepicker.pick( { services: ['IMAGE_SEARCH'], 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"); } ); } ); } );

Create your own Google Image Search OAuth application to Connect to Filestack:

Filestack's image search service returns a mix of results from Wikipedia, Flickr, and Google image search. By default, you do not need to configure anything to start searching and uploading photos via image search, Filestack is ready to go out of the box. Normally for Google Image Search the Filestack company API key is used to perform searches. However, you can configure it so that your Google API key is used to fetch Google image search results instead. If your customer base relies heavily on the image search functionality you may want to provide your own API key. So let's get that set up.

  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. log into your google developer console
    create a new project in your google account
  3. Once the project is created, click on the link on the page to Enable and Manage APIs, and on the folowing page click on the link for Custom Search API
    click Enable and Manage Apis
    click the link for Custom Search API
  4. On the next page click the button labeled enable API.
    click Configure consent screen
  5. Now you can go back to the Credentials section. Click on Add Credentials and select API Key. You will be asked what type, choose Server Key. On the next screen, give your application a name and click create.
    Click add credentials and select API key
    Choose server key
    Name your application and click create
  6. You will now be given your API key, copy it and enter it in the Filestack developer portal in the Auth Keys section under Google Search. Scroll down to the bottom and click Save Auth Credentials.
    Copy your API key and then go to Filestack's developer portal
    enter the API key in the Filestack developer portal under Google Search

Congratulations! Filestack is now configured to use your Google Search API key!

Google Image Search Webhooks for Your Application

Google Image Search 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 Image Search:

  • Google Image Search File Uploads
  • Google Image Search File Exports
  • Google Image Search File Conversions

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

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

The following are examples of what the Google Image Search 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":"Web Images",
          "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":"Web Images",
          "key":"EqACdfNRmylz2h1SSYwT_Cat_crying_Lolcat.jpg",
          "type":"image/jpeg",
          "size":205354
       }
    }

  5. File Conversion:

  6. {
       "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":"Web Images",
             "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
    }