File Uploading Quick Start, Widget
Uploads are one of the fundamental concepts of Uploadcare, an end-to-end file handling platform. The uploading experience starts with Uploadcare Widget, an ultimate File Uploader. This section covers how you jump straight into action.
What you get in the end is a widget button in a specific spot of your page. Hitting the button activates the widget dialog driven by tabbed navigation.
Here, the button goes like this,
The File Uploader allows you to choose files from over a dozen sources, handle multiple files in one go, implement our Distributed Upload Network, and more.
Discover a page you would like the widget to appear on. Navigate to its
and put the following snippet there:
<script>UPLOADCARE_PUBLIC_KEY = "YOUR_PUBLIC_KEY";</script> <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>
<script> element here sets the target Uploadcare project for your
uploads by defining the
YOUR_PUBLIC_KEY with a Public API Key of the
project you want to use with the widget. This requires you to
Sign Up and discover the API key under project settings around
You can also set
UPLOADCARE_PUBLIC_KEY to the
"demopublickey" value which
points to the Uploadcare demo account and does not require signing up for
Uploadcare. Just note we wipe out all the files on our demo account every 24
Once you are done setting your public key and choosing an appropriate bundle,
look through your page
<body> and see where you want the widget button to
appear. Place the following
<input> element there and make sure not to miss
<input type="hidden" role="uploadcare-uploader" name="my_file" />
That’s it. From here, our File Uploader will work as a simple form element allowing folk around your page to upload files of any types and sizes. You can always learn more about in-depth uploader configuration here.