Merge pull request #4 from thinkAmi-sandbox/feature/day5

add day5 examples

src/components/pages/day5/MultipleFileUpload.tsx

@@ -0,0 +1,36 @@
+import {RJSFSchema} from "@rjsf/utils";
+import Form from "@rjsf/mui";  // MUI version
+import validator from "@rjsf/validator-ajv8";
+
+export const MultipleFileUpload = () => {
+  const schema: RJSFSchema = {
+    title: "Multiple File Upload",
+    type: "object",
+    required: [],
+    properties: {
+      multipleFile: {
+        type: "array",
+        items: {
+          type: "string",
+          format: "data-url"
+        }
+      }
+    }
+  }
+
+  // onSubmitの引数の説明は以下
+  // https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/form-props#onsubmit
+  const onSubmit = async ({formData}, _event) => {
+    console.log(formData)
+  }
+
+  return (
+    <div style={{width: "400px"}}>
+      <Form
+        schema={schema}
+        validator={validator}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}

src/components/pages/day5/SingleFileUpload.tsx

@@ -0,0 +1,59 @@
+import {RJSFSchema} from "@rjsf/utils";
+import Form from "@rjsf/mui";  // MUI version
+import validator from "@rjsf/validator-ajv8";
+import {useState} from "react";
+
+export const SingleFileUpload = () => {
+  const [data, setData] = useState("")
+
+  const schema: RJSFSchema = {
+    title: "Single File Upload",
+    type: "object",
+    required: [],
+    properties: {
+      singleFile: {
+        type: "string",
+        format: "data-url",
+      }
+    }
+  }
+
+  // onSubmitの引数の説明は以下
+  // https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/form-props#onsubmit
+  const onSubmit = async ({formData}, _event) => {
+    console.log(formData)
+
+    const singleFile = formData.singleFile
+    console.log(singleFile)
+
+    setData(singleFile)
+
+    const data = await dataUrlToBytes(singleFile)
+    console.log(data)
+  }
+
+  const dataUrlToBytes = async (dataUrl) => {
+    // ファイルの中身を取り出す
+    // https://developer.mozilla.org/en-US/docs/Glossary/Base64
+    const r = await fetch(dataUrl)
+    const a = new Uint8Array(await r.arrayBuffer())
+    return new TextDecoder().decode(a)
+  }
+
+  const getFileName = (data: string) => {
+    return data.split(";")[1].replace("name=", "")
+  }
+
+  return (
+    <div style={{width: "400px"}}>
+      {data && (<div><iframe src={data} /></div>)}
+      {data && (<div><a href={data} download={getFileName(data)}>ダウンロードリンク</a></div>)}
+
+      <Form
+        schema={schema}
+        validator={validator}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}

src/main.tsx

@@ -13,6 +13,8 @@ import {RequiredFieldByIf} from "./components/pages/day3/ifThenElse/RequiredFiel
 import {DependentSchemas} from "./components/pages/day3/dependencies/DependentSchemas";
 import {InnerDefinition} from "./components/pages/day4/InnerDefinition";
 import {ImportJsonSchema} from "./components/pages/day4/ImportJsonSchema";
+import {SingleFileUpload} from "./components/pages/day5/SingleFileUpload";
+import {MultipleFileUpload} from "./components/pages/day5/MultipleFileUpload";
 
 const router = createBrowserRouter([
   {
@@ -90,6 +92,19 @@ const router = createBrowserRouter([
             element: <ImportJsonSchema />
           }
         ]
+      },
+      {
+        path: "day5/",
+        children: [
+          {
+            path: "single_file_upload",
+            element: <SingleFileUpload />
+          },
+          {
+            path: "multiple_file_upload",
+            element: <MultipleFileUpload />
+          }
+        ]
       }
     ]
   }