File upload MDB Pro component

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.

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.

Default message example

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

Custom height example

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

Max size

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

Default value

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

Disable

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

Accept formats

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

Disabled remove button

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

Multiple files

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

Multiple with files limit

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

File upload - API

Usage

Via data attributes

HTML


        <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

JavaScript


        FileUpload.getInstance(document.getElementById('file-upload')).update({ previewMsg: ...,
        maxSizeError: ... });

Via jQuery

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

jQuery

 $('.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'`	Allows you to disabled remove button
`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()`
`update`	Manually updates settings in drag and drop	`FileUpload.update()`

For example, to update component

javascript


        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:

JavaScript


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

Import

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

JavaScript


        import { FileUpload } from 'mdb-ui-kit';