Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
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.
droppable
Advanced tools
Readme
A javascript library to give file dropping super-powers to any HTML element.
Wouldn't it be great if you could drop files in any HTML element?
Well now you can! 🎉
When files get dropped or selected into your element you will retrieve them as File objects. This means you can do anything you want with the dropped/selected files!
Here are some concrete usecases.
You can see the library in action here.
const Droppable = require('droppable');
const droppable = new Droppable({
element: document.querySelector('#my-droppable-element')
})
droppable.onFilesDropped((files) => {
console.log('Files were dropped:', files);
});
// Clean up when you're done!
droppable.destroy();
✔ | ✔ | 10+ ✔ | ✔ | ✔ | ✔ |
npm install droppable
The library is also available as a standalone script in multiple formats (UMD, ES5, ES6 ...).
You can get the latest version from /dist
or the stable one from the releases page.
const Droppable = require('droppable');
const droppable = new Droppable({
element: document.querySelector('#my-droppable-element')
});
droppable.onFilesDropped((files) => {
console.log('Files were dropped:', files);
});
onFilesDropped
returns a function which when called removes the event listener
const eventRemover = droppable.onFilesDropped((files) => {
console.log('Files were dropped on the element:', files);
});
eventRemover();
const latestDroppedFiles = droppable.getLatestDroppedFiles();
Sometimes you will want to prompt the users for files without them dropping files or clicking the element.
droppable.promptForFiles();
This is by default true
The user will be prompted for files when the droppable element is clicked
// On instantiation
const droppable = new Droppable({
element,
isClickable: true
})
// On runtime
droppable.setIsClickable(true);
The user won't be prompted for files when the droppable element is clicked
// On instantiation
const droppable = new Droppable({
element,
isClickable: false
})
// On runtime
droppable.setIsClickable(false);
This is by default true
The user will be able to drop or select multiple files.
// On instantiation
const droppable = new Droppable({
element,
acceptsMultipleFiles: true
})
// On runtime
droppable.setAcceptsMultipleFiles(true);
The user will be able to drop or select one single file.
// On instantiation
const droppable = new Droppable({
element,
acceptsMultipleFiles: false
})
// On runtime
droppable.setAcceptsMultipleFiles(false);
This is by default true
The class dragover
will be added to the droppable element when files are being dragged on it.
// On instantiation
const droppable = new Droppable({
element,
appendStatusClasses: true
})
// On runtime
droppable.setAppendStatusClasses(true);
The class dragover
won't be added to the droppable element when files are being dragged on it.
// On instantiation
const droppable = new Droppable({
element,
appendStatusClasses: false
})
// On runtime
droppable.setAppendStatusClasses(false);
The library attaches several events to the HTML element made droppable.
The destroy
function not only removes all of them but also the onFilesDropped listeners.
droppable.destroy();
The library makes the droppable elements accesible, this means that they can get focused by the user.
Your browser by default adds an outline to the focused items. To remove it, in your css:
#your-droppable-item:focus{
outline: 0;
}
In your css:
#your-droppable-item:focus:not(:active){
// Here you can do anything! For example adding a shadow
box-shadow: 0 0 0 0.125em rgba(111, 14, 217, 0.25);
}
git clone git@github.com:lifenautjoe/droppable.git
npm t
: Run test suitenpm start
: Runs npm run build
in watch modenpm run test:watch
: Run test suite in interactive watch modenpm run test:prod
: Run linting and generate coveragenpm run build
: Generate bundles and typings, create docsnpm run lint
: Lints codenpm run commit
: Commit using conventional commit style (husky will tell you to use it if you haven't :wink:)Author Joel Hernandez
FAQs
A library to give file dropping super-powers to any HTML element.
The npm package droppable receives a total of 67 weekly downloads. As such, droppable popularity was classified as not popular.
We found that droppable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.