{"id":18368768,"url":"https://github.com/greena13/react-simple-file-input","last_synced_at":"2025-04-06T17:31:52.174Z","repository":{"id":57344665,"uuid":"49255986","full_name":"greena13/react-simple-file-input","owner":"greena13","description":"Simple wrapper for the HTML input tag and HTML5 FileReader API","archived":false,"fork":false,"pushed_at":"2020-10-15T00:25:08.000Z","size":44,"stargazers_count":29,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T08:35:48.901Z","etag":null,"topics":["file","input","react","upload"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greena13.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}},"created_at":"2016-01-08T07:08:02.000Z","updated_at":"2021-10-04T07:46:34.000Z","dependencies_parsed_at":"2022-09-11T09:01:58.148Z","dependency_job_id":null,"html_url":"https://github.com/greena13/react-simple-file-input","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greena13%2Freact-simple-file-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greena13%2Freact-simple-file-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greena13%2Freact-simple-file-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greena13%2Freact-simple-file-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greena13","download_url":"https://codeload.github.com/greena13/react-simple-file-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522428,"owners_count":20952546,"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":["file","input","react","upload"],"created_at":"2024-11-05T23:27:22.497Z","updated_at":"2025-04-06T17:31:51.881Z","avatar_url":"https://github.com/greena13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-simple-file-input\n\n[![npm](https://img.shields.io/npm/dm/react-simple-file-input.svg)]()\n[![GitHub license](https://img.shields.io/github/license/greena13/react-simple-file-input.svg)](https://github.com/greena13/react-simple-file-input/blob/master/LICENSE)\n\nSimple wrapper for the HTML input tag and HTML5 FileReader API that supports multiple files\n\n## Usage\n\n```javascript\nvar FileInput = require('react-simple-file-input');\n\n\u003cFileInput\n  readAs='binary'\n  multiple\n\n  onLoadStart={ this.showProgressBar }\n  onLoad={ this.handleFileSelected }\n  onProgress={ this.updateProgressBar }\n\n  cancelIf={ checkIfFileIsIncorrectFiletype }\n  abortIf={ this.cancelButtonClicked }\n\n  onCancel={ this.showInvalidFileTypeMessage }\n  onAbort={ this.resetCancelButtonClicked }\n /\u003e\n```\n\n## Installation\n\n### React \u003e=0.14.9\n\n```bash\nnpm install react-simple-file-input --save\n```\n\n### React \u003c0.14.9\n\n```bash\nnpm install react-simple-file-input@1.0.0 --save\n```\n\n## Options\n\n### readAs\n\nreact-simple-file-input expects a `readAs` option to indicate how the file should be read. Valid options are:\n\n- 'text' (Text)\n- 'buffer' (Array Buffer)\n- 'binary' (Binary String)\n- 'dataUrl' (Data URL)\n\nBy default the `readAs` option is `undefined`. If left undefined, the file will not be read from disk and only the `onChange` event will be triggered.\n\n### Events\n\nreact-simple-file-input supports the following event handlers:\n\n#### FileReader events\n\n- onLoadStart\n- onProgress\n- onLoadEnd\n- onLoad\n- onAbort\n- onError\n\nEach event handler receives the native event as the first argument and the selected `File` object as the second.\n\n#### Custom events\n\n- onChange\n- onCancel\n\nThe `onChange` handler is called whenever the file is changed and occurs before the file is read from disk. It receives a `File` object as its only argument when the `multiple` prop is false (or left undefined), otherwise it receives an array-like list of `File` objects as its only argument.\n\nThe `onCancel` handler receives the `File` object corresponding to the file the user attempted to read from the file system.\n\n### Allowing multiple files to be selected\n\nBy setting the `multiple` prop to a truthy value, you allow the user to select multiple files at once, using the same input by either ctrl + click or shift + clicking more than one file in file selection modal that appears.\n\nThis causes the `onChange` handler to receive a list of `File` objects (even if it's a only one file) rather a single `File` object. All other handlers are triggered independently, for each file the user has selected, so cancelling, aborting and monitoring the progress of reading each file may be done separately.\n\nIf you wish to cancel or abort all file reads if one fails, this must be done by maintaining state externally, in your handlers.\n\n### Skipping file reads\n\nIf the `readAs` option is not specified, the file will not be read from disk and only `onChange` will be triggered. All other events as skipped.\n\n### Aborting and cancelling file reads\n\nThere are two props for canceling and aborting file reads:\n\n#### Cancelling the file read before it begins\n\nThe `cancelIf` prop accepts a function that receives the `File` object. If the function is defined and returns a truthy value then the file upload will be cancelled before it begins reading from the filesystem and the `onCancel` handler is called with the `File` object.\n\n### Aborting the file read once it has begun\n\nIf defined, the `abortIf` function is executed just before every time the `onProgress` handler is called. It is passed the native event and the `File` object the first and second arguments; if it returns a truthy value, the file read is aborted and the `onAbort` handler is called. The `onProgress` event is *not* called if the file read aborts.\n\n### Children\n\nChildren are not supported. If you wish to use another element to set the clickable area for the user, use labels or a similar strategy (see example below).\n\n### Styling, hiding or replacing the default input field\n\nAll props passed to `FileInput` are passed to the resulting `\u003cinput\u003e` tag so it's possible to style or hide the default input field by passing `style` or `className` prop values.\n\nTo replace the input field with another element, hide it and use a parent label as demonstrated in the example below:\n\n## Examples\n\n```javascript\nimport React, { Component } from 'react';\nvar FileInput = require('react-simple-file-input');\n\nvar allowedFileTypes = [\"image/png\", \"image/jpeg\", \"image/gif\"];\n\nfunction fileIsIncorrectFiletype(file){\n  if (allowedFileTypes.indexOf(file.type) === -1) {\n    return true;\n  } else {\n    return false;\n  }\n}\n\nclass AssetsForm extends Component {\n  constructor(props, context) {\n    super(props, context);\n\n    this.cancelButtonClicked = this.cancelButtonClicked.bind(this);\n    this.resetCancelButtonClicked = this.resetCancelButtonClicked.bind(this);\n    this.showProgressBar = this.showProgressBar.bind(this);\n    this.updateProgressBar = this.updateProgressBar.bind(this);\n    this.handleFileSelected = this.handleFileSelected.bind(this);\n\n    this.state = {\n      cancelButtonClicked: false\n    };\n  }\n\n  render(){\n    return(\n      \u003cdiv\u003e\n        To upload a file:\n\n         \u003clabel \u003e\n            \u003cFileInput\n              readAs='binary'\n              style={ { display: 'none' } }\n\n              onLoadStart={this.showProgressBar}\n              onLoad={this.handleFileSelected}\n              onProgress={this.updateProgressBar}\n\n              cancelIf={fileIsIncorrectFiletype}\n              abortIf={this.cancelButtonClicked}\n\n              onCancel={this.showInvalidFileTypeMessage}\n              onAbort={this.resetCancelButtonClicked}\n             /\u003e\n\n           \u003cspan \u003e\n            Click Here\n           \u003c/span\u003e\n\n         \u003c/label\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  cancelButtonClicked(){\n    return this.state.cancelButtonClicked;\n  }\n\n  resetCancelButtonClicked(){\n    this.setState({ cancelButtonClicked: false });\n  }\n\n  showInvalidFileTypeMessage(file){\n    window.alert(\"Tried to upload invalid filetype \" + file.type);\n  }\n\n  showProgressBar(){\n    this.setState({ progressBarVisible: true});\n  }\n\n  updateProgressBar(event){\n    this.setState({\n      progressPercent: (event.loaded / event.total) * 100\n    });\n  }\n\n  handleFileSelected(event, file){\n    this.setState({file: file, fileContents: event.target.result});\n  }\n}\n```\n\n## Upgrading from 0.x.x\n\nTo upgrade from 0.x.x to 1.0.0, you simply need to move any children of `FileInput` into an enclosing `label` tag, as shown in the example above and pass some styling using the `style` or `className` props to hide the default input field.\n\n## Contributors\n\nThank you to github users selbekk and Zhouzi for your valued contributions via pull requests. They ended up informing most of the improvements in version 1.0.0.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreena13%2Freact-simple-file-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreena13%2Freact-simple-file-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreena13%2Freact-simple-file-input/lists"}