For this issue, I modified the UserProfile page of the application. Previously, any image that was uploaded by the user was saved as their profile picture. My modifications to the UserProfile page ensures that any profile picture uploaded by the user is converted into a 100x100 image before saving it as the user's avatar. I also created a simple unit test to check if the user's avatar successfully changes.
Why was it changed?
Originally, an error occurred when trying to change the profile picture in the UserProfile page. This would happen because the size of the profile picture being uploaded exceeded the size limit of the server. This would also cause the terminal to display "PayloadTooLargeError: request entity too large." My code aims to fix this problem by resizing the profile picture to be 100x100 before it is saved. This ensures that any profile picture, including large profile pictures, are made small enough that they don't exceed size limits and cause errors. A unit test that changed the user's avatar was added to ensure that updates to the user avatar are possible.
How was it changed?
The first file I modified was UserProfile.js. Within this file, I focused on updating the handleImageChange function. The function first checks if the user has uploaded an image file. A FileReader object then converts the image into a Base64-encoded URL. Next an image object is created and its src attribute is set to the Base64-encoded URL. A 100x100
Screenshots that show the changes (if applicable):
Fixes #30
What was changed?
For this issue, I modified the UserProfile page of the application. Previously, any image that was uploaded by the user was saved as their profile picture. My modifications to the UserProfile page ensures that any profile picture uploaded by the user is converted into a 100x100 image before saving it as the user's avatar. I also created a simple unit test to check if the user's avatar successfully changes.
Why was it changed?
Originally, an error occurred when trying to change the profile picture in the UserProfile page. This would happen because the size of the profile picture being uploaded exceeded the size limit of the server. This would also cause the terminal to display "PayloadTooLargeError: request entity too large." My code aims to fix this problem by resizing the profile picture to be 100x100 before it is saved. This ensures that any profile picture, including large profile pictures, are made small enough that they don't exceed size limits and cause errors. A unit test that changed the user's avatar was added to ensure that updates to the user avatar are possible.
How was it changed?
The first file I modified was UserProfile.js. Within this file, I focused on updating the handleImageChange function. The function first checks if the user has uploaded an image file. A FileReader object then converts the image into a Base64-encoded URL. Next an image object is created and its src attribute is set to the Base64-encoded URL. A 100x100
Screenshots that show the changes (if applicable):