<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Drag and Drop</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.drop-area-container {
text-align: center;
}
.drop-area {
width: 300px;
height: 200px;
border: 2px dashed #ccc;
border-radius: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #888;
font-size: 1.2rem;
margin-bottom: 20px;
}
.drop-area.active {
border-color: #38a169;
color: #38a169;
}
.file-input {
display: none;
}
.file-input-label {
display: inline-block;
padding: 10px 15px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.upload-button {
padding: 10px 20px;
background-color: #38a169;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.file-list {
margin-top: 20px;
text-align: left;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.cancel-button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="drop-area-container">
<div class="drop-area" id="dropArea">
<p>Drag & Drop files here</p>
</div>
<label for="fileInput" class="file-input-label">Select files</label>
<input type="file" id="fileInput" class="file-input" multiple>
<button id="uploadButton" class="upload-button">Upload</button>
<div class="file-list" id="fileList"></div>
</div>
<script>
const dropArea = document.getElementById('dropArea');
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
const fileList = document.getElementById('fileList');
let filesToUpload = []; // Array to store files to upload
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('active');
}
function unhighlight() {
dropArea.classList.remove('active');
}
dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
let dt = e.dataTransfer;
let files = dt.files;
addFilesToUpload(files);
updateFileList();
}
fileInput.addEventListener('change', function(e) {
let files = this.files;
addFilesToUpload(files);
updateFileList();
});
function addFilesToUpload(newFiles) {
filesToUpload = [...filesToUpload, ...newFiles];
}
function updateFileList() {
fileList.innerHTML = ''; // Clear previous file list
filesToUpload.forEach((file, index) => {
const fileSize = getFileSize(file.size);
const listItem = document.createElement('div');
listItem.classList.add('file-item');
listItem.innerHTML = `
<span>${file.name} (${fileSize})</span>
<button class="cancel-button" data-index="${index}">Cancel</button>
`;
fileList.appendChild(listItem);
});
document.querySelectorAll('.cancel-button').forEach(button => {
button.addEventListener('click', removeFile, false);
});
}
function removeFile(e) {
const index = e.target.dataset.index;
filesToUpload.splice(index, 1);
updateFileList();
}
function getFileSize(size) {
if (size === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(size) / Math.log(k));
return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
uploadButton.addEventListener('click', function() {
if (filesToUpload.length > 0) {
// Here you can send filesToUpload to the server or perform other actions
console.log('Uploading files:', filesToUpload);
alert('Files uploaded successfully!');
// Clear the filesToUpload array and update the file list display
filesToUpload = [];
updateFileList();
} else {
alert('Please select files to upload.');
}
});
</script>
</body>
</html>