Rate this docs

Drag and drop file upload

Bootstrap drag and drop file upload plugin

MD Bootstrap 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 drag and drop file upload plugin see "Getting Started" tab on this page.


Basic example

For each element with file upload plugin you have to add wrapper with class fileupload-wrapper.


          <div class="fileupload-wrapper">
            <input type="file" id="input-file-now" class="mdb_upload" />
          </div>
        

          $('.mdb_upload').mdb_upload();
        

Default value

You can add a default value


          <div class="fileupload-wrapper">
            <input type="file" id="input-file-now-custom-1" class="mdb_upload" data-default-file="https://mdbootstrap.com/img/Photos/Others/images/89.jpg" />
          </div>
        

          $('.mdb_upload').mdb_upload();
        

Custom height

You can set the height


          <div class="fileupload-wrapper" <input type="file" id="input-file-now-custom-2" class="mdb_upload"
            data-height="500" />
          </div>
        

          $('.mdb_upload').mdb_upload();
        

Disable

You can disabled the input


          <div class="fileupload-wrapper">
            <input type="file" id="input-file-now-disabled-2" class="mdb_upload" disabled="disabled" data-default-file="https://mdbootstrap.com/img/Others/documentation/1.jpg" />
          </div>
        

          $('.mdb_upload').mdb_upload();
        

Max size

You can add a max file size


          <div class="fileupload-wrapper">
            <input type="file" id="input-file-max-fs" class="mdb_upload" data-max-file-size="2M" />
          </div>
        

          $('.mdb_upload').mdb_upload();
        

Drag and drop file upload - getting started : download & setup


Download

This plugin requires a purchase.

Buy Drag and drop file upload plugin - $9

Tutorial