Bootstrap 5 drag and drop file upload form example

Utilities Bootstrap 5Free+ CSS+ JS

Add a utility to your UI with Bootstrap 5 drag and drop file upload form example. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.

23.3k views626 downloads5 years ago

gosnippets.com/preview/bootstrap-5-drag-and-drop-file-upload-form-example

Source Code

1<div class="drop-it-hot" id="drop-area">
2  <div class="circle">
3    <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
4      <path d="M0 0h24v24H0z" fill="none"/>
5      <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
6  </svg>
7  </div>
8  <form class="choose-files">
9    <div class="button-wrapper">
10          <label class="label" for="fileElem">Drag image here to upload or</label>
11      <button type="button" class="btn">Choose image</button>
12      <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
13    </div>
14  </form>
15  <div id="gallery"></div>
16</div>
17
18<div class="editor">
19  <div class="range-wrapper">
20    <label for="contrast">Contrast</label>
21    <input class="range" name="contrast" value="100" type="range" min="0" max="200" value="0" data-unit="%">
22  </div>
23  <div class="range-wrapper">
24    <label for="brightness">Brightness</label>
25    <input class="range" name="brightness" value="100" type="range" min="0" max="200" data-unit="%">
26  </div>
27  <div class="range-wrapper">
28    <label for="blur">Hue</label>
29    <input class="range" name="hue-rotate" value="0" type="range" min="0" max="200" data-unit="deg">
30  </div>
31  <div class="range-wrapper">
32    <label for="sepia">Sepia</label>
33    <input class="range" name="sepia" value="0" type="range" min="0" max="200" data-unit="%">
34  </div>
35</div>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="drop-it-hot" id="drop-area"> 2 <div class="circle"> 3 <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 4 <path d="M0 0h24v24H0z" fill="none"/> 5 <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/> 6 </svg> 7 </div> 8 <form class="choose-files"> 9 <div class="button-wrapper"> 10 <label class="label" for="fileElem">Drag image here to upload or</label> 11 <button type="button" class="btn">Choose image</button> 12 <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)"> 13 </div> 14 </form> 15 <div id="gallery"></div> 16</div> 17 18<div class="editor"> 19 <div class="range-wrapper"> 20 <label for="contrast">Contrast</label> 21 <input class="range" name="contrast" value="100" type="range" min="0" max="200" value="0" data-unit="%"> 22 </div> 23 <div class="range-wrapper"> 24 <label for="brightness">Brightness</label> 25 <input class="range" name="brightness" value="100" type="range" min="0" max="200" data-unit="%"> 26 </div> 27 <div class="range-wrapper"> 28 <label for="blur">Hue</label> 29 <input class="range" name="hue-rotate" value="0" type="range" min="0" max="200" data-unit="deg"> 30 </div> 31 <div class="range-wrapper"> 32 <label for="sepia">Sepia</label> 33 <input class="range" name="sepia" value="0" type="range" min="0" max="200" data-unit="%"> 34 </div> 35</div>