Add image display to flight logs

web/app/ui/form/flight-form.tsx

@@ -10,6 +10,7 @@ import {
   Container,
   Fieldset,
   Group,
+  Loader,
   Modal,
   NumberInput,
   ScrollArea,
@@ -34,6 +35,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useApi } from "@/util/api";
 import { useAircraft } from "@/util/hooks";
 import { useEffect, useState } from "react";
+import ImageUpload from "./image-upload";
 
 export default function FlightForm({
   onSubmit,
@@ -101,6 +103,8 @@ export default function FlightForm({
       crew: [],
 
       comments: "",
+
+      images: [],
     },
   });
 
@@ -492,20 +496,22 @@ export default function FlightForm({
                 minRows={4}
                 {...form.getInputProps("comments")}
               />
+              <ImageUpload
+                form={form}
+                field="images"
+                label="Images"
+                placeholder="Upload Images"
+              />
             </Fieldset>
           </Container>
         </ScrollArea.Autosize>
 
         <Group justify="flex-end" mt="md">
           {isPending ? (
-            <Text c="yellow" fw={700}>
-              Loading...
-            </Text>
+            <Loader />
           ) : isError ? (
             <Text c="red" fw={700}>
-              {error instanceof AxiosError
-                ? error.response?.data.detail
-                : error?.message}
+              {error?.message}
             </Text>
           ) : null}
           {withCancelButton ? (

web/app/ui/form/image-upload.tsx

@@ -0,0 +1,51 @@
+import { FlightFormSchema } from "@/util/types";
+import { FileInput, FileInputProps, Pill } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { IconPhoto } from "@tabler/icons-react";
+
+export default function ImageUpload({
+  form,
+  field,
+  label = "",
+  placeholder = "",
+}: {
+  form: UseFormReturnType<
+    FlightFormSchema,
+    (values: FlightFormSchema) => FlightFormSchema
+  >;
+  field: string;
+  label?: string;
+  placeholder?: string;
+}) {
+  const ValueComponent: FileInputProps["valueComponent"] = ({ value }) => {
+    if (value === null) {
+      return null;
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <Pill.Group>
+          {value.map((file) => (
+            <Pill key={randomId()}>{file.name}</Pill>
+          ))}
+        </Pill.Group>
+      );
+    }
+
+    return <Pill>{value.name}</Pill>;
+  };
+
+  return (
+    <FileInput
+      label={label}
+      placeholder={placeholder}
+      multiple
+      accept="image/*"
+      valueComponent={ValueComponent}
+      rightSectionPointerEvents="none"
+      rightSection={<IconPhoto />}
+      {...form.getInputProps(field)}
+    />
+  );
+}