Drag & Drop Image Uploader - HTML Bootstrap JavaScript

Home/Components/Drag & Drop Image Uploader - HTML Bootstrap JavaScript

Code · Live Preview

Componenthtml

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Uploader - Drag, Drop & Paste | CodeKK.Dev</title>

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="page">
      <div class="uploader-wrap">
        <div class="uploader-header">
          <h2>Upload images</h2>
          <p>
            Drag &amp; drop files, click to browse, or paste from your clipboard
          </p>
        </div>

        <div
          class="dropzone"
          id="dropzone"
          tabindex="0"
          role="button"
          aria-label="Upload images"
        >
          <input type="file" id="fileInput" accept="image/*" multiple hidden />

          <svg
            class="dropzone-icon"
            width="40"
            height="40"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 16V4M12 4L7 9M12 4L17 9"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M4 16v2.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V16"
              stroke="currentColor"
              stroke-width="1.6"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>

          <div class="dropzone-text">
            <strong>Drop images here</strong>
            <span>or click to browse &middot; paste with Ctrl/Cmd + V</span>
          </div>

          <div class="dropzone-hint">
            PNG, JPG, GIF, WEBP &middot; up to 10MB each
          </div>
        </div>

        <div class="dropzone-error" id="dropzoneError"></div>

        <div class="preview-toolbar d-none" id="previewToolbar">
          <span id="fileCount">0 images</span>
          <button type="button" class="clear-btn" id="clearAllBtn">
            Clear all
          </button>
        </div>

        <div class="preview-grid" id="previewGrid"></div>
        <!-- <a href="https://codekk.dev/" target="_blank" rel="noopener noreferrer">Codekk</a> -->
      </div>
    </main>

    <script src="script.js"></script>
  </body>
</html>

Detecting libraries...

Component details

Overview, install command, dependencies, and project links.

A drag-and-drop image uploader built with Bootstrap 5 and vanilla JavaScript - no jQuery required. Drop files onto the dropzone, click to browse, or paste directly from the clipboard with Ctrl/Cmd+V. Selected images render instantly as thumbnail cards showing filename and file size, with a hover-to-reveal remove button on each. Includes client-side validation for file type and a 10MB size limit, with an inline error message and a short shake animation on the dropzone for rejected files. A toolbar above the preview grid shows the live file count and a clear-all action once files are added. Gold accent color defined in CSS custom properties for easy re-theming. Sora and Inter fonts from Google Fonts. Three files - index.html, style.css, and script.js - drop in a folder and open in a browser.

Added Sep 9, 2026

Discussion

Feedback, implementation tips, and usage notes.

0 threads

Component details

Discussion

Comments