Uploadcare Widget is an HTML5 file uploader, a part of the Uploadcare file handling platform.
Uploads affect your web or mobile app performance. The widget ensures you integrate file uploading into your product in minutes, no matter the development stack.
The widget features:
- Drag&Drop selection.
- Over a dozen upload sources including social media and cloud storage providers.
- Multiple file upload with individual progress bars.
- File moderation through validation by file size, extension or MIME type.
- Image preview and image crop.
- 20+ languages, learn more.
Using the older
2.x version? Check out the stuff under the
- Types of bundles
- Browser Support
- Security issues
- Live widget config
- In-browser image editing
- Libraries, plugins and integrations
- Migration guide from v2 to v3
Types of bundles
There are a few types of JS bundles:
uploadcare.full.js— a full bundle with built-in jQuery.
uploadcare.js— a bundle without built-in jQuery.
uploadcare.lang.en.js— a bundle without built-in jQuery,
Each bundle has its minified version. Just add
uploadcare.min.js is exported for npm and other package managers.
You’re free to choose from the install methods listed below.
npm install uploadcare-widget --save
import uploadcare from 'uploadcare-widget'
Embed our client library via the
<script> tag in the
section of each page where you’d like to use Uploadcare Widget.
Here is the CDN link to the current widget version with built-in jQuery,
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>
Or, if you’re already using jQuery on your page, consider loading the light version of the widget: without built-in jQuery,
<script src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf-8"></script> <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js" charset="utf-8"></script>
Other install methods
Check out the widget docs for more install methods.
Once you’re done with the install, there are two simple steps to take to use the widget.
Set your public key.
This can also sit in the
<script> UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'; </script>
Your secret key is not required for the widget; (it’s quite careless for your page to include any secret keys anyway.
Insert widget element into your form,
<input type="hidden" role="uploadcare-uploader" name="my_file" />
By default, the library looks for inputs with the specified
role attribute and places widgets there.
Once a file is uploaded, this
<input> gets a
CDN link with a file UUID. Your server then
receives this link, not file content.
We suggest placing the widget somewhere at the top of your form. Unlike regular inputs, our widget starts uploading files immediately after they get selected by a user, not on form submission. That way users can fill out the rest of your form while an upload is in progress. This can be a real time saver.
Usage with React
See demo app.
Usage with Angular
Check out our Angular 2+ wrapper for Uploadcare Widget.
angular-uploadcare can be used with Angular 1.
The widget is highly customizable with widget options. Check out the existing options and ways to set them in UC docs.
It’s possible that your locale is not available in the widget yet. If that’s the case, contributing your locale might be a good idea. This can be done by forking the main repository and adding a localization file here.
Until that you can use
property to use your locale immediately.
The widget should work perfectly in a couple of the latest versions of major desktop browsers: Internet Explorer, Edge, Firefox, Google Chrome, Safari, and Opera. It is most likely to run well in older versions of major browser too, except for Internet Explorer < 10.
If you need the support for older browsers including IE8, consider using the widget v2 instead.
|Chrome: 37+||Android Browser: 4.4+|
|Firefox: 32+||Opera Mobile: 8+|
|Safari: 9+||iOS Safari: 9+|
|Edge: 12+||IE Mobile: 11+|
|IE: 10+||Opera Mini: Last|
Check out the Uploadcare Widget development guide.
If you think you ran into something in Uploadcare libraries which might have security implications, please hit us up at firstname.lastname@example.org or Hackerone.
We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.
Issues and PRs are welcome. You can provide your feedback or drop us a support request at email@example.com.