Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-butterfiles

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-butterfiles

A component for building file upload fields of any type.

  • 1.3.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.4K
decreased by-35.65%
Maintainers
1
Weekly downloads
 
Created
Source

🦋 react-butterfiles

Build Status Coverage Status code style: prettier All Contributors PRs Welcome

A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field with drag and drop support and preview of selected images.

Install

npm install --save react-butterfiles

Or if you prefer yarn:

yarn add react-butterfiles

Quick Example:

Create a simple file field which consists of a drop zone and a file upload button (for cases where drag and drop is not convenient). Multiple PDF / JPG files are accepted, but with the following restrictions:

  • 3 files max
  • max 2MB in size per file
  • max 10MB in size for the whole selection
import Files from "react-butterfiles";
<Files
    multiple={true} 
    maxSize="2mb"
    multipleMaxSize="10mb"
    multipleMaxCount={3}
    accept={["application/pdf","image/jpg","image/jpeg"]}
    onSuccess={files => this.setState({ files })}
    onError={errors => this.setState({ errors })}
>
    {({ browseFiles, getDropZoneProps, getLabelProps }) => (
        <>
            <label {...getLabelProps()}>Your files</label>
            <div {...getDropZoneProps({ className: "myDropZone" })}/>
            <button onClick={browseFiles}>Select files...</button>
            <ol>
                {this.state.files.map(file => (
                    <li key={file.name}>{file.name}</li>
                ))}
                {this.state.errors.map(error => (
                    <li key={error.file.name}>
                        {error.file.name} - {error.type}
                    </li>
                ))}
            </ol>
        </>
    )}
</Files>

More examples on https://react-butterfiles.netlify.com.

Props

PropTypeDefaultDescription
acceptArray<string>[]Defines which file types will be accepted. Example: ["application/pdf"].
multiplebooleanfalseAllow multiple file selection by setting this prop to `true.
maxSizestring"2mb"Defines maximum file size (bytes lib used behind the scenes). Example: "10mb"
multipleMaxSizestring"10mb"Useful only if multiple prop is set to true. Defines max. file size of all selected files.
multipleMaxCountnumbernullUseful only if multiple prop is set to true. Defines max. allowed selected files.
convertToBase64booleanfalseIf true, selected files will also be converted to baser64 format (useful when working with images / thumbnails).
onSuccess(files: Array<SelectedFile>) => voidundefinedCallback that will get executed once a valid file selection has been made (via browse files dialog or drag and drop). Each file will have a random id assigned to it.
onError(errors: Array<FileError>) => voidundefinedCallback that will get executed once an invalid file selection has been made. Each error will have a random id assigned to it. More info about possible errors below.

Render (children) prop

Render prop gives you access to three callbacks:

PropTypeDescription
browseFilesBrowseFilesParams => voidOnce executed, file browser will be shown. Useful for file upload buttons. The callback can also accept custom onSuccess and onError callbacks, that will override the main ones.
validate(files: Array<File>) => Array<FileError>Enables manual validation of files. Eg. after editing the selected image in an image editor.
getDropZoneProps(additionalProps: ?Object) => ObjectProps that need to be spread to a drop zone. Additional props can be passed, for example className or style.
getLabelProps(additionalProps: ?Object) => ObjectProps that need to be spread to your file field's label. Additional props can be passed, for example className or style.

Note that you don't need to have both upload file and drop zone, you can use only one if that's your requirement. For example, to create a simple file field, you would only need to use the browseFiles callback.

Selection error types

While selecting and dropping files, if there are one or more that do not comply with the rules that were set via props, an onError callback will be triggered, with all of the errors passed as the first argument.

Every error in the array will have one of the following error types.

TypeDescription
unsupportedFileTypeThis can only happen via drag and drop since file browser dialog won't let users choose files of invalid type.
maxSizeExceededOne or more file sizes are greater than maxSize value.
multipleMaxCountExceededUser selected more files than allowed (more than multipleMaxCount).
multipleMaxSizeExceededUser selected one or more files with their total size greater than allowed (more than multipleMaxSize).
multipleNotAllowedThis can only happen via drag and drop since file browser dialog won't let users select two or more files if multiple was not set to true.

Contributors

Thanks goes to these wonderful people (emoji key):

Adrian Smijulj
Adrian Smijulj

💻 📖 💡 👀 ⚠️
readeral
readeral

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Keywords

FAQs

Package last updated on 15 Aug 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc