How to use drag n d...
Clear all

How to use drag n drop file upload in bootstrap project?

Mohammad Azad
Posts: 2
Topic starter
New Member
Joined: 6 months ago

This markup doesn’t have anything specifically to do with drag and drop. It’s just a normal, functional <form>, albeit with some extra HTML elements for potential states.


<form class="box" method="post" action="" enctype="multipart/form-data">
  <div class="box__input">
    <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
    <label for="file">Choose a file or drag it here.
    <button class="box__button" type="submit">Upload</button>
  <div class="box__uploading">Uploading…</div>
  <div class="box__success">Done!</div>
  <div class="box__error">Error! <span></span>.

.box__error {
  display: none;