feat(bigFile): built in component for big files uploads

examples/simple-form/src/middleware.ts

@@ -1,4 +1,12 @@
-import {sequence} from 'astro:middleware';
+import { sequence } from 'astro:middleware';
 import astroForms from '@astro-utils/forms';
 
-export const onRequest = sequence(astroForms());
+export const onRequest = sequence(astroForms({
+    forms: {
+        bigFilesUpload: {
+            bigFileServerOptions: {
+                maxUploadSize: 1024 * 1024 // 1MB
+            }
+        }
+    }
+}));

examples/simple-form/src/pages/button.astro

@@ -13,13 +13,13 @@ function formSubmit() {
 }
 ---
 <Layout title="Welcome to Astro Metro.">
-    <BindForm key='page'>
-        <BindForm key="button">
+    <BindForm>
+        <BindForm>
             <BButton as={Button} props={{color: 'info'}} onClick={formSubmit}>Submit</BButton>
             {showSubmitText}
         </BindForm>
 
-        <BindForm key='text'>
+        <BindForm>
             {showSubmitText}
         </BindForm>
     </BindForm>

examples/simple-form/src/pages/counter.astro

@@ -15,7 +15,7 @@ async function increaseCounter() {
 
 ---
 <Layout title="counter">
-    <BindForm key="page">
+    <BindForm>
         <BButton as={Button} props={{color: 'info'}} onClick={increaseCounter}>++</BButton>
         {session.counter}
     </BindForm>

examples/simple-form/src/pages/default-submit.astro

@@ -12,7 +12,7 @@ function handleSubmit() {
 ---
 
 <Layout title='forms'>
-    <BindForm bind={bind} key="page">
+    <BindForm bind={bind}>
         <p>{message}</p>
         <BInput type='text' name='query' placeholder='Enter text'/>
         <BInput type='text' name='query2' placeholder='Input 2'/>

examples/simple-form/src/pages/forms.astro

@@ -10,7 +10,7 @@ function handleSubmit() {
 ---
 
 <Layout title='forms'>
-    <BindForm bind={bind} key="page">
+    <BindForm bind={bind}>
         <BInput type='date' name='date' value={new Date(2013, 2, 15)} />
         <BInput type='time' name='time' value={new Date(2013, 2, 15)} />
         <BInput type='week' name='week' value={new Date(2013, 2, 15)} />

examples/simple-form/src/pages/index.astro

@@ -31,7 +31,7 @@ function makeBackgroundRed() {
 <Layout title="Form + Session">
     <BButton props={{color: 'info'}} onClick={makeBackgroundRed} extra={1}>Should click</BButton>
 
-    <BindForm bind={form} state={['about']} key="page">
+    <BindForm bind={form} state={['about']}>
         {[1, 2, 3].map(key =>
                 <BButton props={{color: 'info'}} onClick={makeBackgroundRed} state={{counter: key}}>Should click</BButton>
         )}

examples/simple-form/src/pages/multi-forms.astro

@@ -16,22 +16,22 @@ function submit() {
 ---
 
 <Layout title='Multiforms'>
-    <BindForm bind={bind1} key="bind1">
+    <BindForm bind={bind1}>
         <BInput type='int' name='num' />
         <BButton onClick={submit} extra={bind1}>Increase</BButton>
 
-        <BindForm bind={bind2} key="bind2">
+        <BindForm bind={bind2}>
             <BInput type='int' name='num' />
             <BButton onClick={submit} extra={bind2}> Increase </BButton>
         </BindForm>
     </BindForm>
 
-    <BindForm bind={bind3} key="bind3">
+    <BindForm bind={bind3}>
         <BInput type='int' name='num' />
         <BButton onClick={submit} extra={bind3}> Increase </BButton>
     </BindForm>
 
-    <BindForm bind={bind4} key="bind4">
+    <BindForm bind={bind4}>
         <BInput type='int' name='num' />
 
         {

examples/simple-form/src/pages/multi-selects.astro

@@ -11,7 +11,7 @@ const date = new Date('2021-01-01');
 ---
 
 <Layout title='Test Select'>
-    <BindForm bind={bind} key='page'>
+    <BindForm bind={bind}>
         <BSelect name='select' value={['b', 'c']} multiple>
             <BOption value='a'>Option A</BOption>
             <BOption value='b'>Option B</BOption>

examples/simple-form/src/pages/state-check.astro

@@ -14,7 +14,7 @@ function onSubmit() {
 ---
 
 <Layout title='Test Select'>
-    <BindForm bind={bind} key='page'>
+    <BindForm bind={bind}>
         {bind.num?.map((value, index) => <BInput name={`num[${index}]`} placeholder={value} />)}
         <BButton whenFormOK onClick={onSubmit}>Submit</BButton>
     </BindForm>

examples/simple-form/src/pages/state-json-upload.astro

@@ -11,7 +11,7 @@ function onSubmit() {
 ---
 
 <Layout title='Test Select'>
-    <BindForm bind={bind} key='page'>
+    <BindForm bind={bind}>
         <ReactComponent client:only="react"/>
         <BInput type='json' name=`json` />
         <BButton onClick={onSubmit}>Submit</BButton>

examples/simple-form/src/pages/state-lifecycle.astro

@@ -25,7 +25,7 @@ function onSubmit() {
 ---
 
 <Layout title='Test Select'>
-    <BindForm bind={bind} key='page'>
+    <BindForm bind={bind}>
         <BInput name='input' value='test' />
 
         <BButton whenFormOK onClick={onSubmit}>Submit</BButton>

examples/simple-form/src/pages/upload.astro

@@ -19,7 +19,7 @@ function formSubmit() {
 }
 ---
 <Layout title="Upload file">
-    <BindForm bind={form} key='page'>
+    <BindForm bind={form}>
         <FormErrors/>
         {showSubmitText}
 

examples/simple-form/src/pages/uploadBigFileTest.astro

@@ -0,0 +1,33 @@
+---
+import Layout from '../layouts/Layout.astro';
+import {BButton, Bind, BindForm, BInput, FormErrors, UploadBigFile, UploadBigFileProgress} from '@astro-utils/forms/forms.js';
+import {Button} from 'reactstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+import type { BigFile } from '../../../../packages/forms/dist/components/form/UploadBigFile/BigFile.ts';
+
+type Form = {
+    file: BigFile;
+}
+
+const form = Bind<Form>();
+let showSubmitText: string;
+
+function formSubmit() {
+    showSubmitText = `you upload "${form.file.name}"`;
+}
+---
+<Layout title="Upload file">
+    <BindForm bind={form}>
+        <FormErrors/>
+        {showSubmitText}
+
+        <h4>File to upload*</h4>
+
+        <div style="display: flex; flex-direction: column; gap: 10px">
+            <UploadBigFile name='file' required/>
+            <UploadBigFileProgress for='file' />
+        </div>
+
+        <BButton as={Button} props={{color: 'success'}} onClick={formSubmit} whenFormOK>Submit</BButton>
+    </BindForm>
+</Layout>

packages/forms/forms.ts

@@ -7,7 +7,10 @@ import BOption from './dist/components/form/BOption.astro';
 import BSelect from './dist/components/form/BSelect.astro';
 import WebForms from './dist/components/WebForms.astro';
 import Bind, {BindTypes} from './dist/components-control/form-utils/bind-form.js';
-import ThrowOverrideResponse from "./dist/throw-action/override-resposne-throw.js";
+import ThrowOverrideResponse from "./dist/throw-action/throwOverrideResponse.js";
+import UploadBigFile from './dist/components/form/UploadBigFile/UploadBigFile.astro';
+import UploadBigFileProgress from './dist/components/form/UploadBigFile/UploadBigFileProgress.astro';
+import BigFile from './dist/components/form/UploadBigFile/BigFile.js';
 
 export {
     Bind,
@@ -19,6 +22,9 @@ export {
     BOption,
     BSelect,
     WebForms,
+    BigFile,
+    UploadBigFile,
+    UploadBigFileProgress,
     ThrowOverrideResponse
 }
 

packages/forms/package.json

@@ -54,6 +54,7 @@
   "devDependencies": {
     "@types/cookie": "^0.5.1",
     "@types/formidable": "^2.0.5",
+    "@types/fs-extra": "^11.0.4",
     "@types/jsonwebtoken": "^9.0.1",
     "@types/node": "^18.11.10",
     "@types/object-assign-deep": "^0.4.3",
@@ -71,6 +72,7 @@
     "cookie": "^0.5.0",
     "csrf": "^3.1.0",
     "dot-prop": "^8.0.2",
+    "fs-extra": "^11.2.0",
     "jsonwebtoken": "^9.0.0",
     "object-assign-deep": "^0.4.0",
     "snappy": "^7.2.2",