Limit formats of uploaded images to jpeg/webp/svg (#858)

frontend/src/components/editImages/editImages.tsx

@@ -2,6 +2,7 @@ import { FC, ChangeEvent, useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import { useFieldArray } from "react-hook-form";
 import type { Control } from "react-hook-form";
+import { isApolloError } from "@apollo/client";
 import { faImages } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
@@ -55,8 +56,10 @@ const EditImages: FC<EditImagesProps> = ({
   const [imageData, setImageData] = useState<string>("");
   const [uploading, setUploading] = useState(false);
   const [addImage] = useAddImage();
+  const [error, setError] = useState<string>();
 
   const handleAddImage = () => {
+    setError("");
     setUploading(true);
     addImage({
       variables: {
@@ -72,13 +75,18 @@ const EditImages: FC<EditImagesProps> = ({
           setImageData("");
         }
       })
+      .catch((error: unknown) => {
+        if (error instanceof Error && isApolloError(error))
+          setError(error.message);
+      })
       .finally(() => {
         setUploading(false);
       });
   };
 
   const removeImage = () => {
     setFile(undefined);
+    setError("");
     setImageData("");
   };
 
@@ -137,6 +145,9 @@ const EditImages: FC<EditImagesProps> = ({
             )
           )}
         </div>
+        <Row className="text-end text-danger">
+          <div>{error}</div>
+        </Row>
         <div className="mt-4 d-flex">
           {file && (
             <>

pkg/image/service.go

@@ -81,6 +81,7 @@ func (s *Service) Create(input models.ImageCreateInput) (*models.Image, error) {
 		if _, err = fileReader.Seek(0, 0); err != nil {
 			return nil, err
 		}
+
 		if err := populateImageDimensions(fileReader, &newImage); err != nil {
 			return nil, err
 		}

pkg/image/utils.go

@@ -5,6 +5,7 @@ import (
 	"crypto/md5"
 	"encoding/hex"
 	"errors"
+	"fmt"
 	"image"
 	_ "image/gif"
 	"image/jpeg"
@@ -23,7 +24,7 @@ import (
 var ErrImageZeroSize = errors.New("image has 0px dimension")
 
 func populateImageDimensions(imgReader *bytes.Reader, dest *models.Image) error {
-	img, _, err := image.Decode(imgReader)
+	img, format, err := image.Decode(imgReader)
 	if err != nil {
 		// SVG is not an image so we have to manually check if the image is SVG
 		if _, readerErr := imgReader.Seek(0, 0); readerErr != nil {
@@ -42,6 +43,10 @@ func populateImageDimensions(imgReader *bytes.Reader, dest *models.Image) error
 		return err
 	}
 
+	if format != "jpeg" && format != "webp" {
+		return fmt.Errorf("unsupported image format: %s", format)
+	}
+
 	dest.Width = int64(img.Bounds().Max.X)
 	dest.Height = int64(img.Bounds().Max.Y)