Site icon Filestack Blog

Upload With The Google Photos API

Filestack
Upload from Google Photos API
Table of Contents hide
1 Upload Using Google Photos API
2 Sample File Uploader with Google Photos
3 Additional Thoughts

Google Photos has been in hyper growth mode since its transformation from Picasa, currently boosting more than 500 million monthly users. With sharing capabilities and added intelligence, Google Photos strives to make camera rolls obsolete.  As a developer building a file uploader, you can stay ahead of the curve by allowing your users to upload pictures directly from Google Photos instead of just their camera roll or local drive alone. The more ingrained your user’s upload experience is, the less likely they are to leave your app to find a photo – and then never come back.

Upload Using Google Photos API

Filestack’s API provides a file picker widget that integrates with Google Photos along with another 20+ upload sources, so with just one integration your users will be able to upload from virtually anywhere. This also means that you only have to deal with set up and maintenance of one API – not twenty. To integrate the Google Photos API into your app, simply…

  1. Sign up to get your free API key with Filestack.
  2. Add the Filestack V3 library into your code: 
    <script src="https://static.filestackapi.com/v3/filestack.js"></script>
  3. Initialize Filestack using the filestack.init() function in the body of your HTML file where you would like your file picker to appear. Remember to add your own API key here. 
    <script>
   const client = filestack.init('YOUR API KEY');
</script>
  4. Add Google Photos to your fromSources in your pick function: 
    <script>
   client.pick({
      fromSources: ['picasa'],
   })
</script>
  5. See the resulting file by running console.log 
    console.log(JSON.stringify(result.filesUploaded))

Sample File Uploader with Google Photos

This is simple sample code for how to upload images from Google Photos. You can find many more options to customize your pick function in the Filestack documentation – such as by setting a max number of files, max file size, specific extensions or mimetypes, other file upload sources, and more.

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

Additional Thoughts

When you upload this way, your files are stored in Filestack’s S3 storage and are accessible through a CDN url. These files will deliver through Filestack’s integrated CDN network to optimize for maximum speed and minimal bandwidth. As long as you are on a Starter plan or higher, you can customize your cloud storage provider to add your own S3 bucket or other storage destination.

Additionally, you have an image processing engine at your finger tips post file upload – giving you the option to crop, compress, resize, edit, or otherwise optimize images for your app. From upload, to processing, to storage and delivery, Filestack allows you greater control and insight into your file management. Go to our website to sign up for a free account to start uploading and managing files with ease.

Exit mobile version