npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-dropzone-s3-uploader

v1.1.0

Published

Drag and drop s3 file uploader via react-dropzone + react-s3-uploader

Downloads

7,961

Readme

Drag and drop s3 file uploader for React

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

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. See react-s3-uploader 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',
      signingUrlQueryParams: {uploadType: 'avatar'},
    }
    const s3Url = 'https://my-bucket.s3.amazonaws.com'

    return (
      <DropzoneS3Uploader
        onFinish={this.handleFinishedUpload}
        s3Url={s3Url}
        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 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
}));