Flask-Files/app/static/js/quick-upload.js

/**
 * Quick upload functionality for instant file uploads
 */
document.addEventListener('DOMContentLoaded', function () {
    // Elements
    const globalDropzone = document.getElementById('global-dropzone');
    const uploadToast = document.getElementById('upload-toast');
    const uploadProgressBar = document.getElementById('upload-toast-progress-bar');
    const uploadPercentage = document.getElementById('upload-toast-percentage');
    const uploadFileName = document.getElementById('upload-toast-file');
    const uploadToastClose = document.getElementById('upload-toast-close');

    // Get current folder ID from URL or data attribute
    function getCurrentFolderId() {
        // Check if we're on a folder page
        const urlParams = new URLSearchParams(window.location.search);
        const folderIdFromUrl = urlParams.get('folder_id');

        // Check for a data attribute on the page
        const folderElement = document.querySelector('[data-current-folder-id]');
        const folderIdFromData = folderElement ? folderElement.dataset.currentFolderId : null;

        return folderIdFromUrl || folderIdFromData || null;
    }

    // Show global dropzone when files are dragged over the window
    window.addEventListener('dragover', function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Only show dropzone if user is on dashboard or files page
        const onRelevantPage = window.location.pathname.includes('/dashboard') ||
            window.location.pathname.includes('/files');

        if (onRelevantPage) {
            globalDropzone.classList.add('active');
        }
    });

    // Hide dropzone when dragging leaves window
    window.addEventListener('dragleave', function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Only hide if leaving the window (not entering child elements)
        if (e.clientX <= 0 || e.clientY <= 0 ||
            e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
            globalDropzone.classList.remove('active');
        }
    });

    // Handle drop event for quick upload
    window.addEventListener('drop', function (e) {
        e.preventDefault();
        e.stopPropagation();

        // Hide the dropzone
        globalDropzone.classList.remove('active');

        // Make sure files were dropped
        if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) {
            return;
        }

        // Show upload progress toast
        uploadToast.classList.add('active');

        // Get the current folder ID (null for root)
        const currentFolderId = getCurrentFolderId();

        // Upload the files
        uploadFiles(e.dataTransfer.files, currentFolderId);
    });

    // Close upload toast
    if (uploadToastClose) {
        uploadToastClose.addEventListener('click', function () {
            uploadToast.classList.remove('active');
        });
    }

    // Quick upload function
    function uploadFiles(files, folderId) {
        // Create FormData object
        const formData = new FormData();

        // Add folder ID if provided
        if (folderId) {
            formData.append('parent_folder_id', folderId);
        }

        // Add all files
        for (let i = 0; i < files.length; i++) {
            formData.append('files[]', files[i]);
        }

        // Create XHR request
        const xhr = new XMLHttpRequest();

        // Update progress
        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                uploadProgressBar.style.width = percent + '%';
                uploadPercentage.textContent = percent + '%';

                if (files.length === 1) {
                    uploadFileName.textContent = files[0].name;
                } else {
                    uploadFileName.textContent = `Uploading ${files.length} files...`;
                }
            }
        });

        // Handle completion
        xhr.addEventListener('load', function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // Success - upload complete
                uploadProgressBar.style.width = '100%';
                uploadPercentage.textContent = '100%';
                uploadFileName.textContent = 'Upload Complete!';

                // Show success alert
                if (typeof showAlert === 'function') {
                    showAlert('Files uploaded successfully!', 'success');
                }

                // Reload page after brief delay to show new files
                setTimeout(function () {
                    window.location.reload();
                }, 1000);
            } else {
                // Error
                let errorMessage = 'Upload failed';

                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.error) {
                        errorMessage = response.error;
                    }
                } catch (e) {
                    // Ignore parsing error
                }

                uploadFileName.textContent = errorMessage;

                if (typeof showAlert === 'function') {
                    showAlert(errorMessage, 'error');
                }
            }

            // Hide toast after delay
            setTimeout(function () {
                uploadToast.classList.remove('active');

                // Reset progress
                setTimeout(function () {
                    uploadProgressBar.style.width = '0%';
                    uploadPercentage.textContent = '0%';
                    uploadFileName.textContent = 'Processing...';
                }, 300);
            }, 3000);
        });

        // Handle errors
        xhr.addEventListener('error', function () {
            uploadFileName.textContent = 'Network error occurred';

            if (typeof showAlert === 'function') {
                showAlert('Network error occurred', 'error');
            }

            // Hide toast after delay
            setTimeout(function () {
                uploadToast.classList.remove('active');
            }, 3000);
        });

        // Set up and send the request
        xhr.open('POST', '/files/upload_xhr', true);
        xhr.send(formData);
    }
});