File upload

React 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.


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


Import


        import { MDBFileUpload } from 'mdb-react-file-upload';
      

Properties

FileUpload

Name Type Default Description Example
acceptedExtensions string | Array '[]' Allows you to set specific file formats <MDBFileUpload acceptedExtensions="image/*" />
defaultMsg string 'Drag and drop a file here or click' Changes text of default message <MDBFileUpload defaultMsg="Custom message" />
className String '' Add custom class to the MDBFileUpload <MDBFileUpload className="class" />
disabled boolean 'false' Makes drag and drop disabled <MDBFileUpload disabled />
disabledRemoveBtn boolean 'false' Allows you to disabled remove button <MDBFileUpload disabledRemoveBtn />
getInputFiles Function - Returns current uploaded files array <MDBFileUpload getInputFiles={(files) => console.log(files)} />
formatError string 'Your file has incorrect file format (correct format(s) ~~~)' Changes text of format's error (add '~~~' to show allowed formats) <MDBFileUpload formatError="Custom message" />
mainError string 'Ooops, something wrong happended.' Changes text of main error message <MDBFileUpload mainError="Custom message" />
maxFileQuantity number 'Infinity' Allows you to upload specific number of files <MDBFileUpload maxFileQuantity={3} />
maxFileSize Infinity | number | string 'Infinity' Changes allowed file max size <MDBFileUpload maxFileSize="2M" />
maxSizeError string 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size) <MDBFileUpload maxSizeError="Custom message" />
multiple boolean 'false' Allows you to upload more than single file <MDBFileUpload multiple />
previewMsg string 'Drag and drop or click to replace' Changes text of file's preview <MDBFileUpload previewMsg='Custom message' />
removeBtn string 'Remove' Changes text of remove button <MDBFileUpload removeBtn={false} />