React Uploading Widget
On this page
Receive files from your users with a clean, lightweight and easy-to-integrate widget. This React component helps you integrate Uploadcare Widget into your React app natively; props management and lazy loading are bundled.
See a lazy-loading React component example at codesandbox.io.
Features
- Upload files from a local disk, camera, and cloud source (up to 5 TB)
- Multipart uploading for large files
- Bulk file uploading
- In-browser image editing
- Uploading network to speed uploading jobs (like CDN)
Integration
Run this command in your project's directory:
npm install @uploadcare/react-widget
bash
This way, you'll get a ready-to-use component to include it in the layout.
Open your /src/App.js
and add the following line along with other imports to
load the newly installed component:
import { Widget } from "@uploadcare/react-widget";
javascript
Usage example
To use the Uploading Widget component, add this code to your /src/App.js
or
another template of your choice:
<p>
<label htmlFor='file'>Your file:</label>{' '}
<Widget publicKey='YOUR_PUBLIC_KEY' id='file' />
</p>
jsx
Just replace YOUR_PUBLIC_KEY
with your Public API Key
in the code above.
Finally, open your app in a browser, or run it again via npm start
and that’s
it.
Settings and Events
Uploading Widget is highly customizable. The component
uses the camelCase notation of the options names; these name versions are
called Object key
in Options Summary.
For example, this is how you allow uploading files only from local storage and
URLs via the tabs
attribute and enable the preview step via the previewStep
attribute:
<Widget
id='file'
name='file'
tabs='file url'
previewStep='true' />
jsx
Regarding the events, you can use onChange
and onFileSelect
. These are
well described in our API reference and in
the README of the component’s GitHub repo.
A couple of basic examples:
// ...
onFileSelect={(file) => {
console.log('File changed: ', file)
if (file) {
file.progress(info => console.log('File progress: ', info.progress))
file.done(info => console.log('File uploaded: ', info))
}
}}
onChange={info => console.log('Upload completed:', info)}
// ...
jsx
Full documentation
Read the full documentation on GitHub.