File size: 3,959 Bytes
0596796 |
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 |
document.addEventListener('DOMContentLoaded', () => {
const uploadArea = document.querySelector('#upload-area');
const fileInput = document.querySelector('#file-input');
const fileList = document.querySelector('#file-list');
const uploadBtn = document.querySelector('#upload-btn');
// Handle drag and drop events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
uploadArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
uploadArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
uploadArea.classList.add('dropzone-hover');
}
function unhighlight() {
uploadArea.classList.remove('dropzone-hover');
}
// Handle dropped files
uploadArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
// Handle selected files
fileInput.addEventListener('change', () => {
handleFiles(fileInput.files);
});
// Process files
function handleFiles(files) {
[...files].forEach(file => {
if(!file) return;
const fileItem = document.createElement('div');
fileItem.className = 'file-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center justify-between mb-2';
fileItem.innerHTML = `
<div class="flex items-center">
<i data-feather="file" class="mr-3 text-indigo-400"></i>
<div>
<p class="font-medium">${file.name}</p>
<p class="text-sm text-gray-500">${formatBytes(file.size)}</p>
</div>
</div>
<button class="delete-btn text-gray-400 hover:text-red-400 transition">
<i data-feather="trash-2"></i>
</button>
`;
fileList.appendChild(fileItem);
feather.replace();
fileItem.querySelector('.delete-btn').addEventListener('click', () => {
fileItem.remove();
});
});
}
// Format file size
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'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
// Upload files
uploadBtn.addEventListener('click', async () => {
if(fileInput.files.length === 0) {
alert('Please select files to upload');
return;
}
uploadBtn.disabled = true;
uploadBtn.innerHTML = '<span class="flex items-center"><i data-feather="loader" class="animate-spin mr-2"></i> Uploading...</span>';
feather.replace();
// Simulate upload with timeout
setTimeout(() => {
uploadBtn.innerHTML = '<i data-feather="check-circle" class="mr-2"></i> Upload Complete!';
feather.replace();
setTimeout(() => {
uploadBtn.disabled = false;
uploadBtn.innerHTML = '<i data-feather="upload" class="mr-2"></i> Upload Files';
fileInput.value = '';
fileList.innerHTML = '';
feather.replace();
}, 2000);
}, 3000);
});
}); |