Cloudinary Blog

How to let your users upload images directly from Facebook, Dropbox and more

Let users upload images from Facebook, Dropbox and more

As developers of web apps, you often need to let users upload files to your app - mainly images and videos. You want the upload interface you provide to offer an intuitive user experience, including the ability to drag & drop multiple media files, preview thumbnails of selected images and videos, view upload progress indication and more. Since we now all live in the cloud era, chances are that many of your users also store media files in the cloud rather than only locally on hard drives and mobile devices, so the option to pick files from social networks like Facebook, cloud storage services such as Dropbox, photo services like Google Photos and more is a big advantage.

Introducing the new and improved Cloudinary Upload Widget - now allowing your users to interactively select images from their Facebook and Google Photos albums, from their Dropbox accounts or from the results of a Google Image Search.  

By including a small JavaScript library and adding a single JavaScript call, you can embed a complete interactive upload UI experience in your web applications:

<script src="//widget.cloudinary.com/global/all.js" 
        type="text/javascript"></script>

<script type="text/javascript">
  cloudinary.openUploadWidget(
    { 
      cloud_name: 'demo', 
      upload_preset: 'a5vxnzbp', 
      sources: [ 'local', 'url', 'camera', 'image_search', 
                 'facebook', 'dropbox', 'google_photos' ],
      google_api_key: '.....' }, 
    function(error, result) { console.log(error, result) });
</script>

Here's a live example. Click the button below to see the widget in action and try out the different media source tabs.

Upload Images

To see the upload widget in action with all media sources, including the Camera and Dropbox sources that require HTTPS, see the following demo page:

https://demo.cloudinary.com/default

From upload API to complete upload UI

A little bit of history... When Cloudinary's image management service was first introduced back in 2012, it included a cloud-based API for uploading images to the cloud and for delivering those images with dynamic manipulations to match your graphic design. The API was powerful, but only when we added SDKs for popular development frameworks such as Ruby on Rails, PHP and Node.js, did developers find it easy enough to use from their back-end applications.

That wasn't enough either. We wanted to eliminate the need for developers to have a server-side upload infrastructure at all, so we added support for direct upload from the browser using a JavaScript library (jQuery plugin). Then, the web development world moved towards Single-Page Applications (SPAs), so we took it one step further and introduced unsigned direct upload from the browser, thus eliminating the need for a server component at all.

While we focused on API and developer components behind-the-scenes, we continued to listen to our customers, and answered with our first front-end user interface component: the Upload Widget. It's a very customizable UI component that supports drag & drop, camera photo capturing, progress indications, interactive image cropping, media preview thumbnails and a lot more.

And now, we are happy to introduce the next phase of the Upload Widget: enabling your users to upload images from third-party cloud storage services and social networks.

Uploading images from third party sources

When using the JavaScript function to open the widget, you can now select up to 7 different media sources to include as tabs within the upload widget's UI. When users select the Facebook, Dropbox, or Google Photos tab, they are prompted to connect to the relevant account. After a successful connection, they can interactively browse through the image search results, their Facebook albums, an image stream of their Google Photos, or the folders & files in their Dropbox account.

The files selected from the remote media sources are then uploaded directly to your Cloudinary account, and are available for dynamic manipulations to match your graphic design. Furthermore, the files are delivered to your users via CDN URLs, optimized for any device, any browser and in any resolution.

Select files from Google image search results

Create your Google Search API key, select whether to allow users to search the whole web or a narrowed down set of predefined sites, and whether to include copyright protection modes (e.g., only images of wikimedia.org that are free to use commercially). Users can type any search term and then select one or more images from the results.

Upload widget - pick images from Google image search results

Select photos from Facebook albums

You can allow your users to connect to Facebook and browse through their Facebook photos and albums. Users can select multiple photos from Facebook that will be uploaded to your web application, and then be available for further management, delivery and graphic manipulation - such as resizing & cropping.

Upload widget - Connect to Facebook application for photo browsing

Upload widget - pick images from Facebook albums

Note: None of your users' personal information is collected or used by the Media Upload Facebook application.

