File Upload

We are using Dropzone as file upload component. DropzoneJS is an open source library that provides drag-n-drop file uploads with image previews.
Read the official Dropzone Documentation for a full list of instructions and other options.


Usage

In order to use Dropzone on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/dropzone/dropzone.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/dropzone/dropzone.js" />

Examples

Basic

To create a basic dropzone initialize dropzone like this : $("YOUR_ELEMENT").dropzone();. We have used maxFiles to limit the number of file upload to one.

Drop files here or click to upload (This is just a demo dropzone. Selected files are not actually uploaded.)
<form action="/upload" class="dropzone needsclick" id="dropzone-basic">
  <div class="dz-message needsclick">
    Drop files here or click to upload
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <span class="fw-medium">not</span> actually uploaded.)</span>
  </div>
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>
const myDropzone = new Dropzone('#dropzone-basic', {
  previewTemplate: previewTemplate,
  parallelUploads: 1,
  maxFilesize: 5,
  addRemoveLinks: true,
  maxFiles: 1
});

Multiple

You don't have to add anything extra to create a multiple dropzone, you can just initialize it normally.

Drop files here or click to upload (This is just a demo dropzone. Selected files are not actually uploaded.)
<form action="/upload" class="dropzone needsclick" id="dropzone-multi">
  <div class="dz-message needsclick">
    Drop files here or click to upload
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <span class="fw-medium">not</span> actually uploaded.)</span>
  </div>
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>
const dropzoneMulti = new Dropzone('#dropzone-multi', {
  previewTemplate: previewTemplate,
  parallelUploads: 1,
  maxFilesize: 5,
  addRemoveLinks: true
});
© 2017- ThemeSelection, Hand-crafted & Made with ❤️