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.
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" />forms-file-upload.js for more details. Don't change it unless you really know what you are doing.
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.
<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.
<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
});