#Image Upload Handler Try/Catch?

1 messages · Page 1 of 1 (latest)

torn oyster
#

Are we able to try / catch an image upload handler?

Even if I wrap it in try catch, and catch the error, it's not stopping

const uploadHandler = unstable_createMemoryUploadHandler({
        maxPartSize: 5_000_000,
    });
    let formData: FormData;

    try {
        formData = await unstable_parseMultipartFormData(request, uploadHandler);
    } catch (e) {
        console.error(`Failed to parse form data: ${e}`); // <-- this runs
        // but an error is still thrown and we end up in our error boundary
        return { imageUploadError: "File size exceeds limit" };
    }

It will attempt to upload, and only fail when it hits the exceeded number, and the error is still throwing. Any ideas?

#

Even wrapping the entire thing, it still will continue the upload until failure, the catch triggers, but it doesn't prevent the error from being thrown

hybrid stratus
#

I'm also facing the same problem 😐

torn oyster
# 
function imageUpload(event: FormEvent<HTMLFormElement>) {
        const formData = event.currentTarget;
        const image = formData.querySelector("input[type=file]") as HTMLInputElement;
        if (image && image.files) {
            const selectedFile = image.files[0];
            if (selectedFile.size > 5 * 1024 * 1024) {
                return toast.error("Image size must be less than 5MB");
            } else {
                toast.success("Uploading image...");
                fetcher.submit(formData, {
                    encType: "multipart/form-data",
                    method: "post",
                    action: "/actions/upload/image",
                });
            }
        } else {
            toast.error("Something went wrong attempting to find your image.");
        }
    }

This only handled a single image upload, but you should be able to modify it yourself to get what you need @hybrid stratus

#

onChange={(event) => imageUpload(event)} this is in the onChange of my fetcher.Form

#

I found a bug in the image upload handler, that the error being thrown during the chunk parsing of the image, causes a network error to be thrown instead of the actual error from the upload handler. Makes sense, and the only fix I could get to work was returning the error after chunk parsing completed, instead of breaking during the image parsing. Instead of modifying the underlying library, I ended up using this to check on client side before sending to my server side.

hybrid stratus
#

hello, thank you very much

#

just tested and worked just fine 👍

torn oyster
regal stratus
#

Have y’all figured out a way to set up multiple file uploads?