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

Drag and drop a file here or click

Show code

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

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

Controlled value

Drag and drop a file here or click

Show code

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

export default function App() {
  const [files, setFiles] = useState([]);

  return (
    <MDBFileUpload
      files={files}
      onChange={(files) => {
        setFiles(files);
      }}
    />
  );
}

Default message example

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

custom message

Show code

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

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

Custom height example

Drag and drop a file here or click

Show code

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.

Drag and drop a file here or click

Show code

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.

Drag and drop a file here or click

Show code

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.

Drag and drop a file here or click

Show code

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

Drag and drop a file here or click

Show code

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.

Drag and drop a file here or click

Show code

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.

Drag and drop a file here or click

Show code

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

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

File upload - API

Import

Show code

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/*" />`
`defaultFile`	string	`''`	Allows to set default file	`<MDBFileUpload defaultFile="https://mdbcdn.b-cdn.net/img/Photos/Others/images/89.webp" />`
`defaultMessage`	string	`'Drag and drop a file here or click'`	Changes text of default message	`<MDBFileUpload defaultMessage="Custom message" />`
`disabled`	boolean	`'false'`	Makes drag and drop disabled	`<MDBFileUpload disabled />`
`disabledRemoveBtn`	boolean	`'false'`	Allows you to disabled remove button	`<MDBFileUpload disabledRemoveBtn />`
`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" />`
`getInputFiles`	(files: File[]) => any	`-`	Returns current uploaded files array	`<MDBFileUpload getInputFiles={(files) => console.log(files)} />`
`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 />`

Events

Name	Type	Description
`onRemove`	() => any	This event fires immediately when the file is removed.
`onChange`	onChange?: (files: File[]) => any	Fires when the uploaded file or files array changes. Returns current uploaded files array
`getInputFiles`	(files: File[]) => any	Returns current uploaded files array