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

Basic example

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

File upload - API

Usage

Via data attributes

Edit in sandbox 
        
            
        <div id="dnd" class="file-upload-wrapper">
          <input
            id="file-upload"
            type="file"
            data-mdb-file-upload="file-upload"
            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 
        
            
       $('.example-class').fileUpload();

Options

Name Type Default Description
acceptedExtensions Array '[]' Allows you to set specific file formats
defaultFile null / string 'null' Allows you set default file
defaultMsg string 'Default message' Changes text of default message
disabled string / boolean 'false' Makes drag and drop 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 null / number '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 drag and drop FileUpload.dispose()
getInstance Static method which allows you to get the file upload instance associated to a DOM element. FileUpload.getInstance(fileUpload)
update Manually updates settings in drag and drop FileUpload.update()
reset Manually resets the file upload plugin FileUpload.reset()

For example, to update component

Edit in sandbox 
        
            
        const fileUpload = document.getElementById('file-upload'); 
        const fileUploadInstance = FileUpload.getInstance(fileUpload); 
        fileUploadInstance.update({ multiple: true, });

Events

Name Description
error.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.

For example, to listen on file add event and get that file:

Edit in sandbox 
        
            
        const fileUpload = document.getElementById('file-upload');
        fileUpload.addEventListener('fileAdd.mdb.fileUpload', (e) => { 
          const addedFile = e.files;
        });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import FileUpload from 'mdb-file-upload';