@itrocks/file-drop

v0.1.0

Published

3 days ago

Drag-and-drop enhancement for native file inputs

Downloads

0High
0Medium
0Low

baptistepillot

drag drop file file-input form frontend html input it.rocks UI upload UX

file-drop

Drag-and-drop enhancement for native file inputs.

Installation

npm install @itrocks/file-drop

Usage

Basic usage

import { fileDrop } from '@itrocks/file-drop/file-drop.js'

const input = document.querySelector('input[type=file]')
fileDrop(input)

HTML example with default styling

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/@itrocks/file-drop/file-drop.css">
</head>
<body>
	<input type="file" id="invoice">
	<script type="module">
		import { fileDrop } from '/@itrocks/file-drop/file-drop.js'
		fileDrop(document.getElementById('invoice'))
	</script>
</body>
</html>

Multiple inputs

document.querySelectorAll('input[type=file]').forEach(fileDrop)

Dynamic DOM support (optional)

If file inputs are added dynamically, use the optional integration with @itrocks/build.

import '@itrocks/file-drop/file-drop.css'
import '@itrocks/file-drop/build.js'

This automatically applies drag-and-drop behaviour to:

dynamically inserted inputs
inputs loaded via fetch / XHR
inputs created via JavaScript

Custom build integration

If you already use your own @itrocks/build setup, you can integrate manually.

Example applying only to inputs having a specific class:

import { build }    from '@itrocks/build'
import { fileDrop } from '@itrocks/file-drop/file-drop.js'

build('input[type=file].drop-zone', element => fileDrop(element))

Example applying inside a specific container:

build('#invoices input[type=file]', element => fileDrop(element))

Behaviour

Enables drag-and-drop on native file inputs
Works with single and multiple file inputs
Adds drag-over class during drag interaction
Triggers native change event after drop
Does not replace native file selection behaviour

Styling

Default styling is provided in:

file-drop.css

You may:

override the .drag-over class
provide your own styles
omit the default stylesheet

Browser support

Requires modern browsers supporting:

DataTransfer API
File API
ES modules

No legacy browser support is provided.