Spaces:
Running
Running
| 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'); | |
| } | |
| }); |