Theo's Typesafe Cult•13mo ago

UploadThing: Image upload successful, but reaching neither onUploadError nor onUploadSuccess

This used to work for some time, but today it stopped working

UploadThingError: Something went wrong. Please report this to UploadThing.
    at INTERNAL_DO_NOT_USE__fatalClientError (index.js:494:52)
    at __useUploadThingInternal.useEvent[startUpload] (button-client-DpQoAqtf.js:243:119)Caused by: TypeError: Cannot read properties of undefined (reading 'recipeImageId')
    at useRecipeImagesContext.useUploadThing [as onClientUploadComplete] (C:\Users\rolan\WebstormProjects\pomegranate\app\(protected)\(subscription)\me\recipes\_components\RecipeContextV2\useRecipeImagesContext.ts:61:38)
    at __useUploadThingInternal.useEvent[startUpload] (button-client-DpQoAqtf.js:231:221)

UploadThingError: Something went wrong. Please report this to UploadThing.
    at INTERNAL_DO_NOT_USE__fatalClientError (index.js:494:52)
    at __useUploadThingInternal.useEvent[startUpload] (button-client-DpQoAqtf.js:243:119)Caused by: TypeError: Cannot read properties of undefined (reading 'recipeImageId')
    at useRecipeImagesContext.useUploadThing [as onClientUploadComplete] (C:\Users\rolan\WebstormProjects\pomegranate\app\(protected)\(subscription)\me\recipes\_components\RecipeContextV2\useRecipeImagesContext.ts:61:38)
    at __useUploadThingInternal.useEvent[startUpload] (button-client-DpQoAqtf.js:231:221)

message.txt4.55KB

    // uploadthing image upload
    const { startUpload } = useUploadThing("recipeImage", {
        onUploadBegin: () => setDirtyImageOrder(true),
        onUploadError: handleUploadError,
        onClientUploadComplete: (images) => {
            for (const image of images) {
                console.log(image.serverData);
                // serverData is undefined!!!
                imageUploadCompleted(
                    image.serverData.recipeImageId,
                    image.key,
                );

                router.prefetch(buildImageUrl(image.key));
            }
        },
    });

    // uploadthing image upload
    const { startUpload } = useUploadThing("recipeImage", {
        onUploadBegin: () => setDirtyImageOrder(true),
        onUploadError: handleUploadError,
        onClientUploadComplete: (images) => {
            for (const image of images) {
                console.log(image.serverData);
                // serverData is undefined!!!
                imageUploadCompleted(
                    image.serverData.recipeImageId,
                    image.key,
                );

                router.prefetch(buildImageUrl(image.key));
            }
        },
    });

    // Execute upload new images (if recipe is already available, otherwise procrastinate)
    useEffect(() => {
        if (!recipe) {
            return;
        }

        if (!images.filter((image) => image.status === RecipeImageStatus.VALIDATING).length) {
            return;
        }

        for (const image of images) {
            if (
                image.status === RecipeImageStatus.VALIDATING
                && image.file
            ) {
                const handleError = () => {
                    // This is onUploadError
                    notifications.show(t("Failed uploading image."), {
                        key: "failed-recipe-image-upload",
                        severity: "error",
                        // Can auto-close because image is visually marked as errored
                        autoHideDuration: 3000,
                    });

                    setImages((prevState) =>
                        prevState.map((prevImage) => ({
                            ...prevImage,
                            status: prevImage.id === image.id
                                ? RecipeImageStatus.FAILED
                                : image.status,
                        }))
                    );
                };

    // Execute upload new images (if recipe is already available, otherwise procrastinate)
    useEffect(() => {
        if (!recipe) {
            return;
        }

        if (!images.filter((image) => image.status === RecipeImageStatus.VALIDATING).length) {
            return;
        }

        for (const image of images) {
            if (
                image.status === RecipeImageStatus.VALIDATING
                && image.file
            ) {
                const handleError = () => {
                    // This is onUploadError
                    notifications.show(t("Failed uploading image."), {
                        key: "failed-recipe-image-upload",
                        severity: "error",
                        // Can auto-close because image is visually marked as errored
                        autoHideDuration: 3000,
                    });

                    setImages((prevState) =>
                        prevState.map((prevImage) => ({
                            ...prevImage,
                            status: prevImage.id === image.id
                                ? RecipeImageStatus.FAILED
                                : image.status,
                        }))
                    );
                };

                compressImages({
                    images: [image.file],
                    options: {
                        maxSizeMB: 2,
                    },
                }).then((blobs) => {
                    const blob = blobs.shift();
                    if (blob && image.file) {
                        const compressedImage = new File([blob], image.file.name, { type: blob.type });

                        return startUpload([compressedImage], {
                            recipeId: recipe.id,
                            clientImageId: image.id,
                        });
                    }
                }).then((data) => {
                    if (!data) {
                        handleError();
                    }
                }).catch(handleError);
            }
        }

        // Update image status
        setImages((prevState) => prevState.map((image) => ({
            ...image,
            status: image.status === RecipeImageStatus.VALIDATING && image.file
                ? RecipeImageStatus.UPLOADING
                : image.status,
        })));
    }, [recipe, images]);

    // Mark recipeImage as upload completed and assign fileKey
    const imageUploadCompleted = (id: string, fileKey: string) => {
        setImages((prevState) => prevState.map((image) => {
            if (image.id === id) {
                return {
                    ...image,
                    fileKey: fileKey,
                    status: RecipeImageStatus.COMPLETED,
                };
            }

            return image;
        }));
    };

                compressImages({
                    images: [image.file],
                    options: {
                        maxSizeMB: 2,
                    },
                }).then((blobs) => {
                    const blob = blobs.shift();
                    if (blob && image.file) {
                        const compressedImage = new File([blob], image.file.name, { type: blob.type });

                        return startUpload([compressedImage], {
                            recipeId: recipe.id,
                            clientImageId: image.id,
                        });
                    }
                }).then((data) => {
                    if (!data) {
                        handleError();
                    }
                }).catch(handleError);
            }
        }

        // Update image status
        setImages((prevState) => prevState.map((image) => ({
            ...image,
            status: image.status === RecipeImageStatus.VALIDATING && image.file
                ? RecipeImageStatus.UPLOADING
                : image.status,
        })));
    }, [recipe, images]);

    // Mark recipeImage as upload completed and assign fileKey
    const imageUploadCompleted = (id: string, fileKey: string) => {
        setImages((prevState) => prevState.map((image) => {
            if (image.id === id) {
                return {
                    ...image,
                    fileKey: fileKey,
                    status: RecipeImageStatus.COMPLETED,
                };
            }

            return image;
        }));
    };