# file-drop Custom Element The file drop custom element is a simple Custom Element that accepts `File` objects being dropped on it and fires a dedicated event `onfiledrop` when a successful drop occurs. ## Installation `npm i file-drop-element` ## Demo You can try a quick demo of this element on [glitch](https://file-drop-element.glitch.me/). ## Usage ### Directly as a module Copy from `node_modules` in to a local directory. ```HTML Drop file here ``` ### Directly as a UMD, for non-ES6 Module supporting browsers ```HTML Drop file here ``` ### Respond to when a file is dropped on the element When a user has succesfully dropped a file on to the element, the element will emit a `filedrop` event. The `filedrop` event contains a `file` property which is a direct reference to the `File` that was dropped. ``` Drop a file here ``` Note: if more than one file is dropped on the element, only the first file will be included on the event. ### Only allow certain files to be dropped on the element. The element will accept any `drop` event that has the `.dataTransfer` object populated with _any_ file. If you want to control the types of files that can be dropped on to the element, use the same syntax that `` elements use when the `accept` attribute is set, that is: * `` - any file * `` - all images * `` - only Images that have the MIME-type of a PNG. ### Allow multiple files to be dropped The element can accept multiple files being dropped or pasted on to the element. By default the element will only accept return the first file if the user drops multiple files on it. If you want to receive multiple files in the event you can add the `multiple` attribute to the element. ```HTML Drop file here ``` If you add an `accept` attribute alongside the `multiple` element, the `onfiledrop` event will only trigger if there is at least one file that matches the criteria. It will return a filtered list of files where each file will match the value in the `accept` attribute. ```HTML Drop file here ``` ### Styling The element is an `inline` display element and it can be controlled like any normal element. The element does not use Shadow DOM so there are no internal elements to style. The element will add two classes `drop-valid` and `drop-invalid` to the element depending on the mime-type of the file that is currently being dragged over the element. ```HTML ```