File upload

Bootstrap 5 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.

File upload plugin built with the latest Bootstrap 5. Many customization options like custom height, max size, confirmation message, and much more.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

For each input with a data-mdb-file-upload-init attribute 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-input"
              data-mdb-file-upload-init
            />
          </div>

Default message example

By adding data-mdb-default-msg attribute you can set main message of the file upload.

Edit in sandbox 
        
            
          <div id="dnd-custom-default-msg" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-default-msg="custom message"
              data-mdb-file-upload-init
            />
          </div>

Custom height example

By adding data-mdb-height attribute you can set its custom height.

Edit in sandbox 
        
            
          <div id="dnd-custom-height" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-height="500"
              data-mdb-file-upload-init
            />
          </div>

Max size

By adding data-mdb-max-file-size attribute you can set max size of a file.

Edit in sandbox 
        
            
          <div id="dnd-max-size" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-max-file-size="2M"
              data-mdb-file-upload-init
            />
          </div>

Default file

By adding data-mdb-default-file attribute you can set default file in the file upload element.

Edit in sandbox 
        
            
          <div id="dnd-default-file" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-default-file="https://mdbcdn.b-cdn.net/img/Photos/Others/images/89.webp"
              data-mdb-file-upload-init
            />
          </div>

Disable

By adding data-mdb-disabled attribute you can disable the component.

Edit in sandbox 
        
            
          <div id="dnd-disable" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-disabled="disabled"
              data-mdb-file-upload-init
            />
          </div>

Accept formats

By adding data-mdb-accepted-extensions you can set allowed file types.

Edit in sandbox 
        
            
          <div id="dnd-accept-formats" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-accepted-extensions="image/*, .pdf"
              data-mdb-file-upload-init
            />
          </div>

Disabled remove button

By adding data-mdb-disabled-remove-btn attribute you can remove "Remove button".

Edit in sandbox 
        
            
          <div id="dnd-desabled-btn" class="file-upload-wrapper">
            <input
              type="file"
              class="file-upload-input"
              data-mdb-disabled-remove-btn="true"
              data-mdb-file-upload-init
            />
          </div>

Multiple files

By adding data-mdb-multiple attribute you can allow to upload more than single file.

Edit in sandbox 
        
            
          <div class="file-upload-wrapper">
            <input
              id="dnd-multiple-files"
              type="file"
              class="file-upload-input"
              data-mdb-multiple="true"
              data-mdb-file-upload-init
            />
          </div>

Multiple with files limit

By adding data-mdb-max-file-quantity attribute you can set limit of uploaded files.

Edit in sandbox 
        
            
          <div class="file-upload-wrapper">
            <input
              id="dnd-multiple-with-file-limit"
              type="file"
              class="file-upload-input"
              data-mdb-multiple="true"
              data-mdb-max-file-quantity="3"
              data-mdb-file-upload-init
            />
          </div>

File upload - API

Import

Edit in sandbox 
        
            
        import FileUpload from 'mdb-file-upload';
        
        
    
        
            
          @import '~mdb-file-upload/css/file-upload.min.css';

Usage

Via data attributes

Using the File upload plugin doesn't require any additional JavaScript code - simply add data-mdb-file-upload-init attribute to input tag and use other data attributes to set all options.

Edit in sandbox 
        
            
        <div id="dnd" class="file-upload-wrapper">
          <input
            id="file-upload"
            type="file"
            data-mdb-file-upload-init
            class="file-upload-input"
            data-mdb-main-error="Ooops, error here"
            data-mdb-format-error="Bad file format (correct format ~~~)"
          />
        </div>

Via JavaScript

Edit in sandbox 
        
            
        const fileUploadEl = document.querySelector('#file-upload');
        const fileUploadInstance = new FileUpload(fileUploadEl);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
        
            
        $(document).ready(() => { 
          $('.example-class').fileUpload();
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-default-msg="".

Name Type Default Description
acceptedExtensions Array [] Allows you to set specific file formats
defaultFile String | null null Allows you set default file
defaultMsg String 'Drag and drop a file here or click' Changes text of default message
disabled String | Boolean false Makes file upload disabled
disabledRemoveBtn Boolean false Deletes the Remove button from DOM
formatError String 'Your file has incorrect file format (correct format(s) ~~~)' Changes text of format's error (add '~~~' to show allowed formats)
height Number | null null Changes height of dropzone
mainError String 'Ooops, something wrong happended.' Changes text of main error message
maxFileQuantity Number Infinity Allows you to upload specific number of files
maxFileSize Infinity | Number Infinity Changes allowed file max size
maxSizeError String 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size)
multiple Boolean false Allows you to upload more than single file
previewMsg String 'Drag and drop or click to replace' Changes text of file's preview
removeBtn String 'Remove' Changes text of remove button

Methods

Name Description Example
dispose Manually removes a file upload instance. instance.dispose()
getInstance Static method which allows you to get the file upload instance associated with a DOM element. FileUpload.getInstance(fileUpload)
update Manually update the settings for the file upload plugin. instance.update()
reset Manually resets the file upload plugin. instance.reset()
Edit in sandbox 
        
            
        const fileUpload = document.getElementById('file-upload');
        const fileUploadInstance = FileUpload.getInstance(fileUpload);
        fileUploadInstance.update({ multiple: true, });

Events

Name Description
fileError.mdb.fileUpload This event fires immediately when you upload a file with wrong format or wrong size.
fileAdd.mdb.fileUpload This event fires immediately when a file has been uploaded in to file upload component.
fileRemove.mdb.fileUpload This event fires immediately when a file has been remove from file upload component.
Edit in sandbox 
        
            
        const fileUpload = document.getElementById('file-upload');
        fileUpload.addEventListener('fileAdd.mdb.fileUpload', (e) => {
          const addedFile = e.files;
        });