Error when attempting to upload webp as cover

[zorae]

Problem

OL lets you upload webp images, but then fails with "Unable to render this page."

This appears to be a separate issue from #7250

Reproducing the bug

1. On an edition, select 'Manage Covers'
2. Select 'Choose File'
3. From the system image picker, choose a webp image

• Expected behaviour:
  OL either supports upload of webp images, or prevents uploading them in the first place

• Actual behaviour:
  The generic error "Unable to render this page." is displayed in the cover management modal.
  The main page also displays the error message /openlibrary/openlibrary/templates/covers/add.html: error in processing template: AttributeError: 'code' (falling back to default template).

Context

• Browser (Chrome, Safari, Firefox, etc): Safari
• OS (Windows, Mac, etc): iPadOS 18.2
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Breakdown

Requirements Checklist

• [ ]

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[Spaarsh]

@zorae I am unable to replicate this issue. I don't see any webp image (for the developer version as well as on the website) when I try the Choose File option. The html form in add.html#52 has the accept attribute set as follows accept = ".jpg, .jpeg, .gif, .png" So this limits the files visible at the time of choosing to .jpg, .jpeg, .gif and .png formats.

[zorae]

@Spaarsh in that case, the photo picker on iOS/iPadOS 18 seems to implement this incorrectly.

[Spaarsh]

I was not able to find any recent instances of the accept attribute not working on iOS/iPadOS devices. There is this, this and this thread that indicate a history of unexpected behavior with HTML forms. If we can ensure that is a Safari/iOS/iPadOS issue then we can write alternative code that uses onChange handler as shown in the first thread. But even before that, we can write the error handling code so that the user doesn't get to see this error.

[jimchamp]

As pointed out here, Open Library only accepts GIF, JPEG, or PNG image types. However, if an image file fails to pass validation, Unable to render this page should not appear in the upload modal.

PR #10009, when merged, will fix rendering error and display a message when image validation fails:
.

[raissg]

Hello, we are a group of university students, and as part of our project, we are contributing to open-source repositories. We would really like to work on this issue, and since our project deadline is approaching, we are eager to get started as soon as possible. Could we please be assigned to this issue? We’ll make sure to follow all contributing guidelines and complete the work on time. Thank you for considering us!

[jimchamp]

@raissg as mentioned here, the linked pull request will fix this issue.