Convert a DragEvent or file input to a list of File objects
Installations
npm install file-selectorReleases
Developer
react-dropzone
Developer Guide
Module System
CommonJS
Min. Node Version
>= 12
Typescript Support
Yes
Node Version
22.11.0
NPM Version
10.9.1
Statistics
95 Stars
85 Commits
33 Forks
4 Watching
6 Branches
12 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (98.41%)
JavaScript (1.59%)
Total Downloads
Cumulative downloads
Total Downloads
437,623,989
Last day
-2%
658,785
Compared to previous day
Last week
4.4%
3,382,903
Compared to previous week
Last month
12%
14,211,459
Compared to previous month
Last year
25.3%
149,457,750
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
file-selector
A small package for converting a DragEvent or file input to a list of File objects.
Table of Contents
Installation
You can install this package from NPM:
1npm add file-selector
CDN
For CDN, you can use unpkg:
https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js
The global namespace for file-selector is fileSelector:
1const {fromEvent} = fileSelector;
2document.addEventListener('drop', async evt => {
3 const files = await fromEvent(evt);
4 console.log(files);
5});Usage
ES6
Convert a DragEvent to File objects:
1import {fromEvent} from 'file-selector'; 2document.addEventListener('drop', async evt => { 3 const files = await fromEvent(evt); 4 console.log(files); 5});
Convert a change event for an input type file to File objects:
1import {fromEvent} from 'file-selector'; 2const input = document.getElementById('myInput'); 3input.addEventListener('change', async evt => { 4 const files = await fromEvent(evt); 5 console.log(files); 6});
Convert FileSystemFileHandle items to File objects:
1import {fromEvent} from 'file-selector'; 2 3// Open file picker 4const handles = await window.showOpenFilePicker({multiple: true}); 5// Get the files 6const files = await fromEvent(handles); 7console.log(files);
NOTE The above is experimental and subject to change.
CommonJS
Convert a DragEvent to File objects:
1const {fromEvent} = require('file-selector'); 2document.addEventListener('drop', async evt => { 3 const files = await fromEvent(evt); 4 console.log(files); 5});
Browser Support
Most browser support basic File selection with drag 'n' drop or file input:
For folder drop we use the FileSystem API which has very limited support:
- DataTransferItem.getAsFile()
- DataTransferItem.webkitGetAsEntry()
- FileSystemEntry
- FileSystemFileEntry.file()
- FileSystemDirectoryEntry.createReader()
- FileSystemDirectoryReader.readEntries()
Contribute
Checkout the organization CONTRIBUTING.md.
Credits
Support
Backers
Support us with a monthly donation and help us continue our activities. [Become a backer]
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
License
MIT
No vulnerabilities found.
Reason
23 commit(s) and 13 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:13
Reason
1 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Reason
Found 11/22 approved changesets -- score normalized to 5
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/stale.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/test.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/test.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/react-dropzone/file-selector/test.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/test.yml:32
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
- Info: 2 out of 3 npmCommand dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 2
Details
- Warn: 5 commits out of 25 are checked with a SAST tool
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: topLevel 'contents' permission set to 'read': .github/workflows/release.yml:10
- Warn: no topLevel permission defined: .github/workflows/stale.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
- Warn: branch protection not enabled for branch 'beta'
- Warn: branch protection not enabled for branch '0.1.x'
Score
5.4
/10
Last Scanned on 2024-11-18
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