Reputation: 187499
I'm looking for a React image upload component that provides most/all of the following features:
On mobile devices it should allow access to the camera, so that a user can either select an image stored on the device, or take a photo of the image to be uploaded.
This component will be used in a React browser app (as opposed to a React native app).
Upvotes: 3
Views: 3310
Reputation: 509
You can use React Dropzone Uploader, which gives you file previews (including image thumbnails) out of the box, and also handles uploads for you.
import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'
const Uploader = () => {
return (
<Dropzone
getUploadParams={() => ({ url: 'https://httpbin.org/post' })} // specify upload params and url for your files
onChangeStatus={({ meta, file }, status) => { console.log(status, meta, file) }}
onSubmit={(files) => { console.log(files.map(f => f.meta)) }}
accept="image/*,audio/*,video/*"
/>
)
}
Uploads have progress indicators, and they can be cancelled or restarted. The UI is totally customizable.
Full disclosure: I wrote this library to address a lot of the shortcomings and excessive boilerplate required by React Dropzone.
Upvotes: 2
Reputation: 9241
React Dropzone is probably your best bet.
It is based off Dropzone and can handle image previews, accessing images from the file system or from the camera, as well as multiple uploads at once.
Upvotes: 1