Drag and drop file upload

Bootstrap drag and drop file upload plugin

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.

To start working with the drag and drop file upload plugin see the "Getting Started" tab on this page.

Basic example

For each element with a file upload plugin, you have to add a wrapper with the class file-upload-wrapper.

Drag and drop a file here or click

Ooops, something wrong happended.

    Drag and drop or click to replace

    Edit in sandbox 
    <div class="file-upload-wrapper">
  <input type="file" id="input-file-now" class="file-upload" />
</div>
    $('.file-upload').file_upload();

    Default value

    You can add a default value to the plugin

    Drag and drop a file here or click

    Ooops, something wrong happended.

      webp

      89.webp

      Drag and drop or click to replace

      Edit in sandbox 
      <div class="file-upload-wrapper">
  <input type="file" id="input-file-now-custom-1" class="file-upload" data-default-file="https://mdbootstrap.com/img/Photos/Others/images/89.webp" />
</div>
      $('.file-upload').file_upload();

      Custom height

      You can set its height

      Drag and drop a file here or click

      Ooops, something wrong happended.

        Drag and drop or click to replace

        Edit in sandbox 
        <div class="file-upload-wrapper">
   <input type="file" id="input-file-now-custom-2" class="file-upload"
  data-height="500" />
</div>
        $('.file-upload').file_upload();

        Disable

        You can disable its input

        Drag and drop a file here or click

        Ooops, something wrong happended.

          Drag and drop or click to replace

          Edit in sandbox 
          <div class="file-upload-wrapper">
  <input type="file" id="input-file-now-disabled-2" class="file-upload" disabled="disabled" data-default-file="https://mdbootstrap.com/img/Others/documentation/1.webp" />
</div>
          $('.file-upload').file_upload();

          Max size

          You can add a maximum file size

          Drag and drop a file here or click

          Ooops, something wrong happended.

            Drag and drop or click to replace

            Edit in sandbox 
            <div class="file-upload-wrapper">
  <input type="file" id="input-file-max-fs" class="file-upload" data-max-file-size="2M" />
</div>
            $('.file-upload').file_upload();

            Drag and drop file upload - getting started : download & setup

            Download

            This plugin requires a purchase.

            Buy Drag and drop file upload plugin

            Tutorial