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.

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


        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.

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	`'Drag and drop a file here or click'`	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()`
`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()`

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-file-upload';