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.

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.

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.

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.

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>
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!