{"id":17480901,"url":"https://github.com/rasimandiran/react-file-trap","last_synced_at":"2025-04-22T13:23:56.485Z","repository":{"id":143190158,"uuid":"615073722","full_name":"rasimandiran/react-file-trap","owner":"rasimandiran","description":"Simple wrapper component that convert child component to a drag and drop file input","archived":false,"fork":false,"pushed_at":"2023-03-18T13:37:30.000Z","size":195,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-19T08:02:53.875Z","etag":null,"topics":["react","react-components","react-drag-and-drop","react-drag-and-drop-file","react-dropzone","react-file-browser","react-file-upload-component","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-file-trap","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/rasimandiran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-03-16T22:39:33.000Z","updated_at":"2024-07-31T09:31:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2edf0be-55ba-41ec-b702-4c3e4f157028","html_url":"https://github.com/rasimandiran/react-file-trap","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"f9a18cb899cb263f6289d30bec9f7c2bbb0de632"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasimandiran%2Freact-file-trap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasimandiran%2Freact-file-trap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasimandiran%2Freact-file-trap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rasimandiran%2Freact-file-trap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rasimandiran","download_url":"https://codeload.github.com/rasimandiran/react-file-trap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250246920,"owners_count":21398967,"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":["react","react-components","react-drag-and-drop","react-drag-and-drop-file","react-dropzone","react-file-browser","react-file-upload-component","reactjs"],"created_at":"2024-10-18T22:06:33.606Z","updated_at":"2025-04-22T13:23:56.453Z","avatar_url":"https://github.com/rasimandiran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React File Trap\n\nSimple wrapper component that convert child component to a drag and drop file input.\n\n## Demo\n\n[![Edit remark-codesandbox demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-file-trap-bv386b)\n\n## Installation\n\nInstall react-file-trap with [npm](https://www.npmjs.com/package/react-file-trap)\n\n```bash\nnpm install react-file-trap  \n```\n\n## Usage\n\n```javascript\n\u003cFileTrap\n    ref={wrapperRef}\n    allowedExtensions={['jpg', 'png']}\n    handleChange={handleChange}\n    handleDrag={handleDrag}\n    handleDrop={handleDrop}\n    onValidationError={onValidationError}\n    fileCount={3}\n    maxFileSize={2} // MB\n    minFileSize={0.1} // MB\n    browseOnClick={false}\n    \u003e\n    \u003cdiv style={{ margin: 10, border: \"2px solid red\" }}\u003e\n        \u003ch2 style={{ margin: 5 }}\u003eCurrent Event: {currentEvent}\u003c/h2\u003e\n        \u003ch2 style={{ margin: 5 }}\u003eValid File Count: {validFiles.length}\u003c/h2\u003e\n        \u003ch2 style={{ margin: 5 }}\u003eInvalid File Count: {invalidFiles.length}\u003c/h2\u003e\n        \u003ch2 style={{ margin: 5 }}\u003eLast Error: {lastError}\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/FileTrap\u003e\n```\n\n## Props\n\n| Parameter | Type     | Description                | Default Value     | Notes     |\n| :-------- | :------- | :------------------------- |:----------------- |:--------- |\n| `ref` | `ref` | Suggest to use to reset and/or trigger browse outside of child component | `undefined` | Should be defined to trigger some [functions](https://github.com/rasimandiran/react-file-trap#functions)|\n| `allowedExtensions` | `array` | Allowed file extensions | `undefined` | Don't provide to allow all file types |\n| `handleChange` | `function` | Runs when selected and/or dropped a valid file | | Mandatory prop to handle files. See [events](https://github.com/rasimandiran/react-file-trap#events) |\n| `handleDrag` | `function` | Runs for every drag event. Possible values: `dragover` `dragleave` | `undefined` | See [events](https://github.com/rasimandiran/test/tree/main#events) |\n| `handleDrop` | `function` | Runs when dropped a file | `undefined` | See [events](https://github.com/rasimandiran/react-file-trap#events) |\n| `onValidationError` | `function` | Runs everytime if dropped or selected file invalid | `undefined` | See [events](https://github.com/rasimandiran/react-file-trap#events) |\n| `fileCount` | `number` | Allowed file count | `Number.MAX_VALUE` | |\n| `maxFileSize` | `number` | Allowed upper limit for file size in MB | `Number.MAX_VALUE` | |\n| `minFileSize` | `number` | Allowed lower limit for file size in MB | `0` | |\n| `browseOnClick` | `boolean` | Trigger browse window on click to child component | `true` | |\n\n## Events\n\n### handleChange\n\nRuns on every change on the valid files. `fileList` parameter includes all valid files.\n\n```javascript\nconst handleChange = (fileList) =\u003e {\n    setFiles(filesList);\n    setTotalSize(byteFormatter(newFiles.reduce((acc, file) =\u003e acc + file.size, 0)));\n};\n```\n\n### handleDrag\n\nRuns on drag event, eventName parametet can be: `dragover` or `dragleave`\n\n```javascript\nconst handleDrag = (eventName) =\u003e {\n    setCurrentEvent(eventName);\n};\n```\n\n### handleDrop\n\nRuns after a dropped files.\n\n```javascript\nconst handleDrop = () =\u003e {\n    setCurrentEvent('dropped');\n};\n```\n\n### onValidationError\n\nRuns after selected/dropped files.\n\n```javascript\nconst onValidationError = (invalidFileList, errorMsg) =\u003e {\n    setInvalidFiles([...invalidFiles, ...invalidFileList]);\n    setLastError(errorMsg);\n}\n```\n\n## Functions\n\n### browseFiles\n\nTrigger browse window manually. `ref` prop is needed.\n\n```javascript\nwrapperRef.current.browseFiles();\n```\n\n### resetWrapper\n\nTo reset selected files. `ref` prop is needed.\n\n```javascript\nwrapperRef.current.resetWrapper();\n```\n\n### removeFile\n\nTo remove specific file. `file` should be provided as parameter. `ref` prop is also needed.\n\n```javascript\nwrapperRef.current.removeFile(file);\n```\n\n## Notes\n\nFor more details about usage, please check `example` project in the root directory.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasimandiran%2Freact-file-trap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frasimandiran%2Freact-file-trap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frasimandiran%2Freact-file-trap/lists"}