Uploadcare Widget is an HTML5 file uploader which itself is a part of Uploadcare ecosystem.
It’s provided as a typical JavaScript library and can be easily embedded in your site.
The widget is highly customizable to fit your needs. It supports multi-file uploads, manual crop, integrations with social networks and cloud storage providers.
See the complete docs on using Uploadcare Widget here.
- JavaScript API
- Configure your widget
- Libraries, plugins and integrations
- Tutorials
- Migration guide from v2 to v3
There's 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.api.js— a bundle without UI of the widget and built-in jQuery, JavaScript API only,uploadcare.ie8.js— a full bundle with built-in jQuery 1.x for IE 8 support (widget v. 2.x and below),uploadcare.lang.en.js— a bundle without built-in jQuery,enlocale only.
Each bundle has its minified version. Just add .min before .js, e.g. uploadcare.min.js.
By default, uploadcare.full.min.js is exported for npm and other package managers.
You’re free to choose from the install methods listed below.
Embed our client library via <script> tag in the <head>
section of each page where you’d like to make use of Uploadcare Widget.
Just use this CDN link to use the 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 our widget without built-in jQuery,
<script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.min.js" charset="utf-8"></script>npm install uploadcare-widget --saveimport uploadcare from 'uploadcare-widget'The official Uploadcare Widget documentation has more install methods.
Once you’re done with the install, there are two simple steps to take to actually use the widget.
Set your public key.
This can also sit in the <head> section,
<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 instead of 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.
import React, {Component} from 'react'
import uploadcare from 'uploadcare-widget'
class Uploader extends Component {
componentDidMount() {
uploadcare.start({publicKey: 'YOUR_PUBLIC_KEY'})
}
render() {
return (
<div>
<input type='text' role='uploadcare-uploader'/>
</div>
)
}
}
export default UploaderSee full demo.
We have the Angular 1 directive for Uploadcare Widget. See angular-uploadcare.
For Angular 2, this demo might be useful.
The widget is highly customizable through widget options. All configuration options together with ways to set them are described in our docs.
You might not want to use all the features that our widget exhibits. Or, perhaps, you might want to redesign the user experience without having to reinvent the wheel. Maybe, you're in pursuit of building a UI on top of the widget. For all of those use cases, we provide a JavaScript API. Feel free to control the default widget with it, or make use of its standalone components that can be combined with your own solutions.
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.
Our 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 to support of old browsers and IE8 too, you might use v2 of widget.
| Desktop | Mobile |
|---|---|
| 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 here.