HTML Drag and Drop interfaces enable web applications to drag and drop
files on a web page. This document describes how an application can
accept one or more files that are dragged from the underlying platform's
file manager and dropped on a web page.
Why Need Drag and Drop File Upload Feature?
We always want to have a better user experience on the website. Giving the drag and drop file uploader is convenient for users. A lot of popular websites like Facebook and WordPress are already using this technique.
This feature looks better compared to the traditional way of file uploading. It also improves the user experience as the user simply drags the file and it gets uploaded asynchronously.
Our file uploader will have both options. One can upload the file either using drag and drop or through the file input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag-and-Drop Media Upload</title>
<style>
/* Style the drop zone */
#file-drop-zone {
width: 300px;
height: 150px;
border: 2px dashed #ccc;
text-align: center;
padding: 20px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="file-drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)">
Drop media files here.
</div>
<script>
function allowDrop(event) {
event.preventDefault();
// Add a visual indication that it's a valid drop target (e.g., change border color)
event.target.style.border = '2px dashed #007bff';
}
function drop(event) {
event.preventDefault();
event.target.style.border = '2px dashed #ccc'; // Reset the border color
const files = event.dataTransfer.files;
const fileDisplay = document.createElement('ul');
for (let i = 0; i < files.length; i++) {
const file = files[i];
const listItem = document.createElement('li');
listItem.textContent = `${file.name} (${formatBytes(file.size)})`;
fileDisplay.appendChild(listItem);
}
document.body.appendChild(fileDisplay);
}
// Function to format file size in a human-readable format
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
</script>
</body>
</html>
In this code:
- The HTML file contains a file-drop-zone div element where you can drag and drop files.
- The allowDrop function is called when a file is dragged over the drop zone, preventing the default behavior and adding a visual indication that it's a valid drop target.
- The drop function handles the dropped files. It displays the names and sizes of the dropped files in an unordered list.
- There's also a formatBytes function to format file sizes in a human-readable format.
- Remember that this is a simple example. In a real application, you would typically send the uploaded files to a server for storage and implement error handling and security measures.
No comments:
Post a Comment