filemure/public/filemure.js

document.addEventListener("DOMContentLoaded", function () {
    const dropzone = document.querySelector('html');
    const targetContainer = document.querySelector('.dropzone')

    if (targetContainer != null) {
        console.log("target ready")
        const target = targetContainer.dataset.target;

        const progressDialog = document.querySelector('#upload_progress_dialog')
        const progressBar = document.querySelector('#upload_progress')

        dropzone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropzone.classList.add('dragactive');
        });

        dropzone.addEventListener('dragleave', (e) => {
            dropzone.classList.remove('dragactive');
        });

        dropzone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropzone.classList.remove('dragactive');

            // Handle dropped files
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                console.log('Files dropped:', files);

                for (const file of files) {
                    // show progress dialog
                    // warning: this way the progress dialog is shown for each file individually
                    progressDialog.showModal();
                    const formData = new FormData();
                    formData.append('file', file);

                    const xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", (event) => {
                        if (event.lengthComputable) {
                            // console.log("upload progress:", event.loaded / event.total);
                            progressBar.value = 100.0 * event.loaded / event.total;
                        }
                    });
                    xhr.addEventListener("progress", (event) => {
                        if (event.lengthComputable) {
                            // console.log("download progress:", event.loaded / event.total);
                            progressBar.value = event.loaded / event.total;
                        }
                    });
                    xhr.addEventListener("load", (event) => {
                        console.log(xhr.readyState, xhr.status)
                        progressDialog.close();
                        let res = JSON.parse(xhr.response);
                        window.location = res.redirect;
                    });

                    xhr.addEventListener("error", event => {
                        progressDialog.close();
                        alert("An error occurred.")
                    });
                    xhr.addEventListener("abort", event => {
                        progressDialog.close();
                        alert("Upload has been cancelled.")
                    });

                    let url;

                    if (target === "document") url = '/upload?target=document';
                    else if (target === "limbo") url = '/upload?target=limbo';
                    else if (target.matches("document-[a-zA-Z0-9]")) url = '/upload?target=' + target;

                    xhr.open('POST', url, false);
                    xhr.send(formData);
                }
            }
        });
    }
});