Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-30 12:16:07 +01:00
Code Issues Projects Releases Wiki Activity

feature (upload): canary - upload design

Browse source
This commit is contained in:
MickaelK 2024-12-04 13:07:17 +11:00
parent 50b99a005c
commit ddb1e6fd53
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/assets/pages/filespage/ctrl_upload.css
View file

@ -83,12 +83,14 @@
}
.component_upload .stats_content .file_row .file_path {
flex: 1;
padding: 3px 3px 3px 0;
padding: 0px 3px 0px 0;
line-height: 25px;
}
.component_upload .stats_content .file_row .file_path .speed {
font-size: 0.7rem;
opacity: 0.7;
padding-left: 5px;
line-height: 0.7rem;
}
.component_upload .stats_content .file_row .file_path .speed:not(:empty):before {
content: "(";
@ -98,20 +100,27 @@
}
.component_upload .stats_content .file_row .file_state {
width: 50px;
padding: 3px 0;
line-height: 25px;
text-align: right;
padding-right: 3px;
}
.component_upload .stats_content .file_row .file_control {
width: 25px;
display: flex;
justify-content: end;
align-items: center;
margin-left: -2px;
margin-right: -2px;
}
.component_upload .stats_content .file_row .file_control img {
display: none;
cursor: pointer;
height: 24px;
width: 24px;
height: 22px;
width: 22px;
}
.component_upload .stats_content .file_row:hover .file_control img {
display: inherit;
padding-top: 1px;
padding-top: 3px;
}
/***********************/

13
public/assets/pages/filespage/ctrl_upload.js
View file

@ -59,7 +59,7 @@ function componentUploadFAB(render, { workers$ }) {
effect(rxjs.fromEvent(qs($page, `input[type="file"]`), "change").pipe(
rxjs.tap(async(e) => {
workers$.next({ loading: true });
workers$.next(await processFiles(e.target.files))
workers$.next(await processFiles(e.target.files));
}),
));
render($page);
@ -78,6 +78,7 @@ function componentFilezone(render, { workers$ }) {
$target.classList.remove("dropzone");
e.preventDefault();
workers$.next({ loading: true });
if (e.dataTransfer.items instanceof window.DataTransferItemList) {
workers$.next(await processItems(e.dataTransfer.items));
} else if (e.dataTransfer.files instanceof window.FileList) {
@ -171,7 +172,7 @@ function componentUploadQueue(render, { workers$ }) {
// feature3: process tasks
const ICON = {
STOP: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDM4NCA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggc3R5bGU9ImZpbGw6ICM2MjY0Njk7IiBkPSJNMCAxMjhDMCA5Mi43IDI4LjcgNjQgNjQgNjRIMzIwYzM1LjMgMCA2NCAyOC43IDY0IDY0VjM4NGMwIDM1LjMtMjguNyA2NC02NCA2NEg2NGMtMzUuMyAwLTY0LTI4LjctNjQtNjRWMTI4eiIgLz4KPC9zdmc+Cg==",
RETRY: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMTcuNjUgNi4zNUMxNi4yIDQuOSAxNC4yMSA0IDEyIDRjLTQuNDIgMC03Ljk5IDMuNTgtNy45OSA4czMuNTcgOCA3Ljk5IDhjMy43MyAwIDYuODQtMi41NSA3LjczLTZoLTIuMDhjLS44MiAyLjMzLTMuMDQgNC01LjY1IDQtMy4zMSAwLTYtMi42OS02LTZzMi42OS02IDYtNmMxLjY2IDAgMy4xNC42OSA0LjIyIDEuNzhMMTMgMTFoN1Y0bC0yLjM1IDIuMzV6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==",
RETRY: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBzdHlsZT0iZmlsbDogIzYyNjQ2OTsiIGQ9Ik0xNy42NSA2LjM1QzE2LjIgNC45IDE0LjIxIDQgMTIgNGMtNC40MiAwLTcuOTkgMy41OC03Ljk5IDhzMy41NyA4IDcuOTkgOGMzLjczIDAgNi44NC0yLjU1IDcuNzMtNmgtMi4wOGMtLjgyIDIuMzMtMy4wNCA0LTUuNjUgNC0zLjMxIDAtNi0yLjY5LTYtNnMyLjY5LTYgNi02YzEuNjYgMCAzLjE0LjY5IDQuMjIgMS43OEwxMyAxMWg3VjRsLTIuMzUgMi4zNXoiLz48L3N2Zz4K",
};
const $iconStop = createElement(`<img class="component_icon" draggable="false" src="${ICON.STOP}" alt="stop" title="${t("Aborted")}">`);
const $iconRetry = createElement(`<img class="component_icon" draggable="false" src="${ICON.RETRY}" alt="retry">`);
@ -340,7 +341,7 @@ function workerImplFile({ progress, speed }) {
const numberOfChunks = Math.ceil(file.size / chunkSize);
const headersNoCache = {
"Cache-Control": "no-store",
"Pragma": "no-cache",
"Pragma": "no-cache"
};
// Case1: basic upload
@ -371,7 +372,7 @@ function workerImplFile({ progress, speed }) {
...headersNoCache,
},
body: null,
progress: (n) => progress(n),
progress: (n) => progress(0),
speed,
});
const url = resp.headers.location;
@ -577,7 +578,7 @@ async function processFiles(filelist) {
default:
assert.fail(`NOT_SUPPORTED type="${type}"`);
}
task = assert.truthy(task);
task.virtual.before();
tasks.push(task);
}
return { tasks, size };
@ -661,7 +662,7 @@ function formatPercent(number) {
function formatSize(bytes, si = true) {
const thresh = si ? 1000 : 1024;
if (Math.abs(bytes) < thresh) {
return bytes.toFixed(1) + "B/s";
return bytes.toFixed(1) + "B";
}
const units = si
? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]