File upload

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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

For each input with a data-mdb-file-upload-init attribute you have to add a wrapper with the class file-upload-wrapper.

Drag and drop a file here or click

    Edit in sandbox 
    <div class="file-upload-wrapper">
  <input
    type="file"
    id="input-file-now"
    class="file-upload-input"
    data-mdb-file-upload-init
  />
</div>

    Default message example

    By adding data-mdb-default-msg attribute you can set main message of the file upload.

    custom message

      Edit in sandbox 
      <div id="dnd-custom-default-msg" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-default-msg="custom message"
    data-mdb-file-upload-init
  />
</div>

      Custom height example

      By adding data-mdb-height attribute you can set its custom height.

      Drag and drop a file here or click

        Edit in sandbox 
        <div id="dnd-custom-height" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-height="500"
    data-mdb-file-upload-init
  />
</div>

        Max size

        By adding data-mdb-max-file-size attribute you can set max size of a file.

        Drag and drop a file here or click

          Edit in sandbox 
          <div id="dnd-max-size" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-max-file-size="2M"
    data-mdb-file-upload-init
  />
</div>

          Default file

          By adding data-mdb-default-file attribute you can set default file in the file upload element.

          Drag and drop a file here or click

            89.webp

            Drag and drop or click to replace

            Edit in sandbox 
            <div id="dnd-default-file" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-default-file="https://mdbcdn.b-cdn.net/img/Photos/Others/images/89.webp"
    data-mdb-file-upload-init
  />
</div>

            Disable

            By adding data-mdb-disabled attribute you can disable the component.

            Drag and drop a file here or click

              Edit in sandbox 
              <div id="dnd-disable" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-disabled="disabled"
    data-mdb-file-upload-init
  />
</div>

              Accept formats

              By adding data-mdb-accepted-extensions you can set allowed file types.

              Drag and drop a file here or click

                Edit in sandbox 
                <div id="dnd-accept-formats" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-accepted-extensions="image/*, .pdf"
    data-mdb-file-upload-init
  />
</div>

                Disabled remove button

                By adding data-mdb-disabled-remove-btn attribute you can remove "Remove button".

                Drag and drop a file here or click

                  Edit in sandbox 
                  <div id="dnd-desabled-btn" class="file-upload-wrapper">
  <input
    type="file"
    class="file-upload-input"
    data-mdb-disabled-remove-btn="true"
    data-mdb-file-upload-init
  />
</div>

                  Multiple files

                  By adding data-mdb-multiple attribute you can allow to upload more than single file.

                  Drag and drop a file here or click

                    Edit in sandbox 
                    <div class="file-upload-wrapper">
  <input
    id="dnd-multiple-files"
    type="file"
    class="file-upload-input"
    data-mdb-multiple="true"
    data-mdb-file-upload-init
  />
</div>

                    Multiple with files limit

                    By adding data-mdb-max-file-quantity attribute you can set limit of uploaded files.

                    Drag and drop a file here or click

                      Edit in sandbox 
                      <div class="file-upload-wrapper">
  <input
    id="dnd-multiple-with-file-limit"
    type="file"
    class="file-upload-input"
    data-mdb-multiple="true"
    data-mdb-max-file-quantity="3"
    data-mdb-file-upload-init
  />
</div>

                      File upload - API

                      Import

                      Edit in sandbox 
                      import FileUpload from 'mdb-file-upload';
                      @import '~mdb-file-upload/css/file-upload.min.css';

                      Usage

                      Via data attributes

                      Using the File upload plugin doesn't require any additional JavaScript code - simply add data-mdb-file-upload-init attribute to input tag and use other data attributes to set all options.

                      Edit in sandbox 
                      <div id="dnd" class="file-upload-wrapper">
  <input
    id="file-upload"
    type="file"
    data-mdb-file-upload-init
    class="file-upload-input"
    data-mdb-main-error="Ooops, error here"
    data-mdb-format-error="Bad file format (correct format ~~~)"
  />
</div>

                      Via JavaScript

                      Edit in sandbox 
                      const fileUploadEl = document.querySelector('#file-upload');
const fileUploadInstance = new FileUpload(fileUploadEl);

                      Via jQuery

                      Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

                      Edit in sandbox 
                      $(document).ready(() => {
  $('.example-class').fileUpload();
});

                      Options

                      Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-default-msg="".

                      Name Type Default Description
                      acceptedExtensions Array [] Allows you to set specific file formats
                      defaultFile String | null null Allows you set default file
                      defaultMsg String 'Drag and drop a file here or click' Changes text of default message
                      disabled String | Boolean false Makes file upload disabled
                      disabledRemoveBtn Boolean false Deletes the Remove button from DOM
                      formatError String 'Your file has incorrect file format (correct format(s) ~~~)' Changes text of format's error (add '~~~' to show allowed formats)
                      height Number | null null Changes height of dropzone
                      mainError String 'Ooops, something wrong happended.' Changes text of main error message
                      maxFileQuantity Number Infinity Allows you to upload specific number of files
                      maxFileSize Infinity | Number Infinity Changes allowed file max size
                      maxSizeError String 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size)
                      multiple Boolean false Allows you to upload more than single file
                      previewMsg String 'Drag and drop or click to replace' Changes text of file's preview
                      removeBtn String 'Remove' Changes text of remove button

                      Methods

                      Name Description Example
                      dispose Manually removes a file upload instance. instance.dispose()
                      getInstance Static method which allows you to get the file upload instance associated with a DOM element. FileUpload.getInstance(fileUpload)
                      update Manually update the settings for the file upload plugin. instance.update()
                      reset Manually resets the file upload plugin. instance.reset()
                      Edit in sandbox 
                      const fileUpload = document.getElementById('file-upload');
const fileUploadInstance = FileUpload.getInstance(fileUpload);
fileUploadInstance.update({ multiple: true, });

                      Events

                      Name Description
                      fileError.mdb.fileUpload This event fires immediately when you upload a file with wrong format or wrong size.
                      fileAdd.mdb.fileUpload This event fires immediately when a file has been uploaded in to file upload component.
                      fileRemove.mdb.fileUpload This event fires immediately when a file has been remove from file upload component.
                      Edit in sandbox 
                      const fileUpload = document.getElementById('file-upload');
fileUpload.addEventListener('fileAdd.mdb.fileUpload', (e) => {
  const addedFile = e.files;
});