Merge pull request #21 from NextStepFinalProject/NXD-23

Nxd 23 - Show Error Reason When Uploading An Image

Author: taljacob2

nextstep-backend/src/controllers/resources_controller.ts

@@ -16,7 +16,11 @@ const createUserImageResource = async (req: CustomRequest, res: Response) => {
 
         return res.status(201).send(updatedUser);
     } catch (error) {
-        handleError(error, res);
+        if (error instanceof multer.MulterError || error instanceof TypeError) {
+            return res.status(400).send({ message: error.message });
+        } else {
+            handleError(error, res);
+        }
     }
 };
 
@@ -26,7 +30,7 @@ const createImageResource = async (req: Request, res: Response) => {
         return res.status(201).send(imageFilename);
     } catch (error) {
         if (error instanceof multer.MulterError || error instanceof TypeError) {
-            return res.status(400).send(error.message);
+            return res.status(400).send({ message: error.message });
         } else {
             handleError(error, res);
         }

nextstep-backend/src/openapi/swagger.yaml

@@ -710,14 +710,24 @@ paths:
         '400':
           description: Bad request
           content:
-            text/plain:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    description: Error message indicating the specific issue
+                    example: "File too large"
               examples:
                 fileTooLarge:
-                  value: "File too large"
+                  value:
+                    message: "File too large"
                 invalidFileType:
-                  value: "Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/"
+                  value:
+                    message: "Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/"
                 noFileUploaded:
-                  value: "No file uploaded"
+                  value:
+                    message: "No file uploaded"
         '404':
           description: User not found
         '500':
@@ -751,14 +761,24 @@ paths:
         '400':
           description: Bad request
           content:
-            text/plain:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+                    description: Error message indicating the specific issue
+                    example: "File too large"
               examples:
                 fileTooLarge:
-                  value: "File too large"
+                  value:
+                    message: "File too large"
                 invalidFileType:
-                  value: "Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/"
+                  value:
+                    message: "Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/"
                 noFileUploaded:
-                  value: "No file uploaded"
+                  value:
+                    message: "No file uploaded"
         '500':
           description: Internal server error
 

nextstep-backend/src/tests/resources_images.test.ts

@@ -65,7 +65,7 @@ describe('Resources Service - Upload Image', () => {
             .attach('file', nonImageBlob, 'test-non-image.pdf');
 
         expect(res.statusCode).toBe(400);
-        expect(res.text).toBe("Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/");
+        expect(res.text).toBe(`{"message":"Invalid file type. Only images are allowed: /jpeg|jpg|png|gif/"}`);
     });
 
     it('should fail to upload an image larger than the max size', async () => {
@@ -76,7 +76,7 @@ describe('Resources Service - Upload Image', () => {
             .attach('file', largeImageBlob, 'large-test-image.jpg');
 
         expect(res.statusCode).toBe(400);
-        expect(res.text).toBe("File too large");
+        expect(res.text).toBe(`{"message":"File too large"}`);
     });
 
     afterAll(async () => {

nextstep-frontend/src/pages/Profile.tsx

@@ -75,11 +75,15 @@ const Profile: React.FC = () => {
           setSuccess(false);
           window.location.reload();
         }, 3000);
+      }
+    } catch (err: any) {
+      if (err.response && err.response.status === 400 &&
+        err.response.data && err.response.data &&
+        err.response.data.message) {
+        setError(err.response.data.message);
       } else {
         setError('Error uploading image. Please try again.');
       }
-    } catch (err) {
-      setError('Error uploading image. Please try again.');
     }
   };