• third party plugins
  • File Upload

third party plugins

Tailwind CSS File Upload

File Upload enhances web forms with a Tailwind CSS interface, offering drag-and-drop, previews, progress bars, multiple uploads, and file validation.

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:

    <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:

    <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.

File Upload Structure

Basic outline

Prefer to create your own style? Here is a completely unstylized example.

<div data-file-upload='{
  "url": "/upload"
}'>
  <template data-file-upload-preview>
    <button type="button" data-file-upload-remove>
      Delete!
    </button>
    <span data-file-upload-file-icon>
      <img class="hidden" data-dz-thumbnail />
    </span>
    <div>
      <span data-file-upload-file-name></span>.<span data-file-upload-file-ext></span>
    </div>
    <div data-file-upload-file-size></div>
    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-file-upload-progress-bar>
      <div style="width: 0" data-file-upload-progress-bar-pane></div>
    </div>
    <span data-file-upload-progress-bar-value>0</span>%
  </template>
  <div class="cursor-pointer" data-file-upload-trigger>
    Drop your file here or browse
  </div>
  <div data-file-upload-previews></div>
</div>

Basic example

Default

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.

Destroy/Reinitialize

new
The destroy method is provided to facilitate the destruction of a 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.

Methods

The HSRemoveElement object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSRemoveElement.getInstance(target, isInstance)
Returns the element associated to the target.
  • target should be a Node or string (valid selector).
  • isInstance boolean. Returns the instance instead of Node if true.

Destroy instance.

const { element } = HSFileUpload.getInstance('#file-upload-to-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

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!');
});