{"id":16252560,"url":"https://github.com/lifenautjoe/droppable","last_synced_at":"2025-04-06T07:10:59.734Z","repository":{"id":30961642,"uuid":"126509775","full_name":"lifenautjoe/droppable","owner":"lifenautjoe","description":"A javascript library to give file dropping super-powers to any HTML element.","archived":false,"fork":false,"pushed_at":"2023-01-11T12:02:45.000Z","size":3841,"stargazers_count":202,"open_issues_count":19,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T06:04:23.652Z","etag":null,"topics":["drop","drop-file","drop-files","droppable","file-dropper","file-select","file-selector","files","select-file","select-files","typescript","web"],"latest_commit_sha":null,"homepage":"https://lifenautjoe.github.io/droppable","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lifenautjoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-23T16:14:16.000Z","updated_at":"2025-03-22T11:08:39.000Z","dependencies_parsed_at":"2023-01-14T18:02:51.636Z","dependency_job_id":null,"html_url":"https://github.com/lifenautjoe/droppable","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fdroppable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fdroppable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fdroppable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifenautjoe%2Fdroppable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifenautjoe","download_url":"https://codeload.github.com/lifenautjoe/droppable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445669,"owners_count":20939958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drop","drop-file","drop-files","droppable","file-dropper","file-select","file-selector","files","select-file","select-files","typescript","web"],"created_at":"2024-10-10T15:14:02.870Z","updated_at":"2025-04-06T07:10:59.717Z","avatar_url":"https://github.com/lifenautjoe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"droppable logo\" src=\"https://github.com/lifenautjoe/droppable-website/blob/fade7e64b1d8e4790296ec3761e77204c1621082/src/assets/logo-2.png?raw=true\" width=\"250\"\u003e\n\nA javascript library to give file dropping super-powers to any HTML element.\n\n[![Build Status](https://travis-ci.org/lifenautjoe/droppable.svg?branch=master)](https://travis-ci.org/lifenautjoe/droppable) ![Human Friendly](https://img.shields.io/badge/human-friendly-brightgreen.svg) [![Coverage Status](https://coveralls.io/repos/github/lifenautjoe/droppable/badge.svg?branch=master)](https://coveralls.io/github/lifenautjoe/droppable?branch=master)[![npm version](https://badge.fury.io/js/droppable.svg)](https://badge.fury.io/js/droppable)\n\n## Table of Contents\n\n- [Motivation](#motivation)\n- [Features](#features)\n- [Usecases](#usecases)\n- [Demo](#demo)\n- [Basic usage](#basic-usage)\n- [Browser Compatibility](#browser-compatibility)\n- [Installation](#installation)\n  * [npm](#npm)\n  * [Scripts](#scripts)\n- [Advanced usage](#advanced-usage)\n  * [Create a droppable element](#create-a-droppable-element)\n  * [Listen for dropped files](#listen-for-dropped-files)\n  * [Remove listener for dropped files](#remove-listener-for-dropped-files)\n  * [Get the latest dropped files](#get-the-latest-dropped-files)\n  * [Trigger prompt for files](#trigger-prompt-for-files)\n  * [Enable prompt for files when clicked](#enable-prompt-for-files-when-clicked)\n  * [Disable prompt for files when clicked](#disable-prompt-for-files-when-clicked)\n  * [Enable multiple files drop](#enable-multiple-files-drop)\n  * [Disable multiple files drop](#disable-multiple-files-drop)\n  * [Enable append CSS class when files are dragged on element](#enable-append-css-class-when-files-are-dragged-on-element)\n  * [Disable append CSS class when files are dragged on element](#disable-append-css-class-when-files-are-dragged-on-element)\n  * [Destroy](#destroy)\n- [FAQ](#faq)\n  * [My droppable element has a border around it when focused](#my-droppable-element-has-a-border-around-it-when-focused)\n  * [I want to add a style to my droppable element when focused](#i-want-to-add-a-style-to-my-droppable-element-when-focused)\n- [Development](#development)\n  * [Clone the repository](#clone-the-repository)\n\n## Motivation\n\nWouldn't it be great if you could drop files in any HTML element?\n\nWell now you can!  🎉\n\n## Features\n\n* Restrict drop to single or multiple files\n* CSS class added when files are being dragged on top of the HTML element (configurable)\n* Clicking on the html element also prompts user for files (configurable)\n* Zero dependencies\n* Tiny! (~4 KB Minified)\n* Accessibility support\n\n## Usecases\n\nWhen files get dropped or selected into your element you will retrieve them as [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects. This means **you can do anything you want with the dropped/selected files!**\n\nHere are some concrete usecases.\n\n* Upload the files (e.g. chat media/attachment, file chunking, file sharing)\n* Edit the files (e.g. Text editor, image editor)\n* Inspect the files (e.g. syntax validator, file stats)\n* Encrypt the files ([Yes you can](https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt))\n\n## Demo\n\nYou can see the library in action [here](https://lifenautjoe.github.io/droppable/).\n\n## Basic usage\n\n````typescript\nconst Droppable = require('droppable');\n\nconst droppable = new Droppable({\n    element: document.querySelector('#my-droppable-element')\n})\n\ndroppable.onFilesDropped((files) =\u003e {\n    console.log('Files were dropped:', files);\n});\n\n// Clean up when you're done!\ndroppable.destroy();\n````\n\n## Browser Compatibility\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |\n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| ✔                                                                                 | ✔                                                                                    | 10+ ✔                                                                                                                        | ✔                                                                              | ✔                                                                                 | ✔                                                                           |\n\n\n## Installation\n\n### npm\n\n```bash\nnpm install droppable\n```\n\n### Scripts\n\nThe library is also available as a standalone script in multiple formats (UMD, ES5, ES6 ...).\n\nYou can get the latest version from `/dist` or the stable one from the [releases page](https://github.com/lifenautjoe/droppable/releases).\n\n## Advanced usage\n\n### Create a droppable element\n\n````typescript\nconst Droppable = require('droppable');\n\nconst droppable = new Droppable({\n    element: document.querySelector('#my-droppable-element')\n});\n````\n\n### Listen for dropped files\n```typescript\ndroppable.onFilesDropped((files) =\u003e {\n    console.log('Files were dropped:', files);\n});\n```\n\n### Remove listener for dropped files\n`onFilesDropped` returns a function which when called removes the event listener\n```typescript\nconst eventRemover = droppable.onFilesDropped((files) =\u003e {\n    console.log('Files were dropped on the element:', files);\n});\n\neventRemover();\n```\n\n### Get the latest dropped files\n```typescript\nconst latestDroppedFiles = droppable.getLatestDroppedFiles();\n```\n\n### Trigger prompt for files\nSometimes you will want to prompt the users for files without them dropping files or clicking the element.\n```typescript\ndroppable.promptForFiles();\n```\n\n### Enable prompt for files when clicked\n**This is by default `true`**\n\nThe user will be prompted for files when the droppable element is clicked\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    isClickable: true\n})\n\n// On runtime\ndroppable.setIsClickable(true);\n```\n\n### Disable prompt for files when clicked\n\nThe user won't be prompted for files when the droppable element is clicked\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    isClickable: false\n})\n\n// On runtime\ndroppable.setIsClickable(false);\n```\n\n### Enable multiple files drop\n**This is by default `true`**\n\nThe user will be able to drop or select multiple files.\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    acceptsMultipleFiles: true\n})\n\n// On runtime\ndroppable.setAcceptsMultipleFiles(true);\n```\n\n### Disable multiple files drop\n\nThe user will be able to drop or select one single file.\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    acceptsMultipleFiles: false\n})\n\n// On runtime\ndroppable.setAcceptsMultipleFiles(false);\n```\n\n### Enable append CSS class when files are dragged on element\n**This is by default `true`**\n\nThe class `dragover` will be added to the droppable element when files are being dragged on it.\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    appendStatusClasses: true\n})\n\n// On runtime\ndroppable.setAppendStatusClasses(true);\n```\n\n### Disable append CSS class when files are dragged on element\n\nThe class `dragover` won't be added to the droppable element when files are being dragged on it.\n\n```typescript\n// On instantiation\nconst droppable = new Droppable({\n    element,\n    appendStatusClasses: false\n})\n\n// On runtime\ndroppable.setAppendStatusClasses(false);\n```\n\n\n### Destroy\nThe library attaches several events to the HTML element made droppable.\nThe `destroy` function not only removes all of them but also the onFilesDropped listeners.\n\n```typescript\ndroppable.destroy();\n```\n\n## FAQ\n\n### My droppable element has a border around it when focused\n\nThe library makes the droppable elements accesible, this means that they can get focused by the user.\n\nYour browser by default adds an outline to the focused items. To remove it, in your css:\n\n```css\n    #your-droppable-item:focus{\n        outline: 0;\n    }\n\n```\n\n### I want to add a style to my droppable element when focused\n\nIn your css:\n\n```css\n    #your-droppable-item:focus:not(:active){\n        // Here you can do anything! For example adding a shadow\n        box-shadow: 0 0 0 0.125em rgba(111, 14, 217, 0.25);\n    }\n```\n\n## Development\n\n### Clone the repository\n\n```bash\ngit clone git@github.com:lifenautjoe/droppable.git\n```\n\n### Use npm commands\n\n* `npm t`: Run test suite\n* `npm start`: Runs `npm run build` in watch mode\n* `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)\n* `npm run test:prod`: Run linting and generate coverage\n* `npm run build`: Generate bundles and typings, create docs\n* `npm run lint`: Lints code\n* `npm run commit`: Commit using conventional commit style \\([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:\\)\n\nAuthor [Joel Hernandez](https://instagram.com/lifenautjoe)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifenautjoe%2Fdroppable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifenautjoe%2Fdroppable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifenautjoe%2Fdroppable/lists"}