stereo.cat/frontend
2
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

refactor: update file upload handling to support multiple files

Browse source
This commit is contained in:
grngxd 2025-06-10 00:46:04 +01:00
parent c45d8f1e64
commit 39005e75e0
1 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/Controlbar.tsx
View file

@ -10,7 +10,7 @@ export default component$(() => {
const loaded = useNanostore$<boolean>(areFilesLoaded);
const files = useNanostore$<StereoFile[]>(dashboardFiles);
const fileInputRef = useSignal<HTMLInputElement>();
const uploadingFile = useSignal<NoSerialize<File> | undefined>();
const uploadingFiles = useSignal<NoSerialize<File[]> | undefined>();
const now = useSignal(new Date());
useVisibleTask$(() => {
@ -20,18 +20,22 @@ export default component$(() => {
return () => clearInterval(interval);
});
const uploadFile = $(async () => {
if (!uploadingFile.value) {
console.error("No file selected for upload.");
const uploadFiles = $(async () => {
if (!uploadingFiles.value) {
console.error("No file(s) selected for upload.");
return;
}
try {
const unsafe = uploadingFile.value as File;
const name = unsafe.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
const f = new File([unsafe], name, { type: unsafe.type });
const ufiles = uploadingFiles.value as File[];
for (const file of ufiles) {
const name = file.name.replace(/[^a-zA-Z0-9_.-]/g, "_");
const f = new File([file], name, { type: file.type });
await api.upload(f);
}
files.value = await api.list();
} catch (error) {
console.error("Error uploading file:", error);
@ -44,9 +48,10 @@ export default component$(() => {
ref={fileInputRef}
style="display: none;"
onChange$={async (e: Event) => {
uploadingFile.value = noSerialize((e.target as HTMLInputElement).files![0]);
await uploadFile();
uploadingFiles.value = noSerialize(Object.values((e.target as HTMLInputElement).files || {}));
await uploadFiles();
}}
multiple
/>
<div class="flex items-center gap-2">