update,

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main.problem/components/complete.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @next/next/no-html-link-for-pages */
+import * as React from "react";
+import Link from "next/link";
+
+export interface CompleteProps {
+  message: string;
+  nextPageUri: string;
+}
+
+export const Complete: React.VFC<CompleteProps> = (props) => {
+  return (
+    <div>
+      <h1>Completed</h1>
+      <div>
+        <h2>The following information has been received</h2>
+        <div>
+          <p>Message</p>
+          <pre>{props.message}</pre>
+        </div>
+        <div>
+          <Link href={props.nextPageUri}>To Next</Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Complete;

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main.problem/components/form copy.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Link from "next/link";
+
+export interface FormProps {
+  formTitle: string;
+  message: string;
+  _token: string;
+  actinoUrl: string;
+  readOnly: boolean;
+  submitMessage: string;
+}
+
+export const Form: React.VFC<FormProps> = (props) => {
+  return (
+    <div>
+      <h1>{props.formTitle}</h1>
+      <form action={props.actinoUrl} method="post">
+        <p>
+          <label htmlFor="message">Message</label>
+          <input readOnly={props.readOnly} id="message" name="message" type="text" defaultValue={props.message} />
+          <input name="_token" type="hidden" value={props._token} />
+          <p>
+            <label htmlFor="file">File</label>
+            <input id="file" type="file" name="file" />
+          </p>
+        </p>
+        <p>
+          <input type="submit" value={props.submitMessage} />
+        </p>
+      </form>
+      <Link href="/">To Top</Link>
+    </div>
+  );
+};
+
+export default Form;

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main.problem/components/form.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import Link from "next/link";
+
+export interface FormProps {
+  formTitle: string;
+  message: string;
+  _token: string;
+  actinoUrl: string;
+  readOnly: boolean;
+  submitMessage: string;
+  fileContent?: any;
+}
+
+export const Form: React.VFC<FormProps> = (props) => {
+  const [file, setFile] = React.useState<Blob | null>(null);
+
+  const onChange = (e: any) => {
+    if (e.target.files?.length) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div>
+      <h1>{props.formTitle}</h1>
+      <form action={props.actinoUrl} method="post" encType="multipart/form-data">
+        <p>
+          <label htmlFor="message">Message</label>
+          <input readOnly={props.readOnly} id="message" name="message" type="text" defaultValue={props.message} />
+          <input name="_token" type="hidden" value={props._token} />
+          <p>
+            <label htmlFor="file">File</label>
+            <input id="file" type="file" name="file" onChange={onChange} />
+          </p>
+        </p>
+        {file && (
+          <p>
+            <input type="hidden" name="fileContent" value={URL.createObjectURL(file)} />
+          </p>
+        )}
+        <p>
+          <input type="submit" value={props.submitMessage} />
+        </p>
+      </form>
+      <Link href="/">To Top</Link>
+    </div>
+  );
+};
+
+export default Form;