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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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;
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://mdbcdn.b-cdn.net/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" ... />
|