Edit these docs Rate these docs

React Drag and drop file upload

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

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.jpg' />
            );
          };

          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.jpg' />
                );
              };
              
              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;
        

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

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.jpg' ... />
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" ... />