Skip to content
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.

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

fix: Message alerts for image upload using image upload button and url button #4665

Open
wants to merge 3 commits into
base: mealie-next
Choose a base branch
from

Conversation

amishabagri
Copy link

@amishabagri amishabagri commented Dec 3, 2024

What type of PR is this?

bug

What this PR does / why we need it:

This Pull request addresses the issue of issue #4494 where even if the image upload fails no message or alert was displayed.
This also covers the issue related to the URL. If URL of the image is provided, it didn't use to check if the URL is valid or not and consequently did not displayed any message. So through this PR request the following things are covered:

  1. When uploading the image the .file is checked if it is valid or not. If the file ends with .jpg, .jpeg, .png etc, the image file is accepted and is uploaded. After uploading the file the message is also displayed.
  2. If the image extension is not same as the .jpg, .png, etc, then the error message is diplayed for using wrong file extension.
  3. For using the URL,, the URL is checked if it is valid or not using the HTTP codes. If the URL is valid, the image is uploaded and the success message is displayed.
  4. If the URL is not valid, then the error message is displayed.

Before: No messages are displayed

  1. Uploading with a URL
Screenshot 2024-12-03 at 12 54 17 AM
  1. Uploading with Upload Image button
Screenshot 2024-12-03 at 1 08 17 AM

After: Messages are displayed

  1. Uploading when URL is invalid
Screenshot 2024-12-03 at 12 53 19 AM
  1. When URL is valid and image is also changed:
Screenshot 2024-12-03 at 1 03 44 AM
  1. Using valid file extension:
Screenshot 2024-12-03 at 1 09 53 AM
  1. Using invalid file extension:
Screenshot 2024-12-03 at 1 10 02 AM

Which issue(s) this PR fixes:

Fixes #4494

Testing

Since this was changes in UI, I tested with different URLs , valid and invalid to verify if the message is displayed.
I tested with different file extension to make see if there is invalid file extension the message is displayed.

Note:

Please ignore the WakelockSwitch.vue

@amishabagri amishabagri changed the title Message alerts for image upload using image upload button and url button fix:Message alerts for image upload using image upload button and url button Dec 3, 2024
@amishabagri amishabagri changed the title fix:Message alerts for image upload using image upload button and url button fix: Message alerts for image upload using image upload button and url button Dec 3, 2024
Copy link
Collaborator

@Kuchenpirat Kuchenpirat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, thanks for your contribution.

I just had a quick glance at it and this looks mostly good. I just have one thing to add and a few minor code comments for my first feedback round.

The Image button is no longer properly aligned with the settings button. This would need to be updated.

Comment on lines +67 to +68
// Check if the file has an acceptable extension
const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
Copy link
Collaborator

@Kuchenpirat Kuchenpirat Jan 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix indentation

Suggested change
// Check if the file has an acceptable extension
const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
// Check if the file has an acceptable extension
const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];

Comment on lines +67 to +68
// Check if the file has an acceptable extension
const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are missing heic and avif.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] - Missing error message on image upload
3 participants