{"id":19428819,"url":"https://github.com/brainhubeu/react-file-input","last_synced_at":"2025-04-05T06:02:12.744Z","repository":{"id":38432657,"uuid":"119812640","full_name":"brainhubeu/react-file-input","owner":"brainhubeu","description":" ⚛️  A file Input, with drag'n'drop and image editor for React","archived":false,"fork":false,"pushed_at":"2025-03-29T04:04:21.000Z","size":7015,"stargazers_count":77,"open_issues_count":29,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T05:11:17.524Z","etag":null,"topics":["drag-and-drop","enzyme","input-file","jest","react","react-component","react-file-upload-component","redux-form","sass","webpack"],"latest_commit_sha":null,"homepage":"https://brainhub.eu/","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/brainhubeu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-01T09:21:28.000Z","updated_at":"2024-05-31T01:08:22.000Z","dependencies_parsed_at":"2023-12-21T20:10:44.874Z","dependency_job_id":"32d65e21-b582-4b8c-ba5a-b27cb984f954","html_url":"https://github.com/brainhubeu/react-file-input","commit_stats":{"total_commits":233,"total_committers":13,"mean_commits":"17.923076923076923","dds":0.7296137339055794,"last_synced_commit":"c8eb33382582881310e98b3861c2bdc249f6e5d9"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-file-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-file-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-file-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-file-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brainhubeu","download_url":"https://codeload.github.com/brainhubeu/react-file-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294514,"owners_count":20915340,"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","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","enzyme","input-file","jest","react","react-component","react-file-upload-component","redux-form","sass","webpack"],"created_at":"2024-11-10T14:16:47.110Z","updated_at":"2025-04-05T06:02:12.719Z","avatar_url":"https://github.com/brainhubeu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003ch1 align=\"center\"\u003e\n  react-file-input\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A File Input, width drag'n'drop and image editor.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://brainhubeu.github.io/react-file-input/\"\u003eLive code demo\u003c/a\u003e | \n    \u003ca href=\"https://brainhub.eu/contact/\"\u003eHire us\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![CircleCI](https://circleci.com/gh/brainhubeu/react-file-input.svg?style=svg)](https://circleci.com/gh/brainhubeu/react-file-input)\n  [![Last commit](https://img.shields.io/github/last-commit/brainhubeu/react-file-input.svg)](https://github.com/brainhubeu/react-file-input/commits/master)\n  [![license](https://img.shields.io/npm/l/@brainhubeu/react-file-input.svg)](https://github.com/brainhubeu/react-file-input/blob/master/LICENSE)\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n  [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n\n  [![Coveralls github](https://img.shields.io/coveralls/github/brainhubeu/react-file-input.svg)](https://coveralls.io/github/brainhubeu/react-file-input?branch=master)\n  [![Downloads](https://img.shields.io/npm/dm/@brainhubeu/react-file-input?color=blue)](https://www.npmjs.com/package/@brainhubeu/react-file-input)\n  [![Activity](https://img.shields.io/github/commit-activity/m/brainhubeu/react-file-input.svg)](https://github.com/brainhubeu/react-file-input/commits/master)\n  [![npm](https://img.shields.io/npm/v/@brainhubeu/react-file-input.svg)](https://www.npmjs.com/package/@brainhubeu/react-file-input)\n  [![Contributors](https://img.shields.io/github/contributors/brainhubeu/react-file-input?color=blue)](https://github.com/brainhubeu/react-file-input/graphs/contributors)\n\u003c/div\u003e\n\n\n## Why?\n\u003e An image is worth thousand words\n\n![Screenshot](./screenshot.gif)\n\n## Installation\n```sh\nnpm i @brainhubeu/react-file-input\n```\nOr if you prefer\n```sh\nyarn add @brainhubeu/react-file-input\n```\n## Usage\nThe basic usage is very simple, the only important prop you have to pass is `onChangeCallback`:\n\n```javascript\nimport React from 'react';\nimport FileInput from '@brainhubeu/react-file-input';\nimport doSomethingWithMyFile from '../utils/doThings';\n\nconst MyFileUploader = () =\u003e (\n  \u003cdiv\u003e\n    \u003cFileInput\n      label='Awesome Uploader'\n      onChangeCallback={doSomethingWithMyFile}\n    /\u003e\n  \u003c/div\u003e\n);\n\nexport const MyFileUploader;\n```\nAnd your set and ready to `do something with your file`.\n\nSee the reference below for more advanced usages.\n\n### Usage with Redux Form\nProbably you are not crazy enough to handle your forms like in 1999. Chances are that you are using `redux-form`. If so, it's your lucky day, because you can use our `FileInput` with `redux-forms`. Here's a basic example:\n```javascript\n// MyFileInput.js\nimport React, { PureComponent } from 'react';\nimport FileInput from '@brainhubeu/react-file-input';\n\nexport default class MyFileInput extends PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.onChange = this.onChange.bind(this)\n  }\n  onChange({ value }) {\n    const { input } = this.props;\n\n    input.onChange(value);\n  }\n  render() {\n    const { input, label } = this.props;\n\n    return (\n      \u003cFileInput\n        label='Awesome Uploader'\n        onChangeCallback={this.onChange}\n        onDragEnterCallback={input.onFocus}\n        onDragLeaveCallback={input.onBlur}\n      /\u003e\n    );\n  }\n}\n```\n```javascript\n// MyGreatForm.js\nimport MyFileInput from './MyFileInput'\n\n...\n\n\u003cField name=\"myField\" component={MyFileInput}/\u003e\n```\nAnd that's it. Prepare some coffee and enjoy.\n### Styles\nThe Component comes with custom `css`. You must import them using our component (if not things will look wrong). Of course you could also override them ;)\n\n```javascript\n// index.js\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport App from './App';\n\nimport '@brainhubeu/react-file-input/dist/react-file-input.css';\n\nrender(\n  \u003cApp /\u003e,\n  document.getElementById('app')\n);\n```\n\nOr if you prefer from your stylesheet directly:\n```sass\n@import \"~@brainhubeu/react-file-input/dist/react-file-input.css\";\n\n// very good css here...\n```\n### Customize styles\nYou can customize the styles of the different components passing classnames as a prop:\n\npropName|description\n-|-\nclassName|Custom className\ndropAreaClassName|Custom className for the `DropArea`\nfileInfoClassName|Custom className for the `FileInfo`\nimageEditorClassName|Custom className for the `ImageEditor`\n\nThose classnames are for the top main components. But if you want to override child styles you can writing some `css`. Here's how you can do so:\n```css\n.myCustomClassName {\n  .brainhub-file-input__label {\n    font-size: 10px;\n    color: #ccc;\n  }\n}\n```\nTake a look on the styles and selectors here: https://github.com/brainhubeu/react-file-input/tree/master/src/styles\n\n## Reference\n### FileInput\n#### State\nThe internal state of the `FileInput` is important to you, because the callbacks will be call with it as argument.\n\nname | type | description\n-----|------|------------\nvalue|`File` or `null`|Selected file\nimage|`string` or `null`|If file is an image, the image in `base64`\n\n#### Props\npropName | type | required | default | description\n---------|------|----------|---------|------------\nclassName|`string`|no|''|Custom className\ndropAreaClassName|`string`|no|''|Custom className for the DropArea\nfileInfoClassName|`string`|no|''|Custom className for the FileInfo\nimageEditorClassName|`string`|no|''|Custom className for the ImageEditor\ndragOnDocument|`boolean`|no|true|Listen for drag events in the whole document\ndropOnDocument|`boolean`|no|false|Allow to drop on document\nlabel|`string`|yes||Label for the input\nmetadataComponent|`React Component`|no|null|Custom component for the metadata. Props: `name`, `size`, `extension`, `type`\nthumbnailComponent|`React Component`|no|null|Custom component for the image thumbnail. Props: `children` (`\u003cimg\u003e` node with the thumbnail)\ndisplayImageThumbnail|boolean|no|true|Whether to generate a thumbnail for image files\ncropAspectRatio|`number`|no|0|If cropTool is enabled, the aspect ratio for the selection. 0 means the selection is free\ncropTool|boolean|no|false|Wheter to render a crop tool for image files\nscaleOptions| ``` {width: number, height: number: keepAspectRatio: boolean}```| no|null|Scale option for file images. `keepAspectRatio` refers to if the original aspect ratio should be kept when appliyin scaling\nonChangeCallback|`function`|no|null|Callback invoked when a file is selected. It is called with the current state of the component\nonDragEnterCallback|`function`|no|null|Callback invoked when drag enters. It is called with the current state of the component\nonDragLeaveCallback|`function`|no|null|Callback invoked when drag leaves. It is called with the current state of the component\n\n## Example\nTo run the example, type:\n```sh\ncd docs-www\n```\nand\n```sh\nnpm run develop\n// or\nyarn develop\n```\nif you want to run a local version of react-file-input, please use:\n```sh\nnpm run develop:local\n// or\nyarn develop:local\n```\n\nAnd go to `http://localhost:8000`\n\n## License\n\nreact-file-input is copyright © 2018-2020 [Brainhub](https://brainhub.eu/?utm_source=github) It is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).\n\n## About\n\nreact-file-input is maintained by the Brainhub development team. It is funded by Brainhub and the names and logos for Brainhub are trademarks of Brainhub Sp. z o.o.. You can check other open-source projects supported/developed by our teammates here. \n\n[![Brainhub](https://brainhub.eu/brainhub.svg)](https://brainhub.eu/?utm_source=github)\n\nWe love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainhubeu%2Freact-file-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrainhubeu%2Freact-file-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainhubeu%2Freact-file-input/lists"}