feat: ability to add alt text to images

apps/frontend/src/components/add-image-modal.jsx

@@ -37,41 +37,6 @@ export default function ImageModal({
     setSubmitableImage(event.target.files);
   };
 
-  const submitFileInfo = async (fileId, apiBase) => {
-    const form = new FormData();
-
-    const fileInfo = {
-      alternativeText: currentAlt,
-      caption: currentCaption,
-    };
-
-    form.append("fileInfo", JSON.stringify(fileInfo));
-
-    const updatedFileInfo = await fetch(
-      new URL(`api/upload?id=${fileId}`, apiBase),
-      {
-        method: "post",
-        headers: {
-          Accept: "application/json",
-          Authorization: `Bearer ${user.jwt}`,
-        },
-        body: form,
-      },
-    );
-
-    if (updatedFileInfo.status === 200) {
-      return await updatedFileInfo.json();
-    } else {
-      toast({
-        title: "Error",
-        description: "There was an error uploading your image",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
-    }
-  };
-
   const handleImageSubmit = async (event) => {
     event.preventDefault();
 
@@ -95,14 +60,10 @@ export default function ImageModal({
     if (res.status === 200) {
       const data = await res.json();
 
-      submitFileInfo(data[0].id, apiBase);
-
       editor.commands.setImage({
         src: new URL(data[0].url, apiBase),
         alt: currentAlt,
         title: currentCaption,
-        id: data[0].id,
-        jwt: user.jwt,
         save: handleSubmit,
       });
 

apps/frontend/src/components/tip-tap-extensions/image-extension.jsx

@@ -12,8 +12,8 @@ import {
   Button,
   Input,
   useDisclosure,
-  useToast,
   Spacer,
+  Img,
 } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 
@@ -24,56 +24,19 @@ function UpdateModalAttributes({
   incAlt,
   incCap,
   updateAndRerender,
-  id,
-  jwt,
   save,
 }) {
   const [currentAlt, setCurrentAlt] = useState(incAlt);
   const [currentCaption, setCurrentCaption] = useState(incCap);
 
-  const toast = useToast();
-
-  const apiBase = process.env.NEXT_PUBLIC_STRAPI_BACKEND_URL;
-
   const submitFileInfo = async () => {
-    const form = new FormData();
-
-    const fileInfo = {
-      alternativeText: currentAlt,
-      caption: currentCaption,
-    };
-
-    form.append("fileInfo", JSON.stringify(fileInfo));
+    updateAndRerender({
+      alt: currentAlt,
+      title: currentCaption,
+    });
 
-    const updatedFileInfo = await fetch(
-      new URL(`api/upload?id=${id}`, apiBase),
-      {
-        method: "post",
-        headers: {
-          Accept: "application/json",
-          Authorization: `Bearer ${jwt}`,
-        },
-        body: form,
-      },
-    );
-
-    if (updatedFileInfo.status === 200) {
-      console.log("updated file info");
-      updateAndRerender({
-        alt: currentAlt,
-        title: currentCaption,
-      });
-      save();
-      onClose();
-    } else {
-      toast({
-        title: "Error",
-        description: "There was an error uploading your image",
-        status: "error",
-        duration: 5000,
-        isClosable: true,
-      });
-    }
+    save();
+    onClose();
   };
 
   return (
@@ -139,7 +102,7 @@ function ImageNode(props) {
   return (
     <NodeViewWrapper className={className}>
       <figure onClick={onOpen}>
-        <img src={src} alt={alt} title={title} />
+        <Img src={src} alt={alt} title={title} />
         <figcaption>{title}</figcaption>
       </figure>
       <UpdateModalAttributes
@@ -172,12 +135,6 @@ export default Image.extend({
       title: {
         default: null,
       },
-      id: {
-        default: null,
-      },
-      jwt: {
-        default: null,
-      },
       save: {
         default: null,
       },