fix: image (#1069)

Author: seaerchin

apps/studio/src/features/editing-experience/components/form-builder/hooks/useImage.ts

@@ -1,3 +1,5 @@
+import { env } from "~/env.mjs"
+
 const waitFor = (baseTimeoutMs = 500) => {
   return new Promise((resolve) => setTimeout(resolve, baseTimeoutMs))
 }
@@ -37,11 +39,12 @@ export const useImage = ({
   retries = 3,
   baseTimeoutMs = 500,
 }: UseImageProps) => {
+  const assetsBaseUrl = `https://${env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME}`
   const handleImage = async (src: string) => {
     try {
       return await retry(
         async () => {
-          const response = await fetch(src)
+          const response = await fetch(`${assetsBaseUrl}${src}`)
           if (!response.ok) {
             throw new Error(`Unable to read from ${src}`)
           }

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsImageControl.tsx

@@ -1,13 +1,13 @@
 import type { ControlProps, RankedTester } from "@jsonforms/core"
-import { Box, FormControl } from "@chakra-ui/react"
+import { Box, Flex, FormControl, IconButton, Text } from "@chakra-ui/react"
 import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { FormErrorMessage, FormLabel } from "@opengovsg/design-system-react"
+import { BiTrash } from "react-icons/bi"
 import { z } from "zod"
 
 import { FileAttachment } from "~/components/PageEditor/FileAttachment"
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
-import { env } from "~/env.mjs"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { useImage } from "../../hooks/useImage"
 import {
@@ -16,7 +16,6 @@ import {
 } from "./constants"
 import { getCustomErrorMessage } from "./utils"
 
-const assetsBaseUrl = `https://${env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME}`
 export const jsonFormsImageControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.ImageControl,
   and(
@@ -39,24 +38,43 @@ export function JsonFormsImageControl({
   required,
   errors,
   description,
+  data,
 }: JsonFormsImageControlProps) {
   const { siteId } = useQueryParse(editSiteSchema)
   const { handleImage } = useImage({})
 
   return (
     <Box as={FormControl} isRequired={required} isInvalid={!!errors}>
       <FormLabel description={description}>{label}</FormLabel>
-      <FileAttachment
-        maxSizeInBytes={MAX_IMG_FILE_SIZE_BYTES}
-        acceptedFileTypes={IMAGE_UPLOAD_ACCEPTED_MIME_TYPE_MAPPING}
-        siteId={siteId}
-        setHref={(src) =>
-          src &&
-          handleImage(`${assetsBaseUrl}${src}`).then((src) =>
-            handleChange(path, src),
-          )
-        }
-      />
+      {data ? (
+        <Flex
+          px="1rem"
+          py="0.75rem"
+          flexDir="row"
+          background="brand.primary.100"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Text overflow="auto">{data.split("/").pop()}</Text>
+          <IconButton
+            size="xs"
+            variant="clear"
+            colorScheme="critical"
+            aria-label="Remove file"
+            icon={<BiTrash />}
+            onClick={() => handleChange(path, undefined)}
+          />
+        </Flex>
+      ) : (
+        <FileAttachment
+          maxSizeInBytes={MAX_IMG_FILE_SIZE_BYTES}
+          acceptedFileTypes={IMAGE_UPLOAD_ACCEPTED_MIME_TYPE_MAPPING}
+          siteId={siteId}
+          setHref={(src) =>
+            src && handleImage(src).then((src) => handleChange(path, src))
+          }
+        />
+      )}
       {!!errors && (
         <FormErrorMessage>
           {label} {getCustomErrorMessage(errors)}