fix: Receipt validation not working in drag&drop section of report screen (AFTER REVERT) #73238
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,29 +16,41 @@ import { | |
| validateAttachment, | ||
| validateImageForCorruption, | ||
| } from '@libs/fileDownload/FileUtils'; | ||
| import type {ValidateAttachmentOptions} from '@libs/fileDownload/FileUtils'; | ||
| import convertHeicImage from '@libs/fileDownload/heicConverter'; | ||
| import Log from '@libs/Log'; | ||
| import CONST from '@src/CONST'; | ||
| import type {FileObject} from '@src/types/utils/Attachment'; | ||
| import useLocalize from './useLocalize'; | ||
| import useThemeStyles from './useThemeStyles'; | ||
|
|
||
| const DEFAULT_IS_VALIDATING_RECEIPTS = true; | ||
|
|
||
| type ErrorObject = { | ||
| error: ValueOf<typeof CONST.FILE_VALIDATION_ERRORS>; | ||
| fileExtension?: string; | ||
| }; | ||
|
|
||
| type ValidationOptions = { | ||
| isValidatingReceipts?: boolean; | ||
| }; | ||
|
|
||
| const sortFilesByOriginalOrder = (files: FileObject[], orderMap: Map<string, number>) => { | ||
| return files.sort((a, b) => (orderMap.get(a.uri ?? '') ?? 0) - (orderMap.get(b.uri ?? '') ?? 0)); | ||
| }; | ||
|
|
||
| function useFilesValidation(onFilesValidated: (files: FileObject[], dataTransferItems: DataTransferItem[]) => void) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const [isValidatingFiles, setIsValidatingFiles] = useState(false); | ||
| const [isValidatingReceipts, setIsValidatingReceipts] = useState<boolean>(); | ||
| const [isValidatingMultipleFiles, setIsValidatingMultipleFiles] = useState(false); | ||
|
|
||
| const [isErrorModalVisible, setIsErrorModalVisible] = useState(false); | ||
| const [fileError, setFileError] = useState<ValueOf<typeof CONST.FILE_VALIDATION_ERRORS> | null>(null); | ||
| const [pdfFilesToRender, setPdfFilesToRender] = useState<FileObject[]>([]); | ||
| const [validFilesToUpload, setValidFilesToUpload] = useState([] as FileObject[]); | ||
| const [invalidFileExtension, setInvalidFileExtension] = useState(''); | ||
| const [errorQueue, setErrorQueue] = useState<ErrorObject[]>([]); | ||
| const [currentErrorIndex, setCurrentErrorIndex] = useState(0); | ||
|
|
@@ -71,11 +83,13 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| }, []); | ||
|
|
||
| const resetValidationState = useCallback(() => { | ||
| setIsValidatingFiles(false); | ||
| setIsValidatingReceipts(undefined); | ||
| setIsValidatingMultipleFiles(false); | ||
| setIsErrorModalVisible(false); | ||
| setPdfFilesToRender([]); | ||
| setIsLoaderVisible(false); | ||
| setValidFilesToUpload([]); | ||
| setFileError(null); | ||
| setInvalidFileExtension(''); | ||
| setErrorQueue([]); | ||
|
|
@@ -101,7 +115,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| setIsErrorModalVisible(true); | ||
| }; | ||
|
|
||
| const isValidFile = (originalFile: FileObject, item: DataTransferItem | undefined, validationOptions: ValidateAttachmentOptions) => { | ||
| if (item && item.kind === 'file' && 'webkitGetAsEntry' in item) { | ||
| const entry = item.webkitGetAsEntry(); | ||
|
|
||
|
|
@@ -114,7 +128,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| return normalizeFileObject(originalFile) | ||
| .then((normalizedFile) => | ||
| validateImageForCorruption(normalizedFile).then(() => { | ||
| const error = validateAttachment(normalizedFile, validationOptions); | ||
| if (error) { | ||
| const errorData = { | ||
| error, | ||
|
|
@@ -170,12 +184,12 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| } else if (validFiles.current.length > 0) { | ||
| const sortedFiles = sortFilesByOriginalOrder(validFiles.current, originalFileOrder.current); | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| resetValidationState(); | ||
| } | ||
| }, [deduplicateErrors, pdfFilesToRender.length, onFilesValidated, resetValidationState]); | ||
|
|
||
| const validateAndResizeFiles = (files: FileObject[], items: DataTransferItem[], validationOptions?: ValidationOptions) => { | ||
| // Early return for empty files | ||
| if (files.length === 0) { | ||
| return; | ||
|
|
@@ -188,7 +202,13 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| originalFileOrder.current.set(file.uri ?? '', index); | ||
| }); | ||
|
|
||
| Promise.all( | ||
| files.map((file, index) => | ||
| isValidFile(file, items.at(index), {isValidatingMultipleFiles: files.length > 1, isValidatingReceipts: validationOptions?.isValidatingReceipts ?? isValidatingReceipts}).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 ?? '')); | ||
|
|
@@ -258,14 +278,27 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| } else if (processedFiles.length > 0) { | ||
| const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current); | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| resetValidationState(); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const validateFiles = (files: FileObject[], items?: DataTransferItem[], validationOptions?: ValidationOptions) => { | ||
| if (isValidatingFiles) { | ||
| Log.warn('Files are already being validated. Please wait for the current validation to complete before calling `validateFiles` again.'); | ||
| return; | ||
| } | ||
|
|
||
| setIsValidatingFiles(true); | ||
|
|
||
| const validationOptionsWithDefaults = { | ||
| ...validationOptions, | ||
| isValidatingReceipts: validationOptions?.isValidatingReceipts ?? DEFAULT_IS_VALIDATING_RECEIPTS, | ||
| }; | ||
| setIsValidatingReceipts(validationOptionsWithDefaults.isValidatingReceipts); | ||
|
|
||
| if (files.length > 1) { | ||
| setIsValidatingMultipleFiles(true); | ||
| } | ||
|
|
@@ -276,11 +309,11 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| } | ||
| setErrorAndOpenModal(CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED); | ||
| } else { | ||
| validateAndResizeFiles(files, items ?? [], validationOptionsWithDefaults); | ||
| } | ||
| }; | ||
|
|
||
| const onConfirmError = () => { | ||
| if (fileError === CONST.FILE_VALIDATION_ERRORS.MAX_FILE_LIMIT_EXCEEDED) { | ||
| setIsErrorModalVisible(false); | ||
| validateAndResizeFiles(filesToValidate.current, dataTransferItemList.current); | ||
|
|
@@ -304,18 +337,18 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| const sortedFiles = sortFilesByOriginalOrder(validFilesToUpload, originalFileOrder.current); | ||
| // If we're validating attachments we need to use InteractionManager to ensure | ||
| // the error modal is dismissed before opening the attachment modal | ||
| if (isValidatingReceipts === false && fileError) { | ||
| setIsErrorModalVisible(false); | ||
| // eslint-disable-next-line @typescript-eslint/no-deprecated | ||
| InteractionManager.runAfterInteractions(() => { | ||
| if (sortedFiles.length !== 0) { | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| } | ||
| resetValidationState(); | ||
| }); | ||
| } else { | ||
| if (sortedFiles.length !== 0) { | ||
| onFilesValidated(sortedFiles, dataTransferItemList.current); | ||
| } | ||
| hideModalAndReset(); | ||
| } | ||
|
|
@@ -334,7 +367,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| }} | ||
| onPassword={() => { | ||
| validatedPDFs.current.push(file); | ||
| if (isValidatingReceipts === true) { | ||
| collectedErrors.current.push({error: CONST.FILE_VALIDATION_ERRORS.PROTECTED_FILE}); | ||
| } else { | ||
| validFiles.current.push(file); | ||
|
|
@@ -350,11 +383,11 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| )) | ||
| : undefined; | ||
|
|
||
| const getModalPrompt = () => { | ||
|
Contributor
There was a problem hiding this comment. Why did you remove the useCallback here?
Contributor
Author
There was a problem hiding this comment. Because the file can be successfully compiled with React Compiler and therefore we can remove manual memoization like in other callbacks. Now on a second look, there are still some usages of
Contributor
There was a problem hiding this comment. Ah ok that makes sense. Thanks! @adamgrzybowski @kacper-mikolajczak Seems like we will need to tweak the AI reviewer to acknoledge this though I am not sure how easy it will be so the reviewer knows if the file is compilable with the react compiler |
||
| if (!fileError) { | ||
| return ''; | ||
| } | ||
| const prompt = getFileValidationErrorText(fileError, {fileType: invalidFileExtension}, isValidatingReceipts === true).reason; | ||
| if (fileError === CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE || fileError === CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE) { | ||
| return ( | ||
| <Text> | ||
|
|
@@ -364,12 +397,12 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTr | |
| ); | ||
| } | ||
| return prompt; | ||
| }; | ||
|
|
||
| const ErrorModal = ( | ||
| <ConfirmModal | ||
| title={getFileValidationErrorText(fileError, {fileType: invalidFileExtension}, isValidatingReceipts === true).title} | ||
| onConfirm={onConfirmError} | ||
| onCancel={hideModalAndReset} | ||
| isVisible={isErrorModalVisible} | ||
| prompt={getModalPrompt()} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| /* eslint-disable @typescript-eslint/no-deprecated */ | ||
|
Contributor
Author
There was a problem hiding this comment. Thanks for the catch!
Contributor
Author
There was a problem hiding this comment. @parasharrajat Actually we do need this, my bad. I don't see that usages of |
||
| import {Str} from 'expensify-common'; | ||
| import {Alert, Linking, Platform} from 'react-native'; | ||
| import type {ReactNativeBlobUtilReadStream} from 'react-native-blob-util'; | ||
|
|
@@ -549,18 +550,23 @@ const normalizeFileObject = (file: FileObject): Promise<FileObject> => { | |
| }); | ||
| }; | ||
|
|
||
| type ValidateAttachmentOptions = { | ||
| isValidatingReceipts?: boolean; | ||
| isValidatingMultipleFiles?: boolean; | ||
| }; | ||
|
|
||
| const validateAttachment = (file: FileObject, validationOptions?: ValidateAttachmentOptions) => { | ||
| const maxFileSize = validationOptions?.isValidatingReceipts ? CONST.API_ATTACHMENT_VALIDATIONS.RECEIPT_MAX_SIZE : CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE; | ||
|
|
||
| if (validationOptions?.isValidatingReceipts && !isValidReceiptExtension(file)) { | ||
| return validationOptions?.isValidatingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.WRONG_FILE_TYPE; | ||
| } | ||
|
|
||
| if (!Str.isImage(file.name ?? '') && !hasHeicOrHeifExtension(file) && (file?.size ?? 0) > maxFileSize) { | ||
| return validationOptions?.isValidatingMultipleFiles ? CONST.FILE_VALIDATION_ERRORS.FILE_TOO_LARGE_MULTIPLE : CONST.FILE_VALIDATION_ERRORS.FILE_TOO_LARGE; | ||
| } | ||
|
|
||
| if (validationOptions?.isValidatingReceipts && (file?.size ?? 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) { | ||
| return CONST.FILE_VALIDATION_ERRORS.FILE_TOO_SMALL; | ||
| } | ||
|
|
||
|
|
@@ -777,3 +783,5 @@ export { | |
| cleanFileObject, | ||
| cleanFileObjectName, | ||
| }; | ||
|
|
||
| export type {ValidateAttachmentOptions}; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.