Upload file

Bootstrap 5 Upload file component

Responsive upload file component built with Bootstrap 5. Simplify file uploads and improve user experience with intuitive, responsive design.

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>