file-selector
Advanced tools
Package description
The file-selector npm package is a utility library for handling file selections in web applications. It provides functions to convert file selections into a standardized format for easier manipulation, including functions to handle selections from both file inputs and drag-and-drop operations.
Converting FileList to Array
This feature allows you to convert a FileList object, which is obtained from a file input element, into an array of files for easier iteration and manipulation.
import { fromFileList } from 'file-selector';
const inputElement = document.querySelector('input[type="file"]');
inputElement.addEventListener('change', async (event) => {
const filesArray = await fromFileList(event.target.files);
// Now you have an array of files
});Handling Drag-and-Drop Files
This feature provides a way to handle files dropped into a dropzone on a webpage, converting the DataTransferItem list from the event into an array of files.
import { fromEvent } from 'file-selector';
const dropzone = document.getElementById('dropzone');
dropzone.addEventListener('drop', async (event) => {
event.preventDefault();
const items = await fromEvent(event);
// Now you have an array of files from the drop event
});Dropzone is a widely-used library that provides drag-and-drop file uploads with image previews. It's more feature-rich than file-selector, offering UI for file previews and progress bars, but it's also heavier and more opinionated in terms of functionality.
React-dropzone is a React wrapper for dropzone.js. It integrates the drag-and-drop file upload functionality into React components, making it convenient for React developers. It is similar to file-selector but tailored specifically for React and provides more UI components.
Readme
A small package for converting a DragEvent or file input to a list of File objects.
You can install this package from NPM:
npm add file-selector
Or with Yarn:
yarn add file-selector
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:
const {fromEvent} = fileSelector;
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Convert a DragEvent to File objects:
import {fromEvent} from 'file-selector';
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Convert a change event for an input type file to File objects:
import {fromEvent} from 'file-selector';
const input = document.getElementById('myInput');
input.addEventListener('change', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
Convert FileSystemFileHandle items to File objects:
import {fromEvent} from 'file-selector';
// Open file picker
const handles = await window.showOpenFilePicker({multiple: true});
// Get the files
const files = await fromEvent(handles);
console.log(files);
NOTE The above is experimental and subject to change.
Convert a DragEvent to File objects:
const {fromEvent} = require('file-selector');
document.addEventListener('drop', async evt => {
const files = await fromEvent(evt);
console.log(files);
});
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:
If you wish to contribute, please use the following guidelines:
[ci skip] in commit messages to skip a buildSupport us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
MIT
FAQs
Convert DataTransfer object to a list of File objects
The npm package file-selector receives a total of 2,354,538 weekly downloads. As such, file-selector popularity was classified as popular.
We found that file-selector demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.