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 jQuery 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"
/>Note, adding the script to your page will require updating
UPLOADCARE_PUBLIC_KEY with your actual Public API Key
for it to work properly. Sign Up for Uploadcare to get a free one.
Our jQuery 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
Upload From Local Storage
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.
Upload From URL
Allowing users to upload files from URLs with the jQuery 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.
Upload From Dropbox
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 jQuery File Uploader and a ready-made live preset. Grab your snippet from our configurator or continue to the next section covering Google Drive.
Upload From Google Drive
As you’ve already guessed, this option fits those who store their stuff on Google Drive. Another widget tab and another live preset.
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.
Upload From Facebook
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.
Upload From Instagram
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.
Upload from Box, Evernote, Flickr, OneDrive, and VK
Now, here are a few other options we support as upload sources (and a live preset that combines all of them at once):