fix: file uploader styling refactor

[runningonsideprojects]

Issue:

Fixes #3914

This issue provides the following fixes / features in the file uploader:

• changes the preview image of the file so it is proportional to the file preview container
• implements a cleaner XML error message text display instead of the entire XHR DOM.
• implements an onClick function on the "X" when a file fails to be uploaded that removes the specific file.

Demo:

Video showing the error message formatted properly so its just the text:

Screen.Recording.2026-03-08.at.11.00.13.PM.mov

Video showing the ability to click the "X" icon to remove a file:

Screen.Recording.2026-03-08.at.11.04.02.PM.mov

Changes:

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

[ghost]

HEY @runningonsideprojects OCULD YOU PLEASE GUIDE HOW TO BECOME COLLABORATOR THNAKS LOVE YOUR WOEK

[dpoppe7]

HEY @runningonsideprojects OCULD YOU PLEASE GUIDE HOW TO BECOME COLLABORATOR THNAKS LOVE YOUR WOEK

Hello @Drewcoder789, thank you for your interest in contributing!
Processing foundation has different repositories you can contribute.
The contributor guidelines explain more about the contributing workflow, you can start there.
Each repository may have contributor docs within the files, which will contain detailed information about that specific repo; setting up local development, opening issues/PRs, etc. Here are the contributor docs for p5 web editor.

Hope this helps!

[raclim]

Thanks so much for fixing this, this looks great !!!