feat: add file validation

backend/src/main.py

@@ -131,7 +131,7 @@ def transcribe() -> Any:
         }
     else:
         tempFile = tempfile.NamedTemporaryFile(
-            dir='./backend/upload-shared-tmp', delete=False)
+            dir='./upload-shared-tmp', delete=False)
 
         # Get the file from the request body and save it to a temporary file
         file = request.data

frontend/src/components/Upload.astro

@@ -29,12 +29,7 @@ const { accentColor } = Astro.props;
     style={`background-color: ${accentColor}`}
     class="file-upload-button"
   >
-    <input
-      id="file-upload"
-      name="file-dropzone-upload"
-      class="sr-only"
-      type="file"
-    />
+    <input required id="file-upload" name="file-upload" class="sr-only" type="file" />
     <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none">
       <path
         stroke="#fff"
@@ -48,6 +43,31 @@ const { accentColor } = Astro.props;
   </label>
 </form>
 
+<script>
+  const allowedFileTypes = ["video/", "audio/", "application/ogg"];
+  const fileInput = document.getElementById("file-upload") as HTMLInputElement;
+
+  fileInput.addEventListener("change", (event: any) => {
+    const file = event.target?.files[0];
+
+    if (!file) {
+      fileInput.setCustomValidity("Please upload a file.");
+      fileInput.reportValidity();
+      return;
+    }
+
+    if (!allowedFileTypes.some((type) => file.type.includes(type))) {
+      fileInput.setCustomValidity(`Please upload a audio/video file. The file you uploaded is of type ${file.type}.`);
+      fileInput.reportValidity();
+      return;
+    }
+
+    fileInput.setCustomValidity("");
+    // TODO: Start the upload process
+    console.log("File accepted:", file.name);
+  });
+</script>
+
 <style>
   .upload-form {
     align-self: flex-start;