Support clipboard upload on home page
Add shortcuts for all the buttons Add abuse reporter page Fix user buckets page Add a-ads advertisement
This commit is contained in:
@@ -1,178 +1,181 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher();
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
export let bucket_id;
|
||||
export let target_dir;
|
||||
export let bucket_id;
|
||||
export let target_dir;
|
||||
|
||||
let upload_jobs = [];
|
||||
let upload_threads = 0;
|
||||
let max_upload_threads = 3;
|
||||
let upload_jobs = [];
|
||||
let upload_threads = 0;
|
||||
let max_upload_threads = 3;
|
||||
|
||||
// Adds files to the upload queue. The file_list parameter needs to be of type
|
||||
// FileList. Upload will also create the necessary directories to place nested
|
||||
// files in.
|
||||
export const upload = (file_list) => {
|
||||
for (let i = 0; i < file_list.length; i++) {
|
||||
upload_jobs.push({
|
||||
file: file_list[i],
|
||||
progress: 0,
|
||||
target_dir: target_dir.valueOf(),
|
||||
uploading: false,
|
||||
finished: false,
|
||||
tries: 0,
|
||||
});
|
||||
// Adds files to the upload queue. The file_list parameter needs to be of type
|
||||
// FileList. Upload will also create the necessary directories to place nested
|
||||
// files in.
|
||||
export const upload = (file_list) => {
|
||||
console.log(file_list)
|
||||
|
||||
for (let i = 0; i < file_list.length; i++) {
|
||||
upload_jobs.push({
|
||||
file: file_list[i],
|
||||
progress: 0,
|
||||
target_dir: target_dir.valueOf(),
|
||||
uploading: false,
|
||||
finished: false,
|
||||
tries: 0,
|
||||
});
|
||||
}
|
||||
|
||||
// This updates the UI
|
||||
upload_jobs = upload_jobs;
|
||||
|
||||
while (upload_threads < max_upload_threads) {
|
||||
upload_threads++;
|
||||
setTimeout(upload_file, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const uploads_finished = () => {
|
||||
dispatch("finished");
|
||||
};
|
||||
|
||||
const upload_file = () => {
|
||||
let job = null;
|
||||
for (let i = 0; i < upload_jobs.length; i++) {
|
||||
// If a file is done we remove it from the array
|
||||
if (upload_jobs[i].progress >= 1) {
|
||||
upload_jobs.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
// This updates the UI
|
||||
upload_jobs = upload_jobs;
|
||||
|
||||
while (upload_threads < max_upload_threads) {
|
||||
upload_threads++;
|
||||
setTimeout(upload_file, 1);
|
||||
if (
|
||||
upload_jobs[i].uploading === false &&
|
||||
upload_jobs[i].finished === false
|
||||
) {
|
||||
job = upload_jobs[i];
|
||||
job.uploading = true;
|
||||
upload_jobs = upload_jobs;
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
if (job === null) {
|
||||
upload_threads--;
|
||||
|
||||
const uploads_finished = () => {
|
||||
dispatch("finished");
|
||||
};
|
||||
|
||||
const upload_file = () => {
|
||||
let job = null;
|
||||
for (let i = 0; i < upload_jobs.length; i++) {
|
||||
// If a file is done we remove it from the array
|
||||
if (upload_jobs[i].progress >= 1) {
|
||||
upload_jobs.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (
|
||||
upload_jobs[i].uploading === false &&
|
||||
upload_jobs[i].finished === false
|
||||
) {
|
||||
job = upload_jobs[i];
|
||||
job.uploading = true;
|
||||
upload_jobs = upload_jobs;
|
||||
break;
|
||||
}
|
||||
if (upload_threads === 0) {
|
||||
uploads_finished();
|
||||
}
|
||||
if (job === null) {
|
||||
upload_threads--;
|
||||
return;
|
||||
}
|
||||
|
||||
if (upload_threads === 0) {
|
||||
uploads_finished();
|
||||
}
|
||||
console.log(job);
|
||||
|
||||
let form = new FormData();
|
||||
form.append("type", "file");
|
||||
form.append("file", job.file);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open(
|
||||
"POST",
|
||||
"/api/filesystem/" +
|
||||
bucket_id +
|
||||
encodeURIComponent(job.target_dir + "/" + job.file.name),
|
||||
true
|
||||
);
|
||||
xhr.timeout = 21600000; // 6 hours, to account for slow connections
|
||||
|
||||
// Report progress updates back to the caller
|
||||
xhr.upload.addEventListener("progress", (evt) => {
|
||||
if (evt.lengthComputable) {
|
||||
job.progress = evt.loaded / evt.total;
|
||||
upload_jobs = upload_jobs;
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
// readystate 4 means the upload is done
|
||||
if (xhr.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(job);
|
||||
if (xhr.status >= 100 && xhr.status < 400) {
|
||||
// Request is a success
|
||||
|
||||
let form = new FormData();
|
||||
form.append("type", "file");
|
||||
form.append("file", job.file);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open(
|
||||
"POST",
|
||||
"/api/filesystem/" +
|
||||
bucket_id +
|
||||
encodeURIComponent(job.target_dir + "/" + job.file.name),
|
||||
true
|
||||
);
|
||||
xhr.timeout = 21600000; // 6 hours, to account for slow connections
|
||||
|
||||
// Report progress updates back to the caller
|
||||
xhr.upload.addEventListener("progress", (evt) => {
|
||||
if (evt.lengthComputable) {
|
||||
job.progress = evt.loaded / evt.total;
|
||||
upload_jobs = upload_jobs;
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
// readystate 4 means the upload is done
|
||||
if (xhr.readyState !== 4) {
|
||||
// Finish the upload job
|
||||
job.uploading = false;
|
||||
job.finished = true;
|
||||
upload_file();
|
||||
} else if (xhr.status >= 400) {
|
||||
// Request failed
|
||||
console.log(
|
||||
"Upload error. status: " +
|
||||
xhr.status +
|
||||
" response: " +
|
||||
xhr.response
|
||||
);
|
||||
let resp = JSON.parse(xhr.response);
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
return;
|
||||
}
|
||||
|
||||
if (xhr.status >= 100 && xhr.status < 400) {
|
||||
// Request is a success
|
||||
|
||||
// Finish the upload job
|
||||
job.uploading = false;
|
||||
job.finished = true;
|
||||
upload_file();
|
||||
} else if (xhr.status >= 400) {
|
||||
// Request failed
|
||||
console.log(
|
||||
"Upload error. status: " +
|
||||
xhr.status +
|
||||
" response: " +
|
||||
xhr.response
|
||||
);
|
||||
let resp = JSON.parse(xhr.response);
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
return;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
}
|
||||
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
} else {
|
||||
// Request did not arrive
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
alert("upload failed " + xhr.responseText);
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
}
|
||||
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
// Try again
|
||||
job.tries++;
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
}
|
||||
|
||||
upload_jobs = upload_jobs;
|
||||
};
|
||||
xhr.send(form);
|
||||
};
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
} else {
|
||||
// Request did not arrive
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
alert("upload failed " + xhr.responseText);
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
}
|
||||
|
||||
// File input dialog handling
|
||||
let file_input;
|
||||
export const picker = () => {
|
||||
file_input.click();
|
||||
};
|
||||
const file_input_change = (e) => {
|
||||
upload(e.target.files);
|
||||
file_input.nodeValue = "";
|
||||
};
|
||||
|
||||
// Drag and drop upload
|
||||
let hidden = true;
|
||||
const dragover = (e) => {
|
||||
hidden = false;
|
||||
};
|
||||
const dragleave = (e) => {
|
||||
hidden = true;
|
||||
};
|
||||
const drop = (e) => {
|
||||
hidden = true;
|
||||
upload(e.dataTransfer.files);
|
||||
};
|
||||
const paste = (e) => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log(e.clipboardData.files[0].getAsFile());
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
}
|
||||
|
||||
upload_jobs = upload_jobs;
|
||||
};
|
||||
xhr.send(form);
|
||||
};
|
||||
|
||||
// File input dialog handling
|
||||
let file_input;
|
||||
export const picker = () => {
|
||||
file_input.click();
|
||||
};
|
||||
const file_input_change = (e) => {
|
||||
upload(e.target.files);
|
||||
file_input.nodeValue = "";
|
||||
};
|
||||
|
||||
// Drag and drop upload
|
||||
let hidden = true;
|
||||
const dragover = (e) => {
|
||||
hidden = false;
|
||||
};
|
||||
const dragleave = (e) => {
|
||||
hidden = true;
|
||||
};
|
||||
const drop = (e) => {
|
||||
hidden = true;
|
||||
upload(e.dataTransfer.files);
|
||||
};
|
||||
const paste = (e) => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log(e.clipboardData.files[0]);
|
||||
upload(e.clipboardData.files)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user