Drag and drop file upload
Bootstrap drag and drop file upload plugin
MD Bootstrap's File Upload plugin is an extension that allows you to upload files by using drag and drop functionality. Easy to use, setup and customize.
To start working with the drag and drop file upload plugin see the "Getting Started" tab on this page.
Basic example
For each element with a file upload plugin, you have to add a wrapper with the class
file-upload-wrapper.
<div class="file-upload-wrapper">
<input type="file" id="input-file-now" class="file-upload" />
</div>
$('.file-upload').file_upload();
Default value
You can add a default value to the plugin
<div class="file-upload-wrapper">
<input type="file" id="input-file-now-custom-1" class="file-upload" data-default-file="https://mdbootstrap.com/img/Photos/Others/images/89.jpg" />
</div>
$('.file-upload').file_upload();
Custom height
You can set its height
<div class="file-upload-wrapper">
<input type="file" id="input-file-now-custom-2" class="file-upload"
data-height="500" />
</div>
$('.file-upload').file_upload();
Disable
You can disable its input
<div class="file-upload-wrapper">
<input type="file" id="input-file-now-disabled-2" class="file-upload" disabled="disabled" data-default-file="https://mdbootstrap.com/img/Others/documentation/1.jpg" />
</div>
$('.file-upload').file_upload();
Max size
You can add a maximum file size
<div class="file-upload-wrapper">
<input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>
$('.file-upload').file_upload();
Drag and drop file upload - getting started : download & setup
Download
This plugin requires a purchase.
Buy Drag and drop file upload plugin