Apply hack to display images

.node-version

@@ -1 +1 @@
-v22.13.1
+v22.17.1

app/routes/report.tsx

@@ -9,9 +9,12 @@ import {
   HStack,
   Input,
   Link,
+  Radio,
+  RadioGroup,
   Text,
   Textarea,
   useToast,
+  VStack,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { useLoaderData } from "@remix-run/react";
@@ -31,28 +34,34 @@ export async function loader({
 export function meta() {
   return [
     {
-      title: "Report an Exploiter - Car Crushers",
+      title: "Send a Report - Car Crushers",
     },
     {
       name: "description",
-      content: "Use this page to report a cheater",
+      content: "Use this page to submit a report",
     },
   ];
 }
 
 export default function () {
   const [fileProgress, setFileProgress] = useState(0);
+  const [submissionType, setSubmissionType] = useState("exploiter");
   const [showSuccess, setShowSuccess] = useState(false);
   const toast = useToast();
   const [uploading, setUploading] = useState(false);
   const [loading, setLoading] = useState(false);
   const fileTypes: { [k: string]: string } = {
+    avif: "image/avif",
     gif: "image/gif",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
     m4v: "video/x-m4v",
     mkv: "video/x-matroska",
     mov: "video/mp4",
     mp4: "video/mp4",
+    png: "image/png",
     webm: "video/webm",
+    webp: "image/webp",
     wmv: "video/x-ms-wmv",
   };
 
@@ -132,6 +141,7 @@ export default function () {
       body: JSON.stringify({
         description: description || undefined,
         files: filelist,
+        submissionType,
         turnstileResponse: logged_in ? undefined : turnstileToken,
         usernames,
       }),
@@ -277,6 +287,20 @@ export default function () {
           <Input id="usernames" placeholder="builderman" />
         </FormControl>
         <br />
+        <FormControl isRequired>
+          <FormLabel htmlFor="submissionType">Type of Report</FormLabel>
+          <RadioGroup
+            id="submissionType"
+            onChange={setSubmissionType}
+            value={submissionType}
+          >
+            <VStack spacing={2}>
+              <Radio value="exploit">Exploiter</Radio>
+              <Radio value="abuse">Server Configurator Abuse</Radio>
+            </VStack>
+          </RadioGroup>
+        </FormControl>
+        <br />
         <FormControl isRequired>
           <FormLabel>Your Evidence (Max size per file: 512MB)</FormLabel>
           <Button

components/ReportCard.tsx

@@ -69,7 +69,11 @@ export default function (props: ReportCardProps & { port?: MessagePort }) {
         <div style={{ position: "relative" }}>
           <video controls={true} width="100%">
             <source src={`/api/uploads/${props.attachments[attachmentIdx]}`} />
-            <source src="/files/processing.webm" />
+            <img
+              alt="User submission evidence"
+              src={`/api/uploads/${props.attachments[attachmentIdx]}`}
+              width="100%"
+            />
           </video>
           <HStack
             pos="absolute"

functions/api/reports/submit.ts

@@ -2,8 +2,14 @@ import { jsonError, jsonResponse } from "../../common.js";
 import upload from "../../upload.js";
 
 export async function onRequestPost(context: RequestContext) {
-  const { description, files, senderTokenId, turnstileResponse, usernames } =
-    context.data.body;
+  const {
+    description,
+    files,
+    senderTokenId,
+    submissionType,
+    turnstileResponse,
+    usernames,
+  } = context.data.body;
 
   if (!context.data.current_user) {
     if (typeof turnstileResponse !== "string")
@@ -32,6 +38,9 @@ export async function onRequestPost(context: RequestContext) {
   if (!Array.isArray(usernames))
     return jsonError("Usernames must be type of array", 400);
 
+  if (!["abuse", "exploit"].includes(submissionType))
+    return jsonError("Invalid submission type", 400);
+
   if (
     !["string", "undefined"].includes(typeof description) ||
     description?.length > 512
@@ -131,7 +140,19 @@ export async function onRequestPost(context: RequestContext) {
 
     if (
       fileParts.length < 2 ||
-      !["mkv", "mp4", "wmv", "m4v", "gif", "webm"].includes(fileExten)
+      ![
+        "avif",
+        "gif",
+        "jpeg",
+        "jpg",
+        "m4v",
+        "mkv",
+        "mp4",
+        "png",
+        "webm",
+        "webp",
+        "wmv",
+      ].includes(fileExten)
     )
       return jsonError(
         `File ${file.name} cannot be uploaded as it is unsupported`,
@@ -196,7 +217,7 @@ export async function onRequestPost(context: RequestContext) {
   }
 
   await context.env.D1.prepare(
-    "INSERT INTO reports (attachments, created_at, id, open, target_ids, target_usernames, user) VALUES (?, ?, ?, 1, ?, ?, ?);",
+    "INSERT INTO reports (attachments, created_at, id, open, target_ids, target_usernames, type, user) VALUES (?, ?, ?, 1, ?, ?, ?, ?);",
   )
     .bind(
       JSON.stringify(attachments),
@@ -204,6 +225,7 @@ export async function onRequestPost(context: RequestContext) {
       reportId,
       JSON.stringify(metaIDs),
       JSON.stringify(metaNames),
+      submissionType,
       currentUser ? JSON.stringify(currentUser) : null,
     )
     .run();

functions/upload.ts

@@ -1,12 +1,17 @@
 import { AwsClient } from "aws4fetch";
 
 const contentTypes: { [k: string]: string } = {
+  avif: "image/avif",
   gif: "image/gif",
+  jpeg: "image/jpeg",
+  jpg: "image/jpeg",
   m4v: "video/x-m4v",
   mkv: "video/x-matroska",
   mov: "video/mp4",
   mp4: "video/mp4",
+  png: "image/png",
   webm: "video/webm",
+  webp: "image/webp",
   wmv: "video/x-ms-wmv",
 };