-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$500] [MEDIUM] Scan - No thumbnail is shown for the corrupted file in receipt preview #37435
Comments
Triggered auto assignment to @greg-schroeder ( |
@greg-schroeder I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors. |
We think that this bug might be related to #wave5-free-submitters |
ProposalPlease re-state the problem that we are trying to solve in this issue.We are not showing a fallback image when image loading fails. What is the root cause of that problem?in the Image component here and here we don't have a mechanism to display a fallback image when image loading fails. What changes do you think we should make in order to solve the problem?we should make usage of the const [hasImageError, setHasImageError] = useState(false); add this function: const handleImageError = () => {
setHasImageError(true);
}; and pass it as return (
<RNImage
// eslint-disable-next-line react/jsx-props-no-spreading
{...forwardedProps}
source={hasImageError ? fallbackSource : source}
onError={handleImageError}
/>
); based on the and then, here: App/src/components/MoneyRequestConfirmationList.tsx Lines 627 to 634 in 3e74ddf
we should pass we should ask design team to design the fallback error image for the receipt. we can also design a generic fallback error image and use it as a Result: for demo, I used fallback.image.Recording.2024-02-29.010427.mp4What alternative solutions did you explore? (Optional)we can also use |
Triaged |
Job added to Upwork: https://www.upwork.com/jobs/~01ddfcfb2a8a486a23 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan ( |
Initial proposal### ProposalPlease re-state the problem that we are trying to solve in this issue.[MEDIUM] Scan - No thumbnail is shown for the corrupted file in receipt preview What is the root cause of that problem?We don't handle image errors in Line 36 in a5092f5
What changes do you think we should make in order to solve the problem?For showing the default svgs like
ResultcorruptedImageBug.mp4AlternativelyWe can directly use ProposalPlease re-state the problem that we are trying to solve in this issue.Android - IOU - Nothing happens when you select corrupted jpg file in SmartScan/no error message What is the root cause of that problem?
App/src/components/AttachmentPicker/index.native.js Lines 271 to 274 in e9c112a
What changes do you think we should make in order to solve the problem?We need to use third parameter of For no-preview files we cannot detect if corrupted or not so we will use the image suggested by design team and pass it to
ImageSize.getSize(
fileData.fileCopyUri || fileData.uri,
(width, height) => {
fileData.width = width;
fileData.height = height;
return validateAndCompleteAttachmentSelection(fileData);
},
(error) => {
if (error.message === 'unknown image format') {
showImageCorruptionAlert();
} else {
showGeneralAlert();
}
},
); If we want to block users from adding corrupted images on web also we can use ImageSize.getSize(
fileCopy.fileCopyUri || fileCopy.uri,
() => {},
(e) => {
/// Block users and show message.
},
); This is just a pseudo-code, it will require more changes but approach will be to use Pseudo code for web function checkIfImageIsCorrupted(file) {
return new Promise((resolve, reject) => {
if (!Str.isImage(file.name)) {
resolve(true)
}
ImageSize.getSize(file.uri)
.then((r) => {
resolve(true);
})
.catch(() => {
reject(new Error(`'Error reading file: The file is corrupted`));
});
});
} function validateReceipt(file) {
return checkIfImageIsCorrupted(file)
.then(() => {
const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
if (!CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS.includes(fileExtension.toLowerCase())) {
setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
return false;
}
if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
return false;
}
if (lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
return false;
}
return true;
})
.catch(() => {
setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedImage');
return false;
});
} const setReceiptAndNavigate = (file) => {
validateReceipt(file).then((isFileValid) => {
if (!isFileValid) {
return;
}
// Store the receipt on the transaction object in Onyx
const source = URL.createObjectURL(file);
IOU.setMoneyRequestReceipt(transactionID, source, file.name, action !== CONST.IOU.ACTION.EDIT);
if (action === CONST.IOU.ACTION.EDIT) {
updateScanAndNavigate(file, source);
return;
}
navigateToConfirmationStep();
});
}; Fix for native bug here: /issues/38389RNImage.getSize(
fileData.fileCopyUri || fileData.uri,
(width, height) => {
fileData.width = width;
fileData.height = height;
return validateAndCompleteAttachmentSelection(fileData);
},
(error) => {
validateAndCompleteAttachmentSelection(fileData);
},
); Resultcorrupt_image_fix.mp4AlternativeOr simply use RNImage.getSize(
fileData.fileCopyUri || fileData.uri,
(width, height) => {
fileData.width = width;
fileData.height = height;
return validateAndCompleteAttachmentSelection(fileData);
},
(error) => {
validateAndCompleteAttachmentSelection(fileData);
},
); |
The corrupted file used to create this issue seems to be a very small image, only 16 x 16 pixels. A thumbnail of this image might appear blank, possibly. The corrupted file I am using works as expected. I see a thumbnail of it. |
proposals are in review |
@greg-schroeder, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
eta Monday |
📣 @paultsimura 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
@arosiclair, @paultsimura, @greg-schroeder, @Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick! |
@Krishna2323 do you have an approximate estimate for the PR? |
Will surely raise the PR tomorrow. |
@greg-schroeder could we please remove the |
Hold removed, moved back to |
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results. If a regression has occurred and you are the assigned CM follow the instructions here. If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future. |
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results. If a regression has occurred and you are the assigned CM follow the instructions here. If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future. |
This was deployed to production on April 22, due payment 2024-04-29 |
@sakluger, gentle reminder for payments. |
@sakluger, bump for payments 🙇🏻 |
Hmm. Sorry, the automation seems to have failed this one. We generally search for payments by issue title + label. I'll get this taken care of now. |
Done, apologies. |
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: v1.4.44-8
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Action Performed:
Expected Result:
The confirmation page will show thumbnail for the corrupted file.
Actual Result:
The confirmation page shows blank area for the corrupted file.
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: