Upload files with Drag and Drop

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.

Drag n Drop File Upload

Steps:

How the code works?

Output:

Conclusion:

Related Posts

Leave a Comment Cancel Reply