Skip to content

Nxd 23 - Show Error Reason When Uploading An Image #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
taljacob2 merged 4 commits into from
Jun 2, 2025
Merged

Nxd 23 - Show Error Reason When Uploading An Image #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e0aa6f
Update Image Resource Errors: Surround Error Responses With Message F…
taljacob2 Jun 2, 2025
ea616f0
Update Image Resource 400 Errors In Swagger: Surround Error Responses…
taljacob2 Jun 2, 2025
3ec7a78
Show Image Validation Bad Request Errors In Profile Page
taljacob2 Jun 2, 2025
3ceb6d6
Update Resource Images Tests With New Error Schema
taljacob2 Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions nextstep-backend/src/controllers/resources_controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
};

Expand All @@ -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);
}
Expand Down
36 changes: 28 additions & 8 deletions nextstep-backend/src/openapi/swagger.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions nextstep-backend/src/tests/resources_images.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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 () => {
Expand Down
8 changes: 6 additions & 2 deletions nextstep-frontend/src/pages/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.');
}
};

Expand Down
Loading