• third party plugins
  • File Upload

third party plugins

Tailwind CSS File Upload

File Upload enhances web forms with a Tailwind CSS-compatible interface, featuring drag-and-drop, previews, progress bars, and simultaneous multiple uploads. It supports automatic or manual submission and validates file types and sizes.

Require FlyonUI JS

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Dropzone JS with FlyonUI.

  • 1
    Step 1: Installation

    Install Dropzone and lodash using npm. Certain JavaScript helpers for Dropzone require the lodash plugin, so make sure to install it as well.

    npm i dropzone lodash
  • 2
    Step 2: Include Dropzone and Lodash JavaScript and CSS

    Include the necessary CSS and JavaScript files in your project at the specified locations:

    <head>
  <link rel="stylesheet" href="../path/to/dropzone/dist/dropzone.css" />
</head>
<body>
  <script src="../path/to/lodash/lodash.js"></script>
  <script src="../path/to/dropzone/dist/dropzone-min.js"></script>
</body>
    Since no custom CSS overrides are required, you can also use a CDN link.

    Insert the following JavaScript and CSS CDN links into their respective sections:

    <head>
  <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
</body>
Class Name
Type
Description
file-upload-complete:{tw-utility-class}ModifierA modifier that allows you to set Tailwind classes to items that successfully uploaded.

Basic Usage

Example

Using the most basic file upload markup, here’s how file upload look.

Use <template> to style your file upload output. The following example demonstrates the default template layout.

Error state

The system will throw an error if the file size exceeds 1 MB.

Illustrations

Gallery

Using file upload as a gallery.

Upload Single Image

Use file upload for a single image.

Input File

Using file upload as a simple file upload.

JavaScript behavior

Options

Please understand that this component requires the Dropzone.js plugin. Most of the plugin’s options are also available in our wrapper.

View Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-file-uploadActivate a File Upload by specifying on an element.--
:extensionsA list of extensions and their corresponding icons will be added to the container with the data-file-upload-file-icon selector if they match the extension name.objectIncludes markup. See the code.
:autoHideTriggerIf the attribute value is true, then data-file-upload-trigger will disappear if at least one item is added to the upload and will appear if more than one item is not in the upload.booleanfalse
:singletonIf the attribute value is true, the plugin will remove any previously uploaded files. This is necessary to emulate the behavior of a simple file input.booleanfalse

Selector

Name
Description
data-file-upload-triggerSpecifies which element within the initialized container will serve as the clickable element.
data-file-upload-previewsSpecifies which element within the initialized container will act as a wrapper for uploaded items.
data-file-upload-clearSpecifies which element within the initialized container will serve as the button to delete all files.
data-file-upload-previewSpecifies which element within the initialized container will act as a template for the uploading item. This should be an HTML template element.
data-file-upload-file-iconSpecifies which element within the uploading item will act as a wrapper for the file icon defined in the extensions property.
data-file-upload-file-nameSpecifies which element within the uploading item will act as a wrapper for the file name.
data-file-upload-file-extSpecifies which element within the uploading item will act as a wrapper for the file extension.
data-file-upload-file-sizeSpecifies which element within the uploading item will act as a wrapper for the file size.
data-file-upload-removeSpecifies which element within the uploading item will act as the remove button.
data-file-upload-reloadSpecifies which element within the uploading item will act as the re-upload button.
data-file-upload-progress-barSpecifies which element within the uploading item will act as the progress bar.
data-file-upload-progress-bar-paneSpecifies which element within the uploading item will act as the progress bar pane, whose width will dynamically increase during the upload process.
data-file-upload-progress-bar-valueSpecifies which element within the uploading item will display the current progress value, which will dynamically increase during the upload process.

Events

Example of an event triggered when an item is successfully uploaded to the server.

const { element } = HSFileUpload.getInstance('#file-upload', true);
const { dropzone } = element;

dropzone.on('complete', () => {
console.log('Item uploaded!');
});