การสร้าง Upload Form ด้วย AJAX และ JavaScript

/**
 * File Upload Handler
 * Handles file upload using Ajax with progress tracking and validation
 */
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validate form
    if (!validateForm()) {
        return;
    }
    
    // Get form elements
    const fileInput = document.getElementById('fileInput');
    const title = document.getElementById('title').value;
    const description = document.getElementById('description').value;
    const category = document.getElementById('category').value;
    const submitBtn = document.getElementById('submitBtn');
    const progressContainer = document.querySelector('.progress-container');
    const progressBar = document.querySelector('.progress');
    const progressText = document.querySelector('.progress-text');
    
    // Create FormData object
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('title', title);
    formData.append('description', description);
    formData.append('category', category);
    
    // Create XMLHttpRequest object
    const xhr = new XMLHttpRequest();
    
    // Show progress container and disable submit button
    progressContainer.style.display = 'block';
    submitBtn.disabled = true;
    
    /**
     * Track upload progress
     * @param {ProgressEvent} e - Progress event object
     */
    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = percentComplete + '%';
            progressText.textContent = percentComplete + '%';
        }
    });
    
    /**
     * Handle successful upload
     * @param {Event} e - Load event object
     */
    xhr.addEventListener('load', function(e) {
        submitBtn.disabled = false;
        if (xhr.status === 200) {
            showMessage('success', 'File uploaded successfully!');
            resetForm();
        } else {
            showMessage('error', 'Upload failed. Status: ' + xhr.status);
        }
        progressContainer.style.display = 'none';
    });
    
    /**
     * Handle upload error
     * @param {Event} e - Error event object
     */
    xhr.addEventListener('error', function(e) {
        submitBtn.disabled = false;
        showMessage('error', 'An error occurred during upload.');
        progressContainer.style.display = 'none';
    });
    
    // Configure and send request
    xhr.open('POST', '/upload.php', true);
    xhr.send(formData);
});

/**
 * Validate form inputs
 * @returns {boolean} - Validation result
 */
function validateForm() {
    const title = document.getElementById('title').value;
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    
    if (!title.trim()) {
        showMessage('error', 'Please enter a title');
        return false;
    }
    
    if (!file) {
        showMessage('error', 'Please select a file');
        return false;
    }
    
    // Check file size (10MB limit)
    if (file.size > 10 * 1024 * 1024) {
        showMessage('error', 'File size must be less than 10MB');
        return false;
    }
    
    return true;
}

/**
 * Show message to user
 * @param {string} type - Message type (success/error)
 * @param {string} message - Message text
 */
function showMessage(type, message) {
    alert(message); // You can replace this with a better UI notification
}

/**
 * Reset form to initial state
 */
function resetForm() {
    document.getElementById('uploadForm').reset();
    document.querySelector('.progress').style.width = '0%';
    document.querySelector('.progress-text').textContent = '0%';
}