Neighbour Problem Manager

    react-dropzone-s3-uploader-multipart

    1.1.2 • Public • Published

    Drag and drop s3 file uploader for React

    This is a fork of react-dropzone-s3-uploader that support using multipart uploading by using react-s3-uploader-multipart instead of react-s3-uploader.

    This component uploads files dropped into react-dropzone to s3 with react-s3-uploader-multipart.

    For more detailed docs see the source packages

    Usage (client)

    Available props

    s3Url and upload are the only props that require configuration. All others have sensible defaults that may be overridden.

    Prop Type Description
    s3Url string.isRequired The url of your s3 bucket (https://my-bucket.s3.amazonaws.com)
    upload object.isRequired Upload options passed to react-s3-uploader-multipart. See react-s3-uploader-multipart for available options. Don't set onProgress, onError or onFinish here - use the ones below
    filename string Used as the default value if present. Filename of an image already hosted on s3 (i.e. one that was uploaded previously)
    notDropzoneProps array A list of props to not pass to react-dropzone
    isImage func A function that takes a filename and returns true if it's an image
    imageComponent func Component used to render an uploaded image
    fileComponent func Component used to render an uploaded file
    progressComponent func Component used to render upload progress
    errorComponent func Component used to render an error
    children node || func If present the above components will be ignored in favour of the children
    passChildrenProps bool If true we pass the current state to children of this component. Default is true. Set to false to avoid React warnings about unused props.
    onDrop func Called when a file is dropped onto the uploader
    onError func Called when an upload error occurs
    onProgress func Called when a chunk has been uploaded
    onFinish func Called when a file has completed uploading. Called once per file if multi=true
    ...rest All other props are passed on to the react-dropzone component

    Example

    import DropzoneS3Uploader from 'react-dropzone-s3-uploader'
     
    export default class S3Uploader extends React.Component {
     
      handleFinishedUpload = info => {
        console.log('File uploaded with filename', info.filename)
        console.log('Access it on s3 at', info.fileUrl)
      }
     
      render() {
        const uploadOptions = {
          server: 'http://localhost:4000',
          s3Url: 'https://my-bucket.s3.amazonaws.com',
          signingUrlQueryParams: {uploadType: 'avatar'},
        }
     
        return (
          <DropzoneS3Uploader 
            onFinish={this.handleFinishedUpload} 
            maxSize={1024 * 1024 * 5},
            upload={uploadOptions}
          />
        )
      }
    }

    Custom display component

    Specify your own component to display uploaded files. Passed a list of uploadedFile objects.

     
    // elsewhere
    class UploadDisplay extends React.Component {
      
      renderFileUpload = (uploadedFile, i) => {
        const {
          filename,   // s3 filename 
          fileUrl,    // full s3 url of the file
          file,       // file descriptor from the upload
        } = uploadedFile
     
        return (
          <div key={i}>
            <img src={fileUrl} />
            <p>{file.name}</p>
          </div>
        )
      }
     
      render() {
        const {uploadedFiles, s3Url} = this.props
        return (
          <div> 
            {uploadedFiles.map(this.renderFileUpload)}
          </div>
        )
      }
    }
     
    // back in your uploader...
    class S3Uploader extends React.Component {
     
      //...
     
      render() {
        return (
          <DropzoneS3Uploader 
            onFinish={this.handleFinishedUpload} 
            upload={uploadOptions}
          >
            <UploadDisplay />
          </DropzoneS3Uploader>
        )
      }
    }

    Usage (server)

    • Use s3Router from react-s3-uploader to get signed urls for uploads.
    • react-dropzone-s3-uploader/s3router can be used as an alias for react-s3-uploader/s3router.
    • See react-s3-uploader-multipart for more details.
    app.use('/s3', require('react-dropzone-s3-uploader/s3router')({
      bucket: 'MyS3Bucket',                           // required
      region: 'us-east-1',                            // optional
      headers: {'Access-Control-Allow-Origin': '*'},  // optional
      ACL: 'private',                                 // this is the default - set to `public-read` to let anyone view uploads
    }));

    Keywords

    none

    Install

    npm i react-dropzone-s3-uploader-multipart

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • kpantic