Back to Snippets

Multi-Video Drag and Drop Upload JS

Allow users to upload multiple video clips at once with this drag and drop zone. It automatically generates playable previews for every file selected, so your users can check their footage before submitting the form.

400

#javascript

#css

#upload

#drag and drop

#video

#preview

#media

#ui

/HTML *CSS ()JS Output Live Updates

.video-uploader {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.drop-zone {
  border: 2px dashed #d1d5db;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}
.drop-zone:hover,
.drop-zone.active {
  border-color: #3b82f6;
  background: #eff6ff;
}
.upload-icon {
  color: #9ca3af;
  margin-bottom: 15px;
}
.drop-zone h3 {
  margin: 0 0 10px 0;
  color: #1f2937;
}
.drop-zone p {
  margin: 0;
  color: #6b7280;
}
.browse-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: underline;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.video-preview {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  background: #000;
  aspect-ratio: 16 / 9;
}

const dropZone = document.getElementById("dropZone");
const fileInput = document.getElementById("fileInput");
const videoGrid = document.getElementById("videoGrid");

// Trigger file input on click
dropZone.addEventListener("click", () => fileInput.click());

// Drag enter/over events
["dragenter", "dragover"].forEach(type => {
  dropZone.addEventListener(type, (e) => {
    e.preventDefault();
    dropZone.classList.add("active");
  });
});

// Drag leave/drop events
["dragleave", "drop"].forEach(type => {
  dropZone.addEventListener(type, (e) => {
    e.preventDefault();
    dropZone.classList.remove("active");
  });
});

// Handle file selection
dropZone.addEventListener("drop", (e) => handleFiles(e.dataTransfer.files));
fileInput.addEventListener("change", (e) => handleFiles(e.target.files));

Multi-Video Drag and Drop Upload JS

Share Code Snippet