IMPROVE error handling on frontend

frontend/src/pages/ClipEdit.tsx

@@ -33,18 +33,15 @@ const ClipEdit = () => {
 
         setDownloadable(false);
 
-        const edited = await editFile(id, outputMetadata);
-        const processed = await processFile(id);
+        const edited = await editFile(id, outputMetadata, setError);
 
         if (!edited) {
-            console.log("Failed to edit file");
-            setError("Failed to edit file. Please check the metadata and try again.");
             return;
         }
 
+        const processed = await processFile(id, setError);
+
         if (!processed) {
-            console.log("Failed to process file");
-            setError("Failed to process file. Please try again later.");
             return;
         }
 

frontend/src/pages/ClipUpload.tsx

@@ -8,14 +8,14 @@ const clipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
     const navigate = useNavigate();
 
-    const [noFileError, setNoFileError] = useState(false);
+    const [error, setError] = useState<null | string>(null);
     const press = (() => {
         if (file) {
-            uploadFile(file)
+            uploadFile(file, setError)
                 .then(uuid => navigate(`/create/${uuid}`))
                 .catch(e => console.error(e));
         } else {
-            setNoFileError(true);
+            setError("Please choose a file");
         }
     });
 
@@ -35,9 +35,7 @@ const clipUpload = () => {
                 Upload
             </BlueButton>
 
-            {noFileError &&
-                <label className={"text-center text-red-500"}>Please choose a file</label>
-            }
+            <label className={"text-center text-red-500"}>{error}</label>
         </Box>
     )
 };