Dónal
Dónal

Reputation: 187499

React image upload component

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

Answers (2)

kylebebak
kylebebak

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

Stretch0
Stretch0

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

Related Questions