Upload error handling

[jean-gui]

Describe the bug Using Uppload 3.2.1 with the default XHR uploader I don't understand how to handle errors. What should the endpoint return so that Uppload understands something went wrong? I've tried returning different HTTP codes (400, 406, 500), but Uppload doesn't display any message and even worse, tries to replace the image defined in the bind property with a dummy URL ending with /undefined, unless the response payload contains {'url': 'foo'} in which case it will replace the bound image with 'foo' (even if the POST did not result in a 200 OK).

I have also tried listening to the "error" and "upload" events, but "error" only seems to be fired if the server is not responding at all, in which case the error message is undefined. On the contrary, the "upload" one is fired even when the response contains an HTTP error code.

To Reproduce I use the following code:

const uploader = new Uppload({
    lang: en,
    bind: document.querySelector("#image-wrapper img.uploadable-image"),
    call: editPic,
    uploader: xhrUploader({
        endpoint: endpoint,
        fileKeyName: 'form[file]'
    }),
    maxWidth: 400,
    compressionToMime: "image/jpeg"
});
uploader.use([
    new Local(),
    new Camera(),
    new URL(),
    new Crop({aspectRatio: ratio})
]);

const errorLogger = (error) => {
    console.log("The error message is", error);
};
uploader.on("error", errorLogger);
const okLogger = (ok) => {
    console.log("The ok message is", ok);
};
uploader.on("upload", okLogger);

Expected behavior If the XHR endpoint returns an HTTP error code, the bound image should not be updated, an error message should be displayed (ideally coming from the response to the POST) and an error event should probably be fired.

Do I need to write my own uploader? It feels like the provided uploaders should handle such errors properly, not being able to send feedback to the user kinda makes them pretty unusable in practice.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Firefox
• Version 87.0

Thanks.

[JhonGdl]

I am trying to handle loading errors as well. @jean-gui You've made it?

[jean-gui]

I don't really remember since that was quite some time ago, but I don't think so. I'm forcing the page to reload after an upload attempt instead, so that I can display errors computed on the endpoint:

const uploader = new Uppload({
    lang: en,
    call: editPic,
    uploader: xhrUploader({
        endpoint: endpoint,
        fileKeyName: 'form[file]',
        responseFunction: () => {
            // Always reload the page regardless of whether the upload succeeded or not
            document.location.reload();
        }
    }),
    ...
});

Hope that helps.