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.

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

Jump to bottom

UX Enhancement: Add Graceful Error Handling for Avatar Upload #116

Open
emnul opened this issue Jul 17, 2024 · 7 comments
Open

UX Enhancement: Add Graceful Error Handling for Avatar Upload #116

emnul opened this issue Jul 17, 2024 · 7 comments

Comments

@emnul
Copy link

emnul commented Jul 17, 2024

Uploading an avatar image fails with a 500 error

Untitled.mov
@zicklag
Copy link
Collaborator

zicklag commented Jul 18, 2024

Did you ever get the upload to work? It's working for me right now.

You might get more info about the error in the "Response" tab.

@emnul
Copy link
Author

emnul commented Jul 18, 2024

I tried again and it's still not working unfortunately. The "Response" tab only shows the HTML content of the 500 page. I think this is an autogenerated Svelte thing.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="../favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
	</head>
	<body data-sveltekit-preload-data="hover" data-theme="wintry">
		<div style="display: contents"><!--[--><!--[--><!--[--><!--[--><!--[--><!--[--><h1>500</h1> <p>Internal Error</p><!--]--><!--]!--><!--]--><!--]--><!--]--> <!--[--><!--]!--><!--]-->
			
			<script>
				{
					__sveltekit_ncevv8 = {
						base: new URL("..", location).pathname.slice(0, -1),
						env: {"PUBLIC_DOMAIN":"weird.one","PUBLIC_TRAEFIK_CONFIG_HOST":"traefik.weird.one.internal:3000","PUBLIC_GH_CLIENT_ID":"687341953dddc37da08e","PUBLIC_MEMBERS_TITLE":"Weird Ones","PUBLIC_GH_REDIRECT_URI":"https://weird.one/account/github/","PUBLIC_DICEBEAR_URL":"https://avatars.weird.one","PUBLIC_DICEBEAR_STYLE":"croodles","PUBLIC_INSTANCE_NAME":"Weird.One","PUBLIC_URL":"https://weird.one"}
					};

					const element = document.currentScript.parentElement;

					const data = [null,null];

					Promise.all([
						import("../_app/immutable/entry/start.Bk1C-ru_.js"),
						import("../_app/immutable/entry/app.DWUUuCkP.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 1],
							data,
							form: null,
							error: {message:"Internal Error"},
							status: 500
						});
					});
				}
			</script>
		</div>
	</body>
</html>

@zicklag
Copy link
Collaborator

zicklag commented Jul 18, 2024

Strange. Definitely something to fix. What format and size is the file you are trying to upload?

@emnul
Copy link
Author

emnul commented Jul 18, 2024

Didn't work with the following format / sizes:
JPEG 1.2MB
PNG 1.9 MB

Did actually work with:
WEBP 202KB

Looking at the request headers I did notice this

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7

Which leads me to believe maybe the backend doesn't support .png or .jpg image formats for POST requests to the /account/update path

@zicklag
Copy link
Collaborator

zicklag commented Jul 18, 2024

I just successfully set this image as my avatar, maybe see if that will work for you:

weirdLogo

@emnul
Copy link
Author

emnul commented Jul 18, 2024

I was able to set my avatar if I converted my image to a WEBP file

@kimlimjustin
Copy link
Contributor

I made some updates to the public page regarding avatar uploads (#118), could you please check if this error happens after the PR changes when you are free? Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zicklag @emnul @kimlimjustin