73 lines
No EOL
2.5 KiB
JavaScript
73 lines
No EOL
2.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
console.log("filemure ready")
|
|
const dropzone = document.querySelector('html');
|
|
|
|
let progressDialog = document.querySelector('#upload_progress_dialog')
|
|
let progressBar = document.querySelector('#upload_progress')
|
|
|
|
// window.addEventListener
|
|
|
|
// Prevent default behavior for drag-over and drop
|
|
dropzone.addEventListener('dragover', (e) => {
|
|
console.log("over")
|
|
e.preventDefault();
|
|
dropzone.classList.add('dragactive');
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', (e) => {
|
|
console.log("out")
|
|
dropzone.classList.remove('dragactive');
|
|
});
|
|
|
|
dropzone.addEventListener('drop', (e) => {
|
|
console.log("drop")
|
|
e.preventDefault();
|
|
dropzone.classList.remove('dragactive');
|
|
|
|
// Handle dropped files
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
console.log('Files dropped:', files);
|
|
|
|
// Process the files
|
|
for (const file of files) {
|
|
progressDialog.showModal();
|
|
console.log('File name:', file.name);
|
|
console.log('File size:', file.size, 'bytes');
|
|
console.log('File type:', file.type);
|
|
|
|
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("loadend", () => {
|
|
console.log(xhr.readyState, xhr.status)
|
|
progressDialog.close();
|
|
});
|
|
|
|
xhr.open('POST', '/upload', false);
|
|
xhr.send(formData);
|
|
|
|
// fetch('/upload', {
|
|
// method: 'POST',
|
|
// body: formData,
|
|
// })
|
|
// .then(response => response.json())
|
|
// .then(data => console.log('Upload successful:', data))
|
|
// .catch(error => console.error('Upload failed:', error));
|
|
}
|
|
}
|
|
});
|
|
}); |