add old frontend code back

frontend/src/pages/ClipUpload.tsx

@@ -0,0 +1,43 @@
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import { uploadFile } from "../utils/Endpoints"
+
+const clipUpload = () => {
+    const [file, setFile] = useState<File | null>(null);
+    const navigate = useNavigate();
+
+    const [noFileError, setNoFileError] = useState(false);
+    const press = (() => {
+        if (file) {
+            uploadFile(file)
+                .then(uuid => navigate(`/create/${uuid}`))
+                .catch(e => console.error(e));
+        } else {
+            setNoFileError(true);
+        }
+    });
+
+    return (
+        <div className={"flex flex-col justify-between"}>
+            <input
+                type="file"
+                onChange={(e) => {
+                    const selected = e.target.files?.[0] ?? null;
+                    setFile(selected);
+                }}
+                className={"block w-full cursor-pointer rounded-lg border border-dashed border-gray-400 bg-white p-4 text-center hover:bg-gray-50 transition"}
+            />
+            <button
+                onClick={press}
+                className={"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"}
+            >Upload</button>
+
+            {noFileError &&
+                <label className={"text-center text-red-500"}>Please choose a file</label>
+            }
+
+        </div>
+    )
+};
+
+export default clipUpload;