@mtillmann/file-ingest NPM

File Ingest

A simple class to ingest files in the browser by drag and drop, copy and paste or file input.

Usage

Install the package:

npm install @mtillmann/file-ingest

After creating an instance, you'll receive a custom event file-ingest:files on the target element with the files as event.detail.files.

event.detail.files contains an array of files that passed the accept-option's MIME type check.
Set the includeRejectedFiles-option to true to include rejected files in event.detail.rejected.
If you set the emitWhenEmpty-option to true, the event will be emitted even when no matched files are present.

Bundler

import FileIngest from '@mtillmann/file-ingest';

const fileIngest = new FileIngest();

document.documentElement.addEventListener('file-ingest:files', (event) => {
  console.log(event.detail.files);
});

Module Script Tag

<script type="module">
  import FileIngest from '.../@mtillmann/file-ingest/dist/index.js';

  const fileIngest = new FileIngest();

  document.documentElement.addEventListener('file-ingest:files', (event) => {
    console.log(event.detail.files);
  });
</script>

Classic Script Tag

<script src=".../@mtillmann/file-ingest/dist/index.umd.js"></script>
<script>
  const fileIngest = new FileIngest();

  document.documentElement.addEventListener('file-ingest:files', (event) => {
    console.log(event.detail.files);
  });
</script>

Options

Option	Type	Default	Description
target	`String\\|HTMLElement`	`document.documentElement`	Element or Selector String to attach the events to
accept	`string`	`/`	List of MIME types that are accepted by the instance. Supports wildcard subtypes (e.g. `image/*`)
paste	`boolean`	`true`	Enable or disable paste events
drop	`boolean`	`true`	Enable or disable drop events
change	`boolean`	`true`	Enable or disable change-events on `[type=file]`-inputs
preventDefault	`boolean`	`true`	Prevent the default behavior of the events
dragClasses	`Record\<string, string \\| string[]\>`	`...`	Classes to add and remove on drag events
applyDragClasses	`boolean`	`true`	Apply drag classes to the target element
ignorePasteOnInput	`boolean`	`true`	Ignore paste events on input, textarea and `[contenteditable=true]`-elements
eventPrefix	`string`	`file-ingest`	Prefix for the custom events
eventTarget	`String\\|HTMLElement`	`options.target`	Element to dispatch the custom events on
callback	`Function`	`null`	Callback function to call in addition to events - receives the content of `event.detail` as argument
includeRejectedFiles	`boolean`	`false`	Include rejected files in the event detail - useful for error messages etc.
emitWhenEmpty	`boolean`	`false`	Emit event even when no (matched) files are present

API

`destroy()`

Removes all event listeners and cleans up the instance.

drag-and-drop file-ingest copy-paste file-input

0.0.1

1 year ago