Select images or videos from Google Photos

Similar to the Facebook media source, you can allow your users to connect to their Google Photos account and browse through all their media files. Selected images can either be uploaded as-is to your Cloudinary account or interactively cropped by your users before uploading.

Upload widget - pick images from Google Photos

Upload widget - Connect to Facebook application for photo browsing

Select files from a Dropbox account

Dropbox accounts can contain any kind of file - not only images - and Cloudinary's upload API and upload widget also support uploading any file type (PDF documents, videos, Office documents, text files, ZIP files, and more). After connecting to their Dropbox account, your users can browse through their Dropbox folders and select one or more files that can then be uploaded to your Cloudinary account and associated with the model of your dynamic web application.

Upload widget - pick files from Dropbox folders

For a full listing of all the JavaScript options and parameters available for the upload widget, take a look at the API reference table on the upload widget's documentation page.

Towards a better image upload user experience

In this article, we have highlighted the new media sources you can use with the upload widget. The widget supports many additional capabilities that you can mix and match: interactive cropping, client-side resizing, look & feel customization and more. Take a look at our documentation for more details.

Spoiler alert! We are already working on the next version of the upload widget, which should be released within the next few months. More media sources, such as additional social networks, cloud storage services and stock photography services will be supported. We are also redesigning the widget with a revamped look & feel, and we are developing the widget to be a centric uploader component for modern web applications.

The upload widget, including support for all-the new media sources described in this post, is available for free for all of Cloudinary's plans. You can create your free account here. We would of course appreciate any feedback you have!

Recent Blog Posts

Build a WhatsApp Clone with Automatic Image Optimization

In the previous post, we showed how to upload images to a Cloudinary server. In this part, we will play with some of the features we see on the WhatsApp technology. After you or your users have uploaded image assets to Cloudinary, you can deliver them via dynamic URLs. You can include instructions in your dynamic URLs that tell Cloudinary to manipulate your assets using a set of transformation parameters. All image manipulations and image optimizations are performed automatically in the cloud and your transformed assets are automatically optimized before they are routed through a fast CDN to the end user for an optimal user experience. For example, you can resize and crop, add overlays, blur or pixelate faces, apply a variety of special effects and filters, and apply settings to optimize your images and to deliver them responsively.

Read more
With automatic video subtitles, silence speaks volumes

The last time you scrolled through the feed on your favorite social site, chances are that some videos caught your attention, and chances are, they were playing silently.

On the other hand, what was your reaction the last time you opened a web page and a video unexpectedly began playing with sound? If you are anything like me, the first thing you did was to quickly hunt for the fastest way to pause the video, mute the sound, or close the page entirely, especially if you were in a public place at the time.

Read more
Impressed by WhatsApp Tech? Build WhatsApp Clone with Media Upload

With more than one billion people using WhatsApp, the platform is becoming a go-to for reliable and secure instant messaging. Having so many users means that data transfer processes must be optimized and scalable across all platforms. WhatsApp is touted for its ability to achieve significant media quality preservation when traversing the network from sender to receiver, and this is no easy feat to achieve.

Read more
New Google-powered add-on for auto video categories and tags

Due to significant growth of the web and improvements in network bandwidth, video is now a major source of information and entertainment shared over the internet. As a developer or asset manager, making corporate videos available for viewing, not to mention user-uploaded videos, means you also need a way to categorize them according to their content and make your video library searchable. Most systems end up organizing their video by metadata like the filename, or with user-generated tags (e.g., youtube). This sort of indexing method is subjective, inconsistent, time-consuming, incomplete and superficial.

Read more

iOS Developer Camp: The Dog House

By Shantini Vyas
iOS Developer Camp: The Dog House

Confession: I’m kind of addicted to hackathons. Ever since graduating from Coding Dojo earlier this year, I’ve been on the hunt for new places to expand my skills and meet new people in the tech space. iOS Developer Camp’s 10th Anniversary event bowled me over. Initially, because of its length. 48 hours? Yeesh. I had no idea that those 48 hours would change my life. But let’s first get a little backstory on my favorite topic: dogs.

Read more