Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@grafikart/drop-files-element

1.0.9 • Public • Published

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

Usage

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'

With unpkg.com

<script type="module" src="//unpkg.com/@grafikart/drop-files-element"></script>

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

<input
        type="file"
        multiple
        name="files[]"
        label="Drop files here or click to upload."
        help="Upload files here and they won't be sent immediately"
        is="drop-files"
/>

Safari

Unfortunately safari doesn't support Custom built-in elements and you have to polyfill this feature at the moment using @ungap polyfill

<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

Customization

Attributes

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

Property
--drop-border-color
--drop-border-color-hover

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.

Changelog

1.0.9

  • Fixed the behaviour of a single file input

1.0.8

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

1.0.7

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

1.0.6

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

1.0.5

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

1.0.4

  • Better error handling
  • Improved style for the delete button

Keywords

none

Install

npm i @grafikart/drop-files-element

DownloadsWeekly Downloads

126

Version

1.0.9

License

MIT

Unpacked Size

24.4 kB

Total Files

3

Last publish

Collaborators

  • avatar