How to use drag n d...
 
Notifications
Clear all

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


Mohammad Azad
Posts: 2
Topic starter
(@mohammad)
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>
  <div class="box__uploading">Uploading…</div>
  <div class="box__success">Done!</div>
  <div class="box__error">Error! <span></span>.
</form>

.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}
Share: