UX Enhancement: Add Graceful Error Handling for Avatar Upload

emnul commented 4 months ago

Uploading an avatar image fails with a 500 error

https://github.com/user-attachments/assets/40fdada2-81c5-45ed-a902-26b1c9b5207f

zicklag commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

emnul commented 4 months ago

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 commented 4 months ago

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

weirdLogo

emnul commented 4 months ago

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

kimlimjustin commented 4 months ago

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!

muni-town / weird

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