Infinite loading is seen for HEIC files

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.1-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #68727
Email or phone of affected tester (no customers): applausetester+en@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Macbook Pro 2023 / Sequoia 15.2
App Component: Chat Report View

Action Performed:

1. Access staging.new.expensify.com and sign into a valid account
2. Go to any chat
3. Send a HEIC file

Expected Result:

HEIC file is uploaded and displays correctly

Actual Result:

User sees infinite loading

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[aadil42]

hmm. not reproducible.

Screen.Recording.2025-09-04.at.12.mp4

[Eskalifer1]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Infinite loading is seen for HEIC files

What is the root cause of that problem?

We don't have any error handling during file loading, which may cause an error and result in the loader being displayed indefinitely.

Here is the relevant part of the code:

App/src/hooks/useFilesValidation.tsx

Lines 177 to 265 in 60d974c

	const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[]) => {
	// Early return for empty files
	if (files.length === 0) {
	return;
	}
	// Reset collected errors for new validation
	collectedErrors.current = [];
	files.forEach((file, index) => {
	originalFileOrder.current.set(file.uri ?? '', index);
	});
	Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1).then((isValid) => (isValid ? file : null))))
	.then((validationResults) => {
	const filteredResults = validationResults.filter((result): result is FileObject => result !== null);
	const pdfsToLoad = filteredResults.filter((file) => Str.isPDF(file.name ?? ''));
	const otherFiles = filteredResults.filter((file) => !Str.isPDF(file.name ?? ''));
	// Check if we need to convert images
	if (otherFiles.some((file) => isHeicOrHeifImage(file))) {
	setIsLoaderVisible(true);
	return Promise.all(otherFiles.map((file) => convertHeicImageToJpegPromise(file))).then((convertedImages) => {
	convertedImages.forEach((convertedFile, index) => {
	updateFileOrderMapping(otherFiles.at(index), convertedFile);
	});
	// Check if we need to resize images
	if (convertedImages.some((file) => (file.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE)) {
	return Promise.all(convertedImages.map((file) => resizeImageIfNeeded(file))).then((processedFiles) => {
	processedFiles.forEach((resizedFile, index) => {
	updateFileOrderMapping(convertedImages.at(index), resizedFile);
	});
	setIsLoaderVisible(false);
	return Promise.resolve({processedFiles, pdfsToLoad});
	});
	}
	// No resizing needed, just return the converted images
	setIsLoaderVisible(false);
	return Promise.resolve({processedFiles: convertedImages, pdfsToLoad});
	});
	}
	// No conversion needed, but check if we need to resize images
	if (otherFiles.some((file) => (file.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE)) {
	setIsLoaderVisible(true);
	return Promise.all(otherFiles.map((file) => resizeImageIfNeeded(file))).then((processedFiles) => {
	processedFiles.forEach((resizedFile, index) => {
	updateFileOrderMapping(otherFiles.at(index), resizedFile);
	});
	setIsLoaderVisible(false);
	return Promise.resolve({processedFiles, pdfsToLoad});
	});
	}
	// No conversion or resizing needed, just return the valid images
	return Promise.resolve({processedFiles: otherFiles, pdfsToLoad});
	})
	.then(({processedFiles, pdfsToLoad}) => {
	if (pdfsToLoad.length) {
	validFiles.current = processedFiles;
	setPdfFilesToRender(pdfsToLoad);
	} else {
	if (processedFiles.length > 0) {
	setValidFilesToUpload(processedFiles);
	}
	if (collectedErrors.current.length > 0) {
	const uniqueErrors = Array.from(new Set(collectedErrors.current.map((error) => JSON.stringify(error)))).map((errorStr) => JSON.parse(errorStr) as ErrorObject);
	setErrorQueue(uniqueErrors);
	setCurrentErrorIndex(0);
	const firstError = uniqueErrors.at(0);
	if (firstError) {
	setFileError(firstError.error);
	if (firstError.fileExtension) {
	setInvalidFileExtension(firstError.fileExtension);
	}
	setIsErrorModalVisible(true);
	}
	} else if (processedFiles.length > 0) {
	const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current);
	proceedWithFilesAction(sortedFiles);
	resetValidationState();
	}
	}
	});
	};

When we cannot convert file we just reject:

App/src/hooks/useFilesValidation.tsx

Lines 134 to 143 in 60d974c

	const convertHeicImageToJpegPromise = (file: FileObject): Promise<FileObject> => {
	return new Promise((resolve, reject) => {
	convertHeicImage(file, {
	onSuccess: (convertedFile) => resolve(convertedFile),
	onError: (nonConvertedFile) => {
	reject(nonConvertedFile);
	},
	});
	});
	};

But dont catch any error, so we get stack

What changes do you think we should make in order to solve the problem?

We need to add error handling so that if an error occurs during any process, a modal window is displayed and the download is stopped. If necessary, new translations can be added.

To do this, you can do the following:
Add a catch block:

.catch(() => {
                setFileError('fileCorrupted');
                setIsErrorModalVisible(true);
                setIsLoaderVisible(false);
            });

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Additionally we can do the following:

