diff --git a/src/App/index.tsx b/src/App/index.tsx index b965b23..66e42af 100644 --- a/src/App/index.tsx +++ b/src/App/index.tsx @@ -1,10 +1,11 @@ import React from "react"; import Bookshelf from "../Bookshelf"; +import { UploadForm } from "../UploadForm"; import styles from "./App.module.css"; export const App = () => (
- +
); diff --git a/src/UploadForm/UploadForm.module.css b/src/UploadForm/UploadForm.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/UploadForm/index.tsx b/src/UploadForm/index.tsx new file mode 100644 index 0000000..5e26933 --- /dev/null +++ b/src/UploadForm/index.tsx @@ -0,0 +1,57 @@ +import React, { useState } from "react"; + +const validState = (input: HTMLInputElement) => { + const file = input.files?.[0]; + + if (!file) throw new Error("Book file is required. Please, attach one"); + + if (!file.name.match(/\.(fb2|epub)/)) + throw new Error( + "Wrong file type. Only FB2 and Epub files are supported. \ + If you are trying to upload fb2.zip, please, uncopress it first." + ); + + if (file.size > 100 * 1024 * 1024) + throw new Error( + "File size is too big. Sorry, but parser is served on a rather cheap hosting, \ + so application can't handle such big files." + ); + + return true; +}; + +export const UploadForm = () => { + const [error, setError] = useState(""); + + const handleFileChange = (e: React.ChangeEvent) => { + setError(""); + const fileInput = e.currentTarget; + + try { + validState(fileInput); + } catch (e) { + setError(e.message); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + }; + + return ( +
+
+ + +

{error}

+ +
+
+ ); +};