Skip to content
Customized built-in element to add user interactions on a file input with multiple files as a progressive enhancement.
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows ci: publish action name Nov 12, 2019
src fix: error with the multiple attribute Dec 17, 2019
tests fix: multiple attribute onConnected Dec 17, 2019
.eslintrc.js style: eslint Nov 11, 2019
.prettierrc style: eslint Nov 11, 2019
.travis.yml ci(travis): nodejs 13 environment Dec 15, 2019 doc: safari compatibility Dec 30, 2019
index.html tool: rollup dev server Dec 5, 2019
jest-puppeteer.config.js feat: handle moving / removing the field Nov 10, 2019
jest.config.js style: git hooks Nov 11, 2019
package.json fix: error with the multiple attribute Dec 17, 2019
preview.jpg doc: image preview Nov 10, 2019
tsconfig.json style: git hooks Nov 11, 2019
yarn.lock fix: handling "multiple" attribute Dec 15, 2019

Customized built-in elements is="drop-files"

npm Build Status Build Status

The goal of this module is to add user interaction on a file input with multiple files as a progressive enhancement (the form still works if this JavaScript is disabled). Live demo


With npm

Install the package using npm or yarn

npm i @grafikart/drop-files-element
# or
yarn add @grafikart/drop-files-element

Then import it in your script

import '@grafikart/drop-files-element'


<script type="module" src="//"></script>

Then use the custom element in your html using is="drop-files.

        label="Drop files here or click to upload."
        help="Upload files here and they won't be sent immediately"


Unfortunately safari doesn't support Custom built-in elements and does not have a constructor for DataTransfer ( so this custom element won't display (native input will be displayed)



Attribute Type Description
label string The label used as a bold text for the drop area
help string Help text used as a secondary text for the drop area

CSS Custom Properties


HTML Structure

This component doesn't use shadow dom so you can customize the style using CSS and overwrite the style already included inside this custom element.



  • Fixed the behaviour of a single file input


  • Correctly handle input without the "multiple" attribute (issue #4)


  • Fixed a rendering bug on Firefox (issue #2)


  • Fixed a bug happening when no attributes were passed to the component


  • Fix style when box-sizing is set to border-box


  • Better error handling
  • Improved style for the delete button
You can’t perform that action at this time.