Bootstrap 5 drag and drop file upload form example

Loading…

Bootstrap 5 drag and drop file upload form example | GoSnippets

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>

Bootstrap 5 drag and drop file upload form example

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery