{"id":16954071,"url":"https://github.com/adrians5j/react-butterfiles","last_synced_at":"2025-10-08T05:53:22.754Z","repository":{"id":33866671,"uuid":"163150181","full_name":"adrians5j/react-butterfiles","owner":"adrians5j","description":"🦋 Component for building file fields - from basic file inputs to drag and drop image galleries.","archived":false,"fork":false,"pushed_at":"2022-04-26T22:06:23.000Z","size":988,"stargazers_count":44,"open_issues_count":6,"forks_count":10,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-30T02:28:06.399Z","etag":null,"topics":["drag-and-drop","file-upload","files","images","react"],"latest_commit_sha":null,"homepage":"https://react-butterfiles.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adrians5j.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-26T07:25:48.000Z","updated_at":"2023-01-29T04:03:29.000Z","dependencies_parsed_at":"2022-07-22T05:48:07.174Z","dependency_job_id":null,"html_url":"https://github.com/adrians5j/react-butterfiles","commit_stats":null,"previous_names":["doitadrian/react-butterfiles"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/adrians5j/react-butterfiles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrians5j%2Freact-butterfiles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrians5j%2Freact-butterfiles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrians5j%2Freact-butterfiles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrians5j%2Freact-butterfiles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrians5j","download_url":"https://codeload.github.com/adrians5j/react-butterfiles/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrians5j%2Freact-butterfiles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277875261,"owners_count":25892756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-01T02:00:09.286Z","response_time":88,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","file-upload","files","images","react"],"created_at":"2024-10-13T22:08:42.702Z","updated_at":"2025-10-08T05:53:22.738Z","avatar_url":"https://github.com/adrians5j.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🦋 react-butterfiles\n[![Build Status](https://travis-ci.org/doitadrian/react-butterfiles.svg?branch=master)](https://travis-ci.org/doitadrian/react-butterfiles)\n[![Coverage Status](https://coveralls.io/repos/github/doitadrian/react-butterfiles/badge.svg?branch=master)](https://coveralls.io/github/doitadrian/react-butterfiles?branch=master)\n[![](https://img.shields.io/npm/dw/react-butterfiles.svg)](https://www.npmjs.com/package/react-butterfiles) \n[![](https://img.shields.io/npm/v/react-butterfiles.svg)](https://www.npmjs.com/package/react-butterfiles)\n![](https://img.shields.io/npm/types/react-butterfiles.svg)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n  \nA small component for building file upload fields of any type, for example a simple file upload button or \nan image gallery field with drag and drop support and preview of selected images. \n\n## Install\n```\nnpm install --save react-butterfiles\n```\n\nOr if you prefer yarn: \n```\nyarn add react-butterfiles\n```\n\n## Quick Example:\nCreate a simple file field which consists of a drop zone and a file upload button (for cases where drag \nand drop is not convenient). Multiple PDF / JPG files are accepted, but with the following restrictions:\n - 3 files max\n - max 2MB in size per file\n - max 10MB in size for the whole selection \n\n```javascript\nimport Files from \"react-butterfiles\";\n```\n\n```javascript\n\u003cFiles\n    multiple={true} \n    maxSize=\"2mb\"\n    multipleMaxSize=\"10mb\"\n    multipleMaxCount={3}\n    accept={[\"application/pdf\",\"image/jpg\",\"image/jpeg\"]}\n    onSuccess={files =\u003e this.setState({ files })}\n    onError={errors =\u003e this.setState({ errors })}\n\u003e\n    {({ browseFiles, getDropZoneProps, getLabelProps }) =\u003e (\n        \u003c\u003e\n            \u003clabel {...getLabelProps()}\u003eYour files\u003c/label\u003e\n            \u003cdiv {...getDropZoneProps({ className: \"myDropZone\" })}/\u003e\n            \u003cbutton onClick={browseFiles}\u003eSelect files...\u003c/button\u003e\n            \u003col\u003e\n                {this.state.files.map(file =\u003e (\n                    \u003cli key={file.name}\u003e{file.name}\u003c/li\u003e\n                ))}\n                {this.state.errors.map(error =\u003e (\n                    \u003cli key={error.file.name}\u003e\n                        {error.file.name} - {error.type}\n                    \u003c/li\u003e\n                ))}\n            \u003c/ol\u003e\n        \u003c/\u003e\n    )}\n\u003c/Files\u003e\n```\n\nMore examples on https://react-butterfiles.netlify.com.\n\n## Props\n\n| Prop                | Type                                    | Default   | Description                                                                                                           |\n| :------------------ | :-------------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------- |\n| `accept`              | `Array\u003cstring\u003e`                                   | `[]`        | Defines which file types will be accepted. Example: `[\"application/pdf\"]`.                                            |\n| `multiple`            | `boolean`                                 | `false`     | Allow multiple file selection by setting this prop to `true.                                                          |\n| `maxSize`         | `string`                                  | `\"2mb\"`     | Defines maximum file size (bytes lib used behind the scenes). Example: `\"10mb\"`                                       |\n| `multipleMaxSize`     | `string`                                  | `\"10mb\"`    | Useful only if `multiple` prop is set to `true`. Defines max. file size of all selected files.                      |\n| `multipleMaxCount`    | `number`                                  | `null`    | Useful only if `multiple` prop is set to `true`. Defines max. allowed selected files.                    |\n| `convertToBase64`     | `boolean`                                 | `false`     | If `true`, selected files will also be converted to baser64 format (useful when working with images / thumbnails).    |\n| `onSuccess`           | `(files: Array\u003cSelectedFile\u003e) =\u003e void` | `undefined` | Callback 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. |\n| `onError`             | `(errors: Array\u003cFileError\u003e) =\u003e void`      | `undefined` | Callback 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.  |\n\n### Render (children) prop\n\nRender prop gives you access to three callbacks:\n\n| Prop                | Type                                    |  Description                      |\n| :------------------ | :-------------------------------------- | :----------------------------------\n| `browseFiles`       | `BrowseFilesParams =\u003e void`             | Once 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. |\n| `validate`       | `(files: Array\u003cFile\u003e) =\u003e Array\u003cFileError\u003e`             | Enables manual validation of files. Eg. after editing the selected image in an image editor. |\n| `getDropZoneProps`  | `(additionalProps: ?Object) =\u003e Object`  | Props that need to be spread to a drop zone. Additional props can be passed, for example `className` or `style`. |\n| `getLabelProps`  | `(additionalProps: ?Object) =\u003e Object`  | Props that need to be spread to your file field's label. Additional props can be passed, for example `className` or `style`. |\n\nNote that you don't need to have both upload file and drop zone, you can use only one if that's your requirement. \nFor example, to create a simple file field, you would only need to use the `browseFiles` callback.\n\n## Selection error types\nWhile 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.\n\nEvery error in the array will have one of the following error types.\n\n| Type                | Description\n| :------------------ | :-------------------\n| `unsupportedFileType`              | This can only happen via drag and drop since file browser dialog won't let users choose files of invalid type.\n| `maxSizeExceeded`            | One or more file sizes are greater than `maxSize` value.\n| `multipleMaxCountExceeded`            | User selected more files than allowed (more than `multipleMaxCount`).\n| `multipleMaxSizeExceeded` | User selected one or more files with their total size greater than allowed (more than `multipleMaxSize`).\n| `multipleNotAllowed`         | This 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`.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars0.githubusercontent.com/u/5121148?v=4\" width=\"100px;\" alt=\"Adrian Smijulj\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdrian Smijulj\u003c/b\u003e\u003c/sub\u003e](https://github.com/doitadrian)\u003cbr /\u003e[💻](https://github.com/doitadrian/react-butterfiles/commits?author=doitadrian \"Code\") [📖](https://github.com/doitadrian/react-butterfiles/commits?author=doitadrian \"Documentation\") [💡](#example-doitadrian \"Examples\") [👀](#review-doitadrian \"Reviewed Pull Requests\") [⚠️](https://github.com/doitadrian/react-butterfiles/commits?author=doitadrian \"Tests\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/15904136?v=4\" width=\"100px;\" alt=\"readeral\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ereaderal\u003c/b\u003e\u003c/sub\u003e](https://github.com/readeral)\u003cbr /\u003e[💻](https://github.com/doitadrian/react-butterfiles/commits?author=readeral \"Code\") [📖](https://github.com/doitadrian/react-butterfiles/commits?author=readeral \"Documentation\") |\n| :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrians5j%2Freact-butterfiles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrians5j%2Freact-butterfiles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrians5j%2Freact-butterfiles/lists"}