1. Dont reject in convert function:
   

   App/src/hooks/useFilesValidation.tsx

   Lines 134 to 143 in 60d974c

   	const convertHeicImageToJpegPromise = (file: FileObject): Promise<FileObject> => {
   	return new Promise((resolve, reject) => {
   	convertHeicImage(file, {
   	onSuccess: (convertedFile) => resolve(convertedFile),
   	onError: (nonConvertedFile) => {
   	reject(nonConvertedFile);
   	},
   	});
   	});
   	};

    const convertHeicImageToJpegPromise = (file: FileObject): Promise<FileObject | null> => {
        return new Promise((resolve) => {
            convertHeicImage(file, {
                onSuccess: (convertedFile) => resolve(convertedFile),
                onError: (nonConvertedFile) => {
                    collectedErrors.current.push({
                        fileExtension: file.name?.split('.').pop(),
                        error: 'fileCorrupted',
                    });
                    resolve(null);
                },
            });
        });
    };

Handle error inside then like we did with other error types, here is updated function:

   const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[]) => {
        // Early return for empty files
        if (files.length === 0) {
            return;
        }

        // Reset collected errors for new validation
        collectedErrors.current = [];

        files.forEach((file, index) => {
            originalFileOrder.current.set(file.uri ?? '', index);
        });

        Promise.all(files.map((file, index) => isValidFile(file, items.at(index), files.length > 1).then((isValid) => (isValid ? file : null))))
            .then((validationResults) => {
                const filteredResults = validationResults.filter((result): result is FileObject => result !== null);
                const pdfsToLoad = filteredResults.filter((file) => Str.isPDF(file.name ?? ''));
                const otherFiles = filteredResults.filter((file) => !Str.isPDF(file.name ?? ''));

                // Check if we need to convert images
                if (otherFiles.some((file) => isHeicOrHeifImage(file))) {
                    setIsLoaderVisible(true);

                    return Promise.all(otherFiles.map((file) => convertHeicImageToJpegPromise(file))).then((convertedImages) => {
                        const validConverted = convertedImages.filter((f): f is FileObject => f !== null);

                        validConverted.forEach((convertedFile, index) => {
                            updateFileOrderMapping(otherFiles.at(index), convertedFile);
                        });

                        // Check if we need to resize images
                        if (validConverted.some((file) => (file.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE)) {
                            return Promise.all(validConverted.map((file) => resizeImageIfNeeded(file))).then((processedFiles) => {
                                processedFiles.forEach((resizedFile, index) => {
                                    updateFileOrderMapping(validConverted.at(index), resizedFile);
                                });
                                setIsLoaderVisible(false);
                                return Promise.resolve({processedFiles, pdfsToLoad});
                            });
                        }
                        // No resizing needed, just return the converted images
                        setIsLoaderVisible(false);
                        return Promise.resolve({processedFiles: validConverted, pdfsToLoad});
                    });
                }

                // No conversion needed, but check if we need to resize images
                if (otherFiles.some((file) => (file.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE)) {
                    setIsLoaderVisible(true);
                    return Promise.all(otherFiles.map((file) => resizeImageIfNeeded(file))).then((processedFiles) => {
                        processedFiles.forEach((resizedFile, index) => {
                            updateFileOrderMapping(otherFiles.at(index), resizedFile);
                        });
                        setIsLoaderVisible(false);
                        return Promise.resolve({processedFiles, pdfsToLoad});
                    });
                }

                // No conversion or resizing needed, just return the valid images
                return Promise.resolve({processedFiles: otherFiles, pdfsToLoad});
            })
            .then(({processedFiles, pdfsToLoad}) => {
                if (pdfsToLoad.length) {
                    validFiles.current = processedFiles;
                    setPdfFilesToRender(pdfsToLoad);
                } else {
                    if (processedFiles.length > 0) {
                        setValidFilesToUpload(processedFiles);
                    }

                    if (collectedErrors.current.length > 0) {
                        const uniqueErrors = Array.from(new Set(collectedErrors.current.map((error) => JSON.stringify(error)))).map((errorStr) => JSON.parse(errorStr) as ErrorObject);
                        setErrorQueue(uniqueErrors);
                        setCurrentErrorIndex(0);
                        const firstError = uniqueErrors.at(0);
                        if (firstError) {
                            setFileError(firstError.error);
                            if (firstError.fileExtension) {
                                setInvalidFileExtension(firstError.fileExtension);
                            }
                            setIsErrorModalVisible(true);
                        }
                    } else if (processedFiles.length > 0) {
                        const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current);
                        proceedWithFilesAction(sortedFiles);
                        resetValidationState();
                    }
                }
            })
            .catch(() => {
                setFileError('fileCorrupted');
                setIsErrorModalVisible(true);
                setIsLoaderVisible(false);
            });
    };

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[MariaHCD]

I believe this is a dupe of #68778

[melvin-bot]

@JmillsExpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@JmillsExpensify Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[JmillsExpensify]

Closing as dupe.