Third-party plugins

File Upload

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

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://www.dropzone.dev/" target="_blank" class="link link-primary">Dropzone JS</a> with Semji.

<body>
  <script src="../path/to/lodash/lodash.js"></script>
  <script src="../path/to/dropzone/dist/dropzone-min.js"></script>
</body>

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

File Upload Structure

Basic outline

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

Drop your file here or browse

Basic example

Default

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

Choose a file with a size up to 2MB.

Browse

Error state

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

Choose a file no larger than 1MB.

Browse

Illustrations

Gallery

Using file upload as a gallery.

Choose a file with a size up to 2MB.

Browse

Upload single image

Use file upload for a single image.

Input file

Using file upload as a simple file upload.

Destroy/Reinitialize

The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a file upload.

Choose a file with a size up to 2MB.

Browse