Skip to content

React component to drag&drop files and upload them to AWS S3

Notifications You must be signed in to change notification settings

ggregoire/react-drag-n-drop-to-s3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-drag-n-drop-to-s3

React component to drag and drop files and upload them to AWS S3.

Based on react-dropzone and react-s3-uploader/s3upload.js.

Install

npm install react-drag-n-drop-to-s3 react-dropzone

Example

import DragNDropToS3 from 'react-drag-n-drop-to-s3'

const UploadAvatar = () => (
  <DragNDropToS3
    dropzoneProps={{
      accept: 'image/png',
      maxSize: 2000000,
    }}
    s3UploaderProps={{
      getSignedUrl: APIs.getSignedURL,
      autoUpload: true,
      onFinish: response => console.log(response.publicUrl),
    }}
  >
    {({ acceptedFiles }) => (
      <div>
        <p>Drop your avatar here or click to upload</p>
        <ul>
          {acceptedFiles.map((file, i) => (
            <li key={i}>{file.name}</li>
          ))}
        </ul>
      </div>
    )}
  </DragNDropToS3>
)

Props

Prop Description Type Required
dropzoneProps For the list of available options, see react-dropzone Object No
s3UploaderProps For the list of available options, see react-s3-uploader Object No

About

React component to drag&drop files and upload them to AWS S3

Resources

Stars

Watchers

Forks

Packages

No packages published