From 0a5c0dbf49fef4b75a8ea3c4a2a25241ffa726b0 Mon Sep 17 00:00:00 2001
From: ido <ido.pluto@w-on.uk>
Date: Fri, 16 Aug 2024 20:04:45 +0300
Subject: [PATCH] fix(files): parse multi file upload

---
 .../src/pages/multi-file-upload.astro         | 28 +++++++++++++++++++
 .../components-control/form-utils/parse.ts    |  4 +--
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 examples/simple-form/src/pages/multi-file-upload.astro

diff --git a/examples/simple-form/src/pages/multi-file-upload.astro b/examples/simple-form/src/pages/multi-file-upload.astro
new file mode 100644
index 0000000..35bcb9a
--- /dev/null
+++ b/examples/simple-form/src/pages/multi-file-upload.astro
@@ -0,0 +1,28 @@
+---
+import Layout from '../layouts/Layout.astro';
+import {BButton, Bind, BindForm, BInput, FormErrors} from '@astro-utils/forms/forms.js';
+import {Button} from 'reactstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+
+type Form = {
+    files: File[];
+}
+
+const form = Bind<Form>();
+let showSubmitText: string;
+
+function formSubmit() {
+    showSubmitText = `You upload "${form.files.map(file => file.name).join(', ')}"`;
+}
+---
+<Layout title="Upload file">
+    <BindForm bind={form}>
+        <FormErrors/>
+        {showSubmitText}
+
+        <h4>File to upload*</h4>
+        <BInput type="file" name="files" multiple/>
+
+        <BButton as={Button} props={{color: 'success'}} onClick={formSubmit} whenFormOK>Submit</BButton>
+    </BindForm>
+</Layout>
diff --git a/packages/forms/src/components-control/form-utils/parse.ts b/packages/forms/src/components-control/form-utils/parse.ts
index f1e6953..71001ef 100644
--- a/packages/forms/src/components-control/form-utils/parse.ts
+++ b/packages/forms/src/components-control/form-utils/parse.ts
@@ -163,12 +163,12 @@ async function isBigFile(value: string) {
 export async function parseFiles(about: AboutFormName, astro: AstroGlobal, multiple: boolean, readonly: boolean) {
     if (readonly) return;
 
-    const { disposeFiles } = getContext(astro, '@astro-utils/forms');
+    const { disposeFiles, bindId = '' } = getContext(astro, '@astro-utils/forms');
     let values = [about.formValue];
 
     let hasFailed = false;
     if (multiple) {
-        values = about.formValue = await getFormMultiValue(astro.request, about.originalName);
+        values = about.formValue = await getFormMultiValue(astro.request, bindId + about.originalName);
 
         const promises: Promise<any>[] = [];
         for (let i = 0; i < values.length; i++) {