193 lines
5.2 KiB
HTML
193 lines
5.2 KiB
HTML
|
<!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>
|