![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
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 file input 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 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 buildFAQs
Convert DataTransfer object to a list of File objects
The npm package file-selector receives a total of 2,267,936 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.