nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor upload array

Browse Source
This commit is contained in:
Ramires Viana 2025-08-02 12:12:01 -03:00
parent 7c713f27fa
commit 9ef68e7f85
7 changed files with 111 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/api/search.ts
View File

@ -13,7 +13,7 @@ export default async function search(base: string, query: string) {
let data = await res.json();
data = data.map((item: UploadItem) => {
data = data.map((item: ResourceItem & { dir: boolean }) => {
item.url = `/files${base}` + url.encodePath(item.path);
if (item.dir) {

49
frontend/src/components/prompts/UploadFiles.vue
View File

@ -1,20 +1,25 @@
<template>
<div
v-if="filesInUploadCount > 0"
v-if="uploadStore.activeUploads.size > 0"
class="upload-files"
v-bind:class="{ closed: !open }"
>
<div class="card floating">
<div class="card-title">
<h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
<h2>
{{
$t("prompts.uploadFiles", { files: uploadStore.activeUploads.size })
}}
</h2>
<div class="upload-info">
<div class="upload-speed">{{ speed.toFixed(2) }} MB/s</div>
<div class="upload-eta">{{ formattedETA }} remaining</div>
<div class="upload-percentage">
{{ getProgressDecimal }}% Completed
{{ uploadStore.getProgressDecimal }}% Completed
</div>
<div class="upload-fraction">
{{ getTotalProgressBytes }} / {{ getTotalSize }}
{{ uploadStore.getTotalProgressBytes }} /
{{ uploadStore.getTotalSize }}
</div>
</div>
<button
@ -40,17 +45,21 @@
<div class="card-content file-icons">
<div
class="file"
v-for="file in filesInUpload"
:key="file.id"
:data-dir="file.isDir"
:data-type="file.type"
:aria-label="file.name"
v-for="upload in uploadStore.activeUploads"
:key="upload.path"
:data-dir="upload.type === 'dir'"
:data-type="upload.type"
:aria-label="upload.name"
>
<div class="file-name">
<i class="material-icons"></i> {{ file.name }}
<i class="material-icons"></i> {{ upload.name }}
</div>
<div class="file-progress">
<div v-bind:style="{ width: file.progress + '%' }"></div>
<div
v-bind:style="{
width: (upload.sentBytes / upload.totalBytes) * 100 + '%',
}"
></div>
</div>
</div>
</div>
@ -76,22 +85,14 @@ const eta = ref<number>(Infinity);
const fileStore = useFileStore();
const uploadStore = useUploadStore();
const {
filesInUpload,
filesInUploadCount,
getProgressDecimal,
getTotalProgressBytes,
getTotalProgress,
getTotalSize,
getTotalBytes,
} = storeToRefs(uploadStore);
const { sentBytes } = storeToRefs(uploadStore);
let lastSpeedUpdate: number = 0;
const recentSpeeds: number[] = [];
const calculateSpeed = (progress: number, oldProgress: number) => {
const calculateSpeed = (sentBytes: number, oldSentBytes: number) => {
const elapsedTime = (Date.now() - (lastSpeedUpdate ?? 0)) / 1000;
const bytesSinceLastUpdate = progress - oldProgress;
const bytesSinceLastUpdate = sentBytes - oldSentBytes;
const currentSpeed = bytesSinceLastUpdate / (1024 * 1024) / elapsedTime;
recentSpeeds.push(currentSpeed);
@ -115,13 +116,13 @@ const calculateEta = () => {
return Infinity;
}
const remainingSize = getTotalBytes.value - getTotalProgress.value;
const remainingSize = uploadStore.totalBytes - uploadStore.sentBytes;
const speedBytesPerSecond = speed.value * 1024 * 1024;
eta.value = remainingSize / speedBytesPerSecond;
};
watch(getTotalProgress, calculateSpeed);
watch(sentBytes, calculateSpeed);
const formattedETA = computed(() => {
if (!eta.value || eta.value === Infinity) {

216
frontend/src/stores/upload.ts
View File

@ -3,7 +3,7 @@ import { useFileStore } from "./file";
import { files as api } from "@/api";
import { throttle } from "lodash-es";
import buttons from "@/utils/buttons";
import { computed, ref } from "vue";
import { computed, inject, ref } from "vue";
// TODO: make this into a user setting
const UPLOADS_LIMIT = 5;
@ -27,162 +27,104 @@ function formatSize(bytes: number): string {
}
export const useUploadStore = defineStore("upload", () => {
const $showError = inject<IToastError>("$showError")!;
//
// STATE
//
const id = ref<number>(0);
const sizes = ref<number[]>([]);
const progress = ref<number[]>([]);
const queue = ref<UploadItem[]>([]);
const uploads = ref<Uploads>({});
const error = ref<Error | null>(null);
const allUploads = ref<Upload[]>([]);
const activeUploads = ref<Set<Upload>>(new Set());
const lastUpload = ref<number>(-1);
const totalBytes = ref<number>(0);
const sentBytes = ref<number>(0);
//
// GETTERS
//
const getProgress = computed(() => {
if (progress.value.length === 0) {
return 0;
}
const totalSize = sizes.value.reduce((a, b) => a + b, 0);
const sum = progress.value.reduce((a, b) => a + b, 0);
return Math.ceil((sum / totalSize) * 100);
return Math.ceil((sentBytes.value / totalBytes.value) * 100);
});
const getProgressDecimal = computed(() => {
if (progress.value.length === 0) {
return 0;
}
const totalSize = sizes.value.reduce((a, b) => a + b, 0);
const sum = progress.value.reduce((a, b) => a + b, 0);
return ((sum / totalSize) * 100).toFixed(2);
return ((sentBytes.value / totalBytes.value) * 100).toFixed(2);
});
const getTotalProgressBytes = computed(() => {
if (progress.value.length === 0 || sizes.value.length === 0) {
return "0 Bytes";
}
const sum = progress.value.reduce((a, b) => a + b, 0);
return formatSize(sum);
});
const getTotalProgress = computed(() => {
return progress.value.reduce((a, b) => a + b, 0);
return formatSize(sentBytes.value);
});
const getTotalSize = computed(() => {
if (sizes.value.length === 0) {
return "0 Bytes";
}
const totalSize = sizes.value.reduce((a, b) => a + b, 0);
return formatSize(totalSize);
});
const getTotalBytes = computed(() => {
return sizes.value.reduce((a, b) => a + b, 0);
});
const filesInUploadCount = computed(() => {
return Object.keys(uploads.value).length + queue.value.length;
});
const filesInUpload = computed(() => {
const files = [];
for (const index in uploads.value) {
const upload = uploads.value[index];
const id = upload.id;
const type = upload.type;
const name = upload.file.name;
const size = sizes.value[id];
const isDir = upload.file.isDir;
const p = isDir ? 100 : Math.ceil((progress.value[id] / size) * 100);
files.push({
id,
name,
progress: p,
type,
isDir,
});
}
return files.sort((a, b) => a.progress - b.progress);
return formatSize(totalBytes.value);
});
//
// ACTIONS
//
const setProgress = ({ id, loaded }: { id: number; loaded: number }) => {
progress.value[id] = loaded;
};
const setError = (err: Error) => {
error.value = err;
};
const reset = () => {
id.value = 0;
sizes.value = [];
progress.value = [];
queue.value = [];
uploads.value = {};
error.value = null;
allUploads.value = [];
activeUploads.value = new Set();
lastUpload.value = -1;
totalBytes.value = 0;
sentBytes.value = 0;
};
const addJob = (item: UploadItem) => {
queue.value.push(item);
sizes.value[id.value] = item.file.size;
id.value++;
const nextUpload = (): Upload => {
lastUpload.value++;
const upload = allUploads.value[lastUpload.value];
activeUploads.value.add(upload);
return upload;
};
const moveJob = () => {
const item = queue.value[0];
queue.value.shift();
uploads.value[item.id] = item;
};
const hasActiveUploads = () => activeUploads.value.size > 0;
const removeJob = (id: number) => {
delete uploads.value[id];
};
const hasPendingUploads = () =>
allUploads.value.length > lastUpload.value + 1;
const upload = (item: UploadItem) => {
const uploadsCount = Object.keys(uploads.value).length;
const isQueueEmpty = queue.value.length == 0;
const isUploadsEmpty = uploadsCount == 0;
if (isQueueEmpty && isUploadsEmpty) {
const upload = (
path: string,
name: string,
file: File | null,
overwrite: boolean,
type: ResourceType
) => {
if (!hasActiveUploads() && !hasPendingUploads()) {
window.addEventListener("beforeunload", beforeUnload);
buttons.loading("upload");
}
addJob(item);
const upload: Upload = {
path,
name,
file,
overwrite,
type,
totalBytes: file?.size ?? 0,
sentBytes: 0,
};
totalBytes.value += upload.totalBytes;
allUploads.value.push(upload);
processUploads();
};
const finishUpload = (item: UploadItem) => {
setProgress({ id: item.id, loaded: item.file.size });
removeJob(item.id);
const finishUpload = (upload: Upload) => {
upload.sentBytes = upload.totalBytes;
upload.file = null;
activeUploads.value.delete(upload);
processUploads();
};
const isActiveUploadsOnLimit = () => activeUploads.value.size < UPLOADS_LIMIT;
const processUploads = async () => {
const uploadsCount = Object.keys(uploads.value).length;
const isBelowLimit = uploadsCount < UPLOADS_LIMIT;
const isQueueEmpty = queue.value.length == 0;
const isUploadsEmpty = uploadsCount == 0;
const isFinished = isQueueEmpty && isUploadsEmpty;
const canProcess = isBelowLimit && !isQueueEmpty;
if (isFinished) {
if (!hasActiveUploads() && !hasPendingUploads()) {
const fileStore = useFileStore();
window.removeEventListener("beforeunload", beforeUnload);
buttons.success("upload");
@ -190,58 +132,48 @@ export const useUploadStore = defineStore("upload", () => {
fileStore.reload = true;
}
if (canProcess) {
const item = queue.value[0];
moveJob();
if (isActiveUploadsOnLimit() && hasPendingUploads()) {
const upload = nextUpload();
if (item.file.isDir) {
await api.post(item.path).catch(setError);
if (upload.type === "dir") {
await api.post(upload.path).catch($showError);
} else {
const onUpload = throttle(
(event: ProgressEvent) =>
setProgress({
id: item.id,
loaded: event.loaded,
}),
(event: ProgressEvent) => {
const delta = event.loaded - upload.sentBytes;
sentBytes.value += delta;
upload.sentBytes = event.loaded;
},
100,
{ leading: true, trailing: false }
);
await api
.post(item.path, item.file.file as File, item.overwrite, onUpload)
.catch(setError);
.post(upload.path, upload.file!, upload.overwrite, onUpload)
.catch($showError);
}
finishUpload(item);
finishUpload(upload);
}
};
return {
// STATE
id,
sizes,
progress,
queue,
uploads,
error,
allUploads,
activeUploads,
lastUpload,
totalBytes,
sentBytes,
// GETTERS
getProgress,
getProgressDecimal,
getTotalProgressBytes,
getTotalProgress,
getTotalSize,
getTotalBytes,
filesInUploadCount,
filesInUpload,
// ACTIONS
setProgress,
setError,
reset,
addJob,
moveJob,
removeJob,
upload,
finishUpload,
processUploads,

1
frontend/src/types/file.d.ts vendored
View File

@ -29,6 +29,7 @@ interface ResourceItem extends ResourceBase {
}
type ResourceType =
| "dir"
| "video"
| "audio"
| "image"

26
frontend/src/types/upload.d.ts vendored
View File

@ -1,22 +1,12 @@
interface Uploads {
[key: number]: Upload;
}
interface Upload {
id: number;
file: UploadEntry;
type?: ResourceType;
}
interface UploadItem {
id: number;
url?: string;
type Upload = {
path: string;
file: UploadEntry;
dir?: boolean;
overwrite?: boolean;
type?: ResourceType;
}
name: string;
file: File | null;
type: ResourceType;
overwrite: boolean;
totalBytes: number;
sentBytes: number;
};
interface UploadEntry {
name: string;

11
frontend/src/utils/upload.ts
View File

@ -132,7 +132,6 @@ export function handleFiles(
layoutStore.closeHovers();
for (const file of files) {
const id = uploadStore.id;
let path = base;
if (file.fullPath !== undefined) {
@ -145,14 +144,8 @@ export function handleFiles(
path += "/";
}
const item: UploadItem = {
id,
path,
file,
overwrite,
...(!file.isDir && { type: detectType((file.file as File).type) }),
};
const type = file.isDir ? "dir" : detectType((file.file as File).type);
uploadStore.upload(item);
uploadStore.upload(path, file.name, file.file ?? null, overwrite, type);
}
}

9
frontend/src/views/Files.vue
View File

@ -26,7 +26,6 @@
import {
computed,
defineAsyncComponent,
inject,
onBeforeUnmount,
onMounted,
onUnmounted,
@ -37,7 +36,6 @@ import { files as api } from "@/api";
import { storeToRefs } from "pinia";
import { useFileStore } from "@/stores/file";
import { useLayoutStore } from "@/stores/layout";
import { useUploadStore } from "@/stores/upload";
import HeaderBar from "@/components/header/HeaderBar.vue";
import Breadcrumbs from "@/components/Breadcrumbs.vue";
@ -51,14 +49,10 @@ import { name } from "../utils/constants";
const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
const Preview = defineAsyncComponent(() => import("@/views/files/Preview.vue"));
const $showError = inject<IToastError>("$showError")!;
const layoutStore = useLayoutStore();
const fileStore = useFileStore();
const uploadStore = useUploadStore();
const { reload } = storeToRefs(fileStore);
const { error: uploadError } = storeToRefs(uploadStore);
const route = useRoute();
@ -111,9 +105,6 @@ watch(route, () => {
watch(reload, (newValue) => {
newValue && fetchData();
});
watch(uploadError, (newValue) => {
newValue && $showError(newValue);
});
// Define functions