uploadcare-widget
Advanced tools
Uploadcare Widget is an HTML5 file uploader, a part of the Uploadcare ecosystem that fully covers your file handling.
Note: there currently is a new major version of the widget. Here’s how you migrate from v2 to v3.
Uploads affect your web or mobile app performance. The widget ensures all of your uploads are fast and hit their target.
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, and integrates with social media and cloud storage providers.
See the complete widget docs here.
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.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, en locale only.Each bundle has its minified version. Just add .min before .js,
e.g. uploadcare.min.js.
By default, 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@2 --save
import uploadcare from 'uploadcare-widget'
Embed our client library via the <script> tag in the <head>
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/2.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-2.2.4.min.js" charset="utf-8"></script>
<script src="https://ucarecdn.com/libs/widget/2.x/uploadcare.min.js" charset="utf-8"></script>
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 <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, 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.
The widget is highly customizable with widget options. Check out the existing options and ways to set them in UC 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 solutions.
Check out the Uploadcare Widget development guide.
2.11.0 - 2018-04-27
multipleMax.previewStep is off.integration for set up info about framework and plugin
through which the widget is installed.X-UC-User-Agent header
with info about version of the widget, public key, framework, and plugin.capture attribute
for the input[type=file] element,
instead of the video stream,
we show only the buttons that give direct access to the camera..uploadcare-dragging
was not removed from the body when dragging was finished.UPLOADCARE_LIVE=true,
see [#277][issue-277], [#281][issue-281], [#366][issue-366], [#384][issue-384], [#411][issue-411].navigator.mediaDevices.getUserMedia method
if a browser supports these.muted attribute in HTML template instead of
setting up the volume property in JS.getTracks method,
call the stop only for tracks, not for the stream,
because MediaStream.stop deprecated.FAQs
Uploadcare Widget: file uploader.
The npm package uploadcare-widget receives a total of 12,580 weekly downloads. As such, uploadcare-widget popularity was classified as popular.
We found that uploadcare-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.