Gathering detailed insights and metrics for @brainhubeu/react-file-input
Gathering detailed insights and metrics for @brainhubeu/react-file-input
⚛️ A file Input, with drag'n'drop and image editor for React
Installations
npm install @brainhubeu/react-file-inputDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=8.9
Node Version
12.18.2
NPM Version
6.14.5
Languages
3
JavaScript
CSS
Shell
JavaScript (93.26%)
CSS (5.08%)
Shell (1.66%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
77 Stars
342 Commits
10 Forks
8 Watchers
36 Branches
8 Contributors
Updated on Jul 08, 2025
Maintainers
2
Package Meta Information
Latest Version
0.9.20
Package Id
@brainhubeu/react-file-input@0.9.20
Size
85.12 kB
NPM Version
6.14.5
Node Version
12.18.2
Published on
Jul 17, 2020
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
29
@fortawesome/fontawesome-free-solidbrowser-syncconnect-history-api-fallbackcss-loaderexpressextract-text-webpack-pluginfile-loaderfilesizehistoryhtml-webpack-pluginidentity-obj-proxyjsdomjson-loadermime-dbnode-sasspostcss-loaderprop-typesreactreact-domreact-routerreact-router-domreact-test-renderersass-loaderstyle-loadersuperagenturl-loaderwebpackwebpack-dev-middlewarewebpack-hot-middleware
Dev Dependencies
21
@babel/cli@babel/core@babel/plugin-proposal-class-properties@babel/polyfill@babel/preset-env@babel/preset-react@babel/register@babel/plugin-transform-runtimeautoprefixerbabel-eslintbabel-loaderbabel-plugin-transform-react-constant-elementsbabel-plugin-transform-react-remove-prop-typeschalkcoverallsenzymeenzyme-adapter-react-16eslinteslint-config-brainhubeslint-watchjest
react-file-input
A File Input, width drag'n'drop and image editor.
Why?
An image is worth thousand words
Installation
1npm i @brainhubeu/react-file-input
Or if you prefer
1yarn add @brainhubeu/react-file-input
Usage
The basic usage is very simple, the only important prop you have to pass is onChangeCallback:
1import React from 'react'; 2import FileInput from '@brainhubeu/react-file-input'; 3import doSomethingWithMyFile from '../utils/doThings'; 4 5const MyFileUploader = () => ( 6 <div> 7 <FileInput 8 label='Awesome Uploader' 9 onChangeCallback={doSomethingWithMyFile} 10 /> 11 </div> 12); 13 14export const MyFileUploader;
And your set and ready to do something with your file.
See the reference below for more advanced usages.
Usage with Redux Form
Probably 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:
1// MyFileInput.js 2import React, { PureComponent } from 'react'; 3import FileInput from '@brainhubeu/react-file-input'; 4 5export default class MyFileInput extends PureComponent { 6 constructor(props) { 7 super(props); 8 9 this.onChange = this.onChange.bind(this) 10 } 11 onChange({ value }) { 12 const { input } = this.props; 13 14 input.onChange(value); 15 } 16 render() { 17 const { input, label } = this.props; 18 19 return ( 20 <FileInput 21 label='Awesome Uploader' 22 onChangeCallback={this.onChange} 23 onDragEnterCallback={input.onFocus} 24 onDragLeaveCallback={input.onBlur} 25 /> 26 ); 27 } 28}
1// MyGreatForm.js 2import MyFileInput from './MyFileInput' 3 4... 5 6<Field name="myField" component={MyFileInput}/>
And that's it. Prepare some coffee and enjoy.
Styles
The 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 ;)
1// index.js 2import React from 'react'; 3import { render } from 'react-dom'; 4 5import App from './App'; 6 7import '@brainhubeu/react-file-input/dist/react-file-input.css'; 8 9render( 10 <App />, 11 document.getElementById('app') 12);
Or if you prefer from your stylesheet directly:
1@import "~@brainhubeu/react-file-input/dist/react-file-input.css"; 2 3// very good css here...
Customize styles
You can customize the styles of the different components passing classnames as a prop:
| propName | description |
|---|---|
| className | Custom className |
| dropAreaClassName | Custom className for the DropArea |
| fileInfoClassName | Custom className for the FileInfo |
| imageEditorClassName | Custom className for the ImageEditor |
Those 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:
1.myCustomClassName { 2 .brainhub-file-input__label { 3 font-size: 10px; 4 color: #ccc; 5 } 6}
Take a look on the styles and selectors here: https://github.com/brainhubeu/react-file-input/tree/master/src/styles
Reference
FileInput
State
The internal state of the FileInput is important to you, because the callbacks will be call with it as argument.
| name | type | description |
|---|---|---|
| value | File or null | Selected file |
| image | string or null | If file is an image, the image in base64 |
Props
| propName | type | required | default | description |
|---|---|---|---|---|
| className | string | no | '' | Custom className |
| dropAreaClassName | string | no | '' | Custom className for the DropArea |
| fileInfoClassName | string | no | '' | Custom className for the FileInfo |
| imageEditorClassName | string | no | '' | Custom className for the ImageEditor |
| dragOnDocument | boolean | no | true | Listen for drag events in the whole document |
| dropOnDocument | boolean | no | false | Allow to drop on document |
| label | string | yes | Label for the input | |
| metadataComponent | React Component | no | null | Custom component for the metadata. Props: name, size, extension, type |
| thumbnailComponent | React Component | no | null | Custom component for the image thumbnail. Props: children (<img> node with the thumbnail) |
| displayImageThumbnail | boolean | no | true | Whether to generate a thumbnail for image files |
| cropAspectRatio | number | no | 0 | If cropTool is enabled, the aspect ratio for the selection. 0 means the selection is free |
| cropTool | boolean | no | false | Wheter to render a crop tool for image files |
| scaleOptions | {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 |
| onChangeCallback | function | no | null | Callback invoked when a file is selected. It is called with the current state of the component |
| onDragEnterCallback | function | no | null | Callback invoked when drag enters. It is called with the current state of the component |
| onDragLeaveCallback | function | no | null | Callback invoked when drag leaves. It is called with the current state of the component |
Example
To run the example, type:
1cd docs-www
and
1npm run develop 2// or 3yarn develop
if you want to run a local version of react-file-input, please use:
1npm run develop:local 2// or 3yarn develop:local
And go to http://localhost:8000
License
react-file-input is copyright © 2018-2020 Brainhub It is free software, and may be redistributed under the terms specified in the license.
About
react-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.
We love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/26 approved changesets -- score normalized to 0
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Reason
198 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-vhhw-xjvf-wprr
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-h452-7996-h45h
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-qgfr-5hqp-vrw9
- Warn: Project is vulnerable to: GHSA-4228-7qvx-f4rq
- Warn: Project is vulnerable to: GHSA-fp36-299x-pwmw
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
- Warn: Project is vulnerable to: GHSA-h2pm-378c-pcxx
- Warn: Project is vulnerable to: GHSA-7ch4-rr99-cqcw
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-4852-vrh7-28rf
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-w7q9-p3jq-fmhm
- Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-x565-32qp-m3vf
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-rjqq-98f6-6j3r
- Warn: Project is vulnerable to: GHSA-mjxr-4v3x-q3m4
- Warn: Project is vulnerable to: GHSA-cgfm-xwp7-2cvr
- Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
- Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
- Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg
- Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8
- Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2
- Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-v4rh-8p82-6h5w
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
Score
2
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More