115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
/**
|
|
* Upload Page JavaScript
|
|
* Handles drag-and-drop file upload and client-side validation
|
|
*/
|
|
|
|
// Get DOM elements
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('videoFile');
|
|
const uploadBtn = document.getElementById('uploadBtn');
|
|
const fileInfo = document.getElementById('fileInfo');
|
|
const fileName = document.getElementById('fileName');
|
|
const fileSize = document.getElementById('fileSize');
|
|
|
|
// Allowed video extensions
|
|
const allowedExts = ['.mp4', '.mov', '.avi', '.mkv', '.webm', '.flv', '.wmv', '.m4v'];
|
|
|
|
// Drag and drop event handlers
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
handleFileSelection(files[0]);
|
|
// Set the file input value
|
|
fileInput.files = files;
|
|
}
|
|
});
|
|
|
|
// File input change handler
|
|
fileInput.addEventListener('change', (e) => {
|
|
if (e.target.files.length > 0) {
|
|
handleFileSelection(e.target.files[0]);
|
|
}
|
|
});
|
|
|
|
// Click on drop zone to trigger file input
|
|
dropZone.addEventListener('click', (e) => {
|
|
// Don't trigger if clicking the label/button
|
|
if (e.target.tagName !== 'LABEL' && e.target.tagName !== 'INPUT') {
|
|
fileInput.click();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Handle file selection and validation
|
|
* @param {File} file - Selected file object
|
|
*/
|
|
function handleFileSelection(file) {
|
|
// Validate file extension
|
|
const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
|
|
|
|
if (!allowedExts.includes(ext)) {
|
|
alert(`Invalid file type: ${ext}\n\nAllowed formats: ${allowedExts.join(', ')}`);
|
|
resetFileSelection();
|
|
return;
|
|
}
|
|
|
|
// Display file info
|
|
fileName.textContent = file.name;
|
|
fileSize.textContent = formatFileSize(file.size);
|
|
fileInfo.classList.remove('hidden');
|
|
|
|
// Enable upload button
|
|
uploadBtn.disabled = false;
|
|
}
|
|
|
|
/**
|
|
* Reset file selection
|
|
*/
|
|
function resetFileSelection() {
|
|
fileInput.value = '';
|
|
fileInfo.classList.add('hidden');
|
|
uploadBtn.disabled = true;
|
|
}
|
|
|
|
/**
|
|
* Format file size for display
|
|
* @param {number} bytes - File size in bytes
|
|
* @returns {string} Formatted file size
|
|
*/
|
|
function formatFileSize(bytes) {
|
|
if (bytes < 1024) {
|
|
return bytes + ' B';
|
|
} else if (bytes < 1024 * 1024) {
|
|
return (bytes / 1024).toFixed(2) + ' KB';
|
|
} else if (bytes < 1024 * 1024 * 1024) {
|
|
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
|
} else {
|
|
return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
|
|
}
|
|
}
|
|
|
|
// Form submission handler
|
|
document.getElementById('uploadForm').addEventListener('submit', (e) => {
|
|
if (fileInput.files.length === 0) {
|
|
e.preventDefault();
|
|
alert('Please select a video file to upload.');
|
|
return false;
|
|
}
|
|
|
|
// Show loading state
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.textContent = 'Uploading...';
|
|
});
|