Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
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
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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.