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

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

            export default function App() {
              return (
                <MDBFileUpload />
              );
            }

Default message example

By adding defaultMessage property you can set main message of the file upload. 

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

            export default function App() {
              return (
                <MDBFileUpload defaultMessage='custom message' />
              );
            }

Custom height example

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

            export default function App() {
              return (
                <MDBFileUpload style={{ height: '500px' }} />
              );
            }

Max size

By adding maxFileSize property you can set max size of a file.

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

            export default function App() {
              return (
                <MDBFileUpload maxFileSize='2M' />
              );
            }

Disable

By adding disabled property you can disable the component.

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

            export default function App() {
              return (
                <MDBFileUpload disabled />
              );
            }

Accept formats

By adding acceptedExtensions property you can set allowed file types.

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

            export default function App() {
              return (
                <MDBFileUpload acceptedExtensions='image/*' />
              );
            }

Disabled remove button

By adding disabledRemoveButton property you can remove "Remove button". 

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

            export default function App() {
              return (
                <MDBFileUpload disabledRemoveButton />
              );
            }

Multiple files

By adding multiple property you can allow to upload more than single file. 

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

            export default function App() {
              return (
                <MDBFileUpload multiple />
              );
            }

Multiple with files limit

By adding maxFileQuantity property you can set limit of uploaded files. 

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

            export default function App() {
              return (
                <MDBFileUpload multiple maxFileQuantity={3} />
              );
            }

File upload - API

Import

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

Properties

FileUpload

Name Type Default Description Example
acceptedExtensions any [] Allows you to set specific file formats <MDBFileUpload acceptedExtensions="image/*" />
defaultMessage string 'Drag and drop a file here or click' Changes text of default message <MDBFileUpload defaultMessage="Custom message" />
className string '' Adds a 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 (files: File[]) => any - 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 number | string '' 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 />