Drag and drop file upload

Bootstrap drag and drop file upload plugin

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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.

Edit in sandbox 
        
            
          <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

Edit in sandbox 
        
            
          <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.webp" />
          </div>
        
        
    
        
            
          $('.file-upload').file_upload();

Custom height

You can set its height

Edit in sandbox 
        
            
          <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

Edit in sandbox 
        
            
          <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.webp" />
          </div>
        
        
    
        
            
              $('.file-upload').file_upload();

Max size

You can add a maximum file size

Edit in sandbox 
        
            
          <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

Tutorial