dd-form-files

Plugin for creating a custom field files.

Install

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dd-form-files.min.js"></script>

or

<script src="https://unpkg.com/[email protected]/dist/dd-form-files.min.js"></script>

Import

Run the command in the console

npm i dd-form-files

Perform the import

const formFiles = require('dd-form-files');

or

import formFiles from 'dd-form-files';

Options

Type: object

input

Type: HTMLInputElement | string Default: [data-drop-input]

The file selection field or selector for receiving it

fieldSelector

Type: string Default: Parent element of the field from the input option

Selector of the element that will react to when dragging file(s) Drag & Drop

dropClass

Type: string Default: drop

The class that will be added to the element from the fieldSelector option when dragging files

action

Type: Function

A function that will be executed when the contents of the field from the input option change

Usage

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dd-form-files.min.js"></script>

...

<script>
   var formFiles = new DDFormFiles();
</script>

or

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dd-form-files.min.js"></script>

...

<script>
   var formFiles = new DDFormFiles({ input: '#file-input-id' });
</script>

Import

const DDFormFiles = require('dd-form-files');

const formFiles = new DDFormFiles();

or

const DDFormFiles = require('dd-form-files');

const formFiles = new DDFormFiles({ input: '#file-input-id' });

Note

To avoid specifying anything in the input option, add the data-drop-input attribute to the desired file selection field.

Example:

<form action="#" data-placeholder-form>
   ...
   <label for="photo" tabindex="0">
      <input type="file" name="photo[]" id="photo" multiple data-drop-input />
      ...
   </label>
   ...
</form>