@grafikart/drop-files-element
v1.0.9
Published
Customized built-in element to add user interactions on a file input with multiple files as a progressive enhancement.
Downloads
530
Readme
Customized built-in elements is="drop-files"
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