File Uploads
Dropzone File Upload
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
Make sure to include following js files at end of body element
<!-- plugin js -->
<script src="assets/vendor/dropzone/min/dropzone.min.js"></script>
<!-- init js -->
<script src="assets/js/ui/component.fileupload.js"></script>
<!-- File Upload -->
<form action="/" method="post" class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews"
data-upload-preview-template="#uploadPreviewTemplate">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<div class="dz-message needsclick">
<i class="h1 text-muted ri-upload-cloud-2-line"></i>
<h3>Drop files here or click to upload.</h3>
<span class="text-muted font-13">(This is just a demo dropzone. Selected files are
<strong>not</strong> actually uploaded.)</span>
</div>
</form>
<!-- Preview -->
<div class="dropzone-previews mt-3" id="file-previews"></div>
<!-- file preview template -->
<div class="d-none" id="uploadPreviewTemplate">
<div class="card mt-1 mb-0 shadow-none border">
<div class="p-2">
<div class="row align-items-center">
<div class="col-auto">
<img data-dz-thumbnail src="#" class="avatar-sm rounded bg-light" alt="">
</div>
<div class="col ps-0">
<a href="javascript:void(0);" class="text-muted fw-bold" data-dz-name></a>
<p class="mb-0" data-dz-size></p>
</div>
<div class="col-auto">
<!-- Button -->
<a href="" class="btn btn-link btn-lg text-muted" data-dz-remove>
<i class="ri-close-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>