The drag and drop feature in uploading files allows you to easily drag your files and upload them in a section provided on the webpage. This feature enables a user to upload multiple files and reduces the number of clicks when uploading files.
You can easily do this using HTML, CSS, and JavaScript.
Drag n Drop File Upload
Steps:
- Create an HTML file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag n Drop</title> <link rel="stylesheet" href="design_dnd.css"> </head> <body> <div class="container"> <h2>Drag & Drop File Upload</h2> <div id="drop_zone" class="drop_zone"> <img src="upload_icon.png" alt="upload" class="upload_ic"> <p>Drag and drop, or click to select files</p> <input type="file" id="fileElem" multiple accept="*/*"> </div> <div id="fileList"> <p>Uploaded Files:</p> </div> </div> <script src="script_dnd.js"></script> </body> </html>
- Create a CSS file.
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #191970; } .container { text-align: center; background-color: white; padding: 20px; border-radius: 16px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 400px; } .drop_zone { border: 2px dashed #007bff; border-radius: 12px; padding: 10px; cursor: pointer; margin-top: 5px; transition: background-color 0.3s; } .drop_zone.dragging { background-color: #e0effd; } #fileElem { display: none; } #fileList { margin-top: 20px; border: 2px solid #007bff; border-radius: 12px; }
- Create a JavaScript file.
document.addEventListener('DOMContentLoaded', () => { const dropZone = document.getElementById('drop_zone'); const fileElem = document.getElementById('fileElem'); const fileList = document.getElementById('fileList'); dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragging'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('dragging'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragging'); const files = e.dataTransfer.files; handleFiles(files); }); dropZone.addEventListener('click', () => { fileElem.click(); }); fileElem.addEventListener('change', () => { const files = fileElem.files; handleFiles(files); }); function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; const listItem = document.createElement('a'); listItem.textContent = file.name; listItem.href = URL.createObjectURL(file); listItem.target = '_blank'; listItem.style.display = 'block'; fileList.appendChild(listItem); } } });
How the code works?
In the HTML file:
- Insert the link for css file.
- In the <body> tag, create a <div> that will serve as a container.
- Inside the tag write the heading and create another <div> for the part to upload file and give it class as drop_zone.
- In the drop_zone, add a text and image for instructions and add an <input> tag to insert files.
- Inside the container make another <div> to display the lsit of uploaded files.
- Add link for script file.
In the JavaScript file:
- Get references to elements:
const dropZone = document.getElementById('drop_zone'); const fileElem = document.getElementById('fileElem'); const fileList = document.getElementById('fileList');
dropZone: You can drag and drop files in this section.
fileElem: input element if drag and drop doesn’t work.
fileList: This container will display a list of selected files. - dragover Event: Ths event is fired when dragged item is over the dropZone. The dragging class highlights the drop zone.
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragging'); });
- dragleave Event: When file leaves the dropZone.
dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('dragging'); });
- drop Event: An item appears in the dropZone triggers this event. Call handleFiles(files) to drop and process the files.
dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragging'); const files = e.dataTransfer.files; handleFiles(files); });
- click Event: Fire this event when the drop zone is clicked, allowing users to select files.
- handleFiles Function: This function creates an anchor element for each file that is uploaded. When we click on the file it opens in a new tab.
function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; const listItem = document.createElement('a') listItem.textContent = file.name; listItem.href = URL.createObjectURL(file); listItem.target = '_blank'; listItem.style.display = 'block'; fileList.appendChild(listItem); } }
Output:
Following link shows working of Drag and Drop File upload.
https://drive.google.com/file/d/1TYTvA-FuDkGIiPBiYuGBDffvzlJqgj0j/view?usp=drive_link
Conclusion:
This is how you can easily create a drag and drop feature to upload files with good functionality and a minimal design, using HTML, CSS , and JavaScript.