Live Code Editor

Try it yourself..

Drag & Drop File Upload using Custom Html , Css and JavaScript

The title "Drag & Drop File Upload Using Custom HTML, CSS, and JavaScript" suggests a tutorial or guide for implementing a drag-and-drop file upload feature. The tutorial will most likely involve creating a custom user interface with HTML for structure, CSS for styling, and JavaScript for drag-and-drop interactions and file uploads. It is a hands-on approach that allows users to visually drag files from their file system and drop them into a designated upload area. The tutorial would go over the code and techniques required to create this custom drag-and-drop file upload functionality without the use of pre-built libraries or frameworks.

HTML

CSS

JavaScript

const fileInputs = document.querySelectorAll('.file-upload-input');
 const dropzones = document.querySelectorAll('.dragdropzone');

// Attach event listeners to each file input element
 fileInputs.forEach((fileInput, index) => {
     fileInput.addEventListener('change', (event) => {
         const selectedFile = event.target.files[0];
         displayImageInDropzone(dropzones[index], selectedFile, index); // Pass the index
     });
 });

// Attach event listeners to each dropzone element
 dropzones.forEach((dropzone, index) => {
     dropzone.addEventListener('click', () => {
         fileInputs[index].click();
     });

dropzone.addEventListener('dragover', (e) => {
         e.preventDefault();
         dropzone.classList.add('dragover');
     });

dropzone.addEventListener('dragleave', () => {
         dropzone.classList.remove('dragover');
     });

dropzone.addEventListener('drop', (e) => {
         e.preventDefault();
         dropzone.classList.remove('dragover');
         const droppedFile = e.dataTransfer.files[0];
         fileInputs[index].files = e.dataTransfer.files;
         displayImageInDropzone(dropzone, droppedFile, index); // Pass the index
     });
 });

// Function to display the selected file in the dropzone
 function displayImageInDropzone(dropzone, file, index) {
     // Remove any previously displayed files
     const filesToRemove = Array.from(dropzone.querySelectorAll('.file-preview'));
     filesToRemove.forEach((fileElement) => {
         dropzone.removeChild(fileElement);
     });

if (file) {
         // Hide the content when a file is selected
         const dropzoneInner = dropzone.querySelector('.dropzone-inner');
         dropzoneInner.style.display = 'none';

// Create a container for the selected file
         const fileContainer = document.createElement('div');
         fileContainer.className = 'file-preview';

// Display the selected file based on its type (e.g., image, PDF)
         const fileExtension = file.name.split('.').pop().toLowerCase();
         console.log(fileExtension)
         if (fileExtension.match(/(jpg|jpeg|png|gif)$/)) {
             // Display images
             const imageElement = document.createElement('img');
             imageElement.src = URL.createObjectURL(file);
             imageElement.style.maxWidth = '100%';
             imageElement.style.maxHeight = '100%';
             imageElement.style.height = '250px';
             fileContainer.appendChild(imageElement);
         } else if (fileExtension === 'pdf') {
             // Display PDF files
             const embedElement = document.createElement('embed');
             embedElement.src = URL.createObjectURL(file);
             embedElement.type = 'application/pdf';
             embedElement.style.width = '100%';
             embedElement.style.height = '100%';
             fileContainer.appendChild(embedElement);
         } else if (fileExtension === 'doc' || fileExtension === 'docx') {
             // Display DOC/DOCX files
             const googleDocsViewerLink = document.createElement('a');
             googleDocsViewerLink.href =
                 `https://docs.google.com/viewer?url=${encodeURIComponent(URL.createObjectURL(file))}`;
             googleDocsViewerLink.target = '_blank';

// Add Font Awesome icon
             const iconElement = document.createElement('i');
             iconElement.className = 'fas fa-file-word fs-2'; // Assuming 'fas' is the Font Awesome style class

googleDocsViewerLink.appendChild(iconElement);
             fileContainer.appendChild(googleDocsViewerLink);
         } else {
             // Handle other file types by displaying their names
             const fileNameElement = document.createElement('div');
             fileNameElement.textContent = file.name;
             fileContainer.appendChild(fileNameElement);
         }

// Add a remove icon with "Remove" text
         const removeIcon = document.createElement('div');
         removeIcon.innerHTML = 'Remove';
         removeIcon.className = 'remove-icon';
         removeIcon.style.cursor = 'pointer';
         removeIcon.addEventListener('click', () => {
             fileInputs[index].value = '';
             dropzone.removeChild(fileContainer);

// Show the content when the file is removed
             dropzoneInner.style.display = 'block';
         });

// Append the file container and remove icon to the dropzone
         fileContainer.appendChild(removeIcon);
         dropzone.appendChild(fileContainer);
     } else {
         // Show the content when no file is selected
         const dropzoneInner = dropzone.querySelector('.dropzone-inner');
         dropzoneInner.style.display = 'block';
     }
 }

Live Code Editor

Drag & Drop File Upload using Custom Html , Css and JavaScript

HTML

CSS

JavaScript

Output