React Drag and drop file upload

React drag and drop file upload - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React MDBootstrap File Upload plugin is an extension that allows you to upload files by using drag and drop functionality. Easy to use, setup and customize.

Basic example 

        
            
          import React from 'react';
          import MDBFileupload from 'mdb-react-fileupload';

          const App = () => {
            return (
              <MDBFileupload />
            );
          };

          export default App;

Default value

You can add a default value

        
               
        import React from 'react';
        import MDBFileupload from 'mdb-react-fileupload';

        const App = () => {
          return (
            <MDBFileupload defaultFileSrc='https://mdbootstrap.com/img/Photos/Others/images/89.webp' />
          );
        };

        export default App;

Custom height

You can set the height

        
               
        import React from 'react';
        import MDBFileupload from 'mdb-react-fileupload';

        const App = () => {
          return (
            <MDBFileupload containerHeight={500} />
          );
        };

        export default App;

Combined

You can combine properties

        
              
            import React from "react";
            import MDBFileupload from "mdb-react-fileupload";
            
            const App = () => {
              return (
                <MDBFileupload containerHeight={400} defaultFileSrc='https://mdbootstrap.com/img/Photos/Others/images/89.webp' />
              );
            };
            
            export default App;

Disabled

You can disable the input

        
               
        import React from 'react';
        import MDBFileupload from 'mdb-react-fileupload';

        const App = () => {
          return (
            <MDBFileupload disabled />
          );
        };

        export default App;

Max size

You can add a max file size

        
               
        import React from 'react';
        import MDBFileupload from 'mdb-react-fileupload';

        const App = () => {
          return (
            <MDBFileupload maxFileSize="1M" />
          );
        };

        export default App;

Drag and drop file upload - getting started : download & setup

Download

This plugin requires a purchase.

Buy Drag and drop file upload plugin

React MDBFileupload - API

In this section you will find advanced information about the MDBFileupload component. You will find out which modules are required & what are the possibilities of configuring the component.

MDBFileupload import statement

In order to use MDBFileupload component make sure you have imported proper module first.

        
            
         import MDBFileupload from 'mdb-react-fileupload';
      
        
    
        
            
         "mdbreact": "^4.15.0",
         "react-router-dom": "^5.0.1"

MDBFileupload PropTypes

The table below shows the configuration options of the MDBFileupload component.

Name Type Default Description Example
messageDefault String Drag and drop a file here or click Override default message <MDBFileupload messageDefault="custom message" ... />
messageReplace String Drag and drop or click to replace Override default message <MDBFileupload messageReplace="custom message" ... />
messageRemove String Remove Override default message inside the remove button <MDBFileupload messageRemove="custom message" ... />
messageError String Ooops, something wrong happended. Override default error message <MDBFileupload messageError="custom message" ... />
defaultFileSrc String Set default file on the intput <MDBFileupload defaultFileSrc='https://mdbootstrap.com/img/Photos/Others/images/89.webp' ... />
maxFileSize String 2M Set the max filesize of the uploaded document <MDBFileupload maxFileSize="1M" ... />
minWidth Number Set the min allowed width of the uploaded image <MDBFileupload minWidth={500} ... />
maxWidth Number Set the max allowed width of the uploaded image <MDBFileupload maxWidth={500} ... />
minHeight Number Set the min allowed height of the uploaded image <MDBFileupload minHeight={500} ... />
maxHeight Number Set the max allowed height of the uploaded image <MDBFileupload maxHeight={500} ... />
showRemove Boolean true Hide the remove button <MDBFileupload showRemove={false} ... />
showErrors Boolean true Don't display errors <MDBFileupload showErrors={false} ... />
maxFileSizePreview String 5M Set the max filesize of the previewed image <MDBFileupload maxFileSizePreview='1M' ... />
allowedFormats Array ['portrait', 'square', 'landscape'] Allow/Deny pictures formats. Choose from 'portrait', 'square', 'landscape' <MDBFileupload allowedFormats={['portrait']} ... />
allowedFileExtensions Array ['*'] Allow only some file extensions <MDBFileupload allowedFileExtensions={['jpg', 'png']} ... />
disabled Boolean false Disable the input <MDBFileupload disabled ... />
containerHeight Number 230 Set the height of your MDBFileupload component [px] <MDBFileupload containerHeight={800} ... />
errorFileSize String `The file size is too big (${maxFileSize} max).` Override default error message <MDBFileupload errorFileSize="custom message" ... />
errorFileExtension String `The file is not allowed (${allowedFileExtensions.join(", ")} only).` Override default error message <MDBFileupload errorFileExtension="custom message" ... />
errorImageFormat String `The image format is not allowed (${allowedFormats} only).` Override default error message <MDBFileupload errorImageFormat="custom message" ... />
errorMaxHeight String `The image height is too big (${maxHeight}px max).` Override default error message <MDBFileupload errorMaxHeight="custom message" ... />
errorMinHeight String `The image height is too small (${minHeight}px min).` Override default error message <MDBFileupload errorMinHeight="custom message" ... />
errorMaxWidth String `The image width is too big (${maxWidth}px max).` Override default error message <MDBFileupload errorMaxWidth="custom message" ... />
errorMinWidth String `The image width is too small (${minWidth}px min).` Override default error message <MDBFileupload errorMinWidth="custom message" ... />