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