Upload from URL, Dropbox, Google Drive, and Other Sources
Uploadcare is a complete File API that provides serverless file handling for your website or app. Get Started.
Simply put, you can allow users to upload files from over a dozen sources right on your webpage with no actual storage. From there, files go to our servers, which you can use to store, process, and deliver content. We automatically cache the files on our CDN, so you then address them via static CDN URLs. Those can be stored in your database or even Moleskine.
This article covers some common use cases related to receiving files that your users upload from URL, device storage, cloud storage, and social media.
Your users get authenticated to the third-party services using OAuth: we don’t store any passwords or other credentials. You can customize the OAuth process: add branded elements to the dialog where users grant their access permissions.
The simplest way to receive files from your users is integrating our File Uploader. It’s a widget you add to your page with a few lines of code:
<script src="//ucarecdn.com/libs/widget/3.x/uploadcare.full.js"></script> <script src="//ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.js"></script> <script> UPLOADCARE_PUBLIC_KEY = 'your_public_key' uploadcare.registerTab('preview', uploadcareEffectsTab) </script> <input type="hidden" role="uploadcare-uploader" name="my_file" data-effects="crop,rotate,enhance,sharp,grayscale" />
Our File Uploader uses tabbed navigation where every upload source is a separate widget tab. We provide some pre-configured widget layouts below. Sure thing, you can freely configure the set of those tabs.
- Upload From Local Storage
- Upload From URL
- Upload From Dropbox
- Upload From Google Drive
- Upload From Facebook
- Upload From Instagram
- Upload From Box, Evernote, Flickr, OneDrive, and VK
In the simplest case, you can upload a file (or multiple files) from local storage. To do that, you either tap the widget button or drag files from a folder and drop them onto the widget.
Here's a live widget pre-configured for multi-file uploads from local storage.
Uploading files from device storage is a standard feature for web application out there. Another commonly used practice is allowing users to fetch content from URLs.
Allowing users to upload files from URLs with the File Uploader is about adding a dedicated tab to the widget’s UI. Here’s a live preset for the case.
To fetch a file from URL, your users will go as copying and pasting the desired (and publicly available) link into the widget dialog.
Our servers will then upload a file to Uploadcare; it’s fast and saves user bandwidth and traffic. Fetching files from cloud storage is similar from the user experience perspective.
Dropbox is a popular cloud storage option, and many folks keep their images, documents, and other media there. So, it’s natural for users to pick files from Dropbox and for your app to collect them.
We've got a dedicated Dropbox tab in File Uploader and a ready-made live preset. Grab your snippet from our configurator or continue to the next section covering Google Drive.
The interesting part is (just as in the Dropbox case) that users only need to authenticate once to make their files available on every future dialog launch.
The Google Drive tab also allows filtering starred items to accelerate file flows for your users.
Now, let’s move on to Social Media, another place where users tend to keep tons of their content.
Your customers are Facebook users. The good news is they can choose media directly from their account. We don’t store any user credentials; accounts are connected via OAuth.
Here’s a live preset allowing to fetch media from a Facebook account. Social Media are a great source of user-generated content or UGC that’s widely used by brands in their marketing campaigns.
This points us to the next platform that communicates visually.
Instagram is the one we’re talking about. It is a good source of user-generated images for your web application. The simplest case would be users uploading their avatars from one of the photos they spent hours editing 🙂
The setup is similar: we’ve got an Instagram tab and a pre-configured widget for you.
Now, here are a few other options we support as upload sources (and a live preset that combines all of them at once):