Spaces:
Running
Running
File size: 3,999 Bytes
0e052b1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | document.addEventListener('DOMContentLoaded', function() {
const uploadForm = document.getElementById('uploadForm');
const fileInput = document.getElementById('fileInput');
const message = document.getElementById('message');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const fileNameDisplay = document.getElementById('fileName');
const dropArea = uploadForm.querySelector('div[role="dropzone"]') || uploadForm.querySelector('div');
// Handle drag and drop events
['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('drag-active');
}
function unhighlight() {
dropArea.classList.remove('drag-active');
}
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
fileInput.files = files;
updateFileDisplay(files);
}
// Handle file selection via click
fileInput.addEventListener('change', function() {
updateFileDisplay(this.files);
});
function updateFileDisplay(files) {
if (files.length > 0) {
const fileList = Array.from(files).map(file => file.name).join(', ');
message.textContent = `${files.length} file(s) selected: ${fileList}`;
message.classList.remove('hidden');
}
}
// Form submission
uploadForm.addEventListener('submit', function(e) {
e.preventDefault();
const files = fileInput.files;
const category = document.getElementById('category').value;
const description = document.getElementById('description').value;
if (files.length === 0) {
showMessage('Please select at least one file to upload', 'error');
return;
}
// Simulate upload progress
simulateUpload(files, category, description);
});
function simulateUpload(files, category, description) {
progressContainer.classList.remove('hidden');
let uploaded = 0;
Array.from(files).forEach((file, index) => {
fileNameDisplay.textContent = file.name;
// Simulate upload progress for each file
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
uploaded++;
if (uploaded === files.length) {
showMessage(`Successfully uploaded ${files.length} file(s) to ${category} category!`, 'success');
progressContainer.classList.add('hidden');
}
}
progressBar.style.width = `${progress}%`;
}, 100);
});
}
function showMessage(text, type) {
message.textContent = text;
message.className = ''; // Reset classes
message.classList.add('text-center', 'success-message');
if (type === 'success') {
message.classList.add('text-green-600');
} else {
message.classList.add('text-red-600');
}
message.classList.remove('hidden');
}
}); |