Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Show attachment error modal when trying to send corrupted file #47832

Merged
merged 1 commit into from
Aug 26, 2024
Merged

Show attachment error modal when trying to send corrupted file #47832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 65 additions & 42 deletions src/components/AttachmentModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ function AttachmentModal({
const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1));
const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
const isPDFLoadError = useRef(false);
const {windowWidth} = useWindowDimensions();
const {shouldUseNarrowLayout} = useResponsiveLayout();
const nope = useSharedValue(false);
Expand Down Expand Up @@ -288,23 +289,34 @@ function AttachmentModal({
Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? '-1'));
}, [transaction, report]);

const isValidFile = useCallback((fileObject: FileObject) => {
if (fileObject.size && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
return false;
}
const isValidFile = useCallback(
(fileObject: FileObject) =>
FileUtils.validateImageForCorruption(fileObject)
.then(() => {
if (fileObject.size && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
return false;
}

if (fileObject.size && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
return false;
}
if (fileObject.size && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
return false;
}

return true;
}, []);
return true;
})
.catch(() => {
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
setAttachmentInvalidReason('attachmentPicker.errorWhileSelectingCorruptedAttachment');
return false;
}),
[],
);

const isDirectoryCheck = useCallback((data: FileObject) => {
if ('webkitGetAsEntry' in data && (data as DataTransferItem).webkitGetAsEntry()?.isDirectory) {
Expand All @@ -329,34 +341,35 @@ function AttachmentModal({
return;
}

if (!isValidFile(fileObject)) {
return;
}

if (fileObject instanceof File) {
/**
* Cleaning file name, done here so that it covers all cases:
* upload, drag and drop, copy-paste
*/
let updatedFile = fileObject;
const cleanName = FileUtils.cleanFileName(updatedFile.name);
if (updatedFile.name !== cleanName) {
updatedFile = new File([updatedFile], cleanName, {type: updatedFile.type});
isValidFile(fileObject).then((isValid) => {
if (!isValid) {
return;
}
const inputSource = URL.createObjectURL(updatedFile);
updatedFile.uri = inputSource;
const inputModalType = getModalType(inputSource, updatedFile);
setIsModalOpen(true);
setSourceState(inputSource);
setFile(updatedFile);
setModalType(inputModalType);
} else if (fileObject.uri) {
const inputModalType = getModalType(fileObject.uri, fileObject);
setIsModalOpen(true);
setSourceState(fileObject.uri);
setFile(fileObject);
setModalType(inputModalType);
}
if (fileObject instanceof File) {
/**
* Cleaning file name, done here so that it covers all cases:
* upload, drag and drop, copy-paste
*/
let updatedFile = fileObject;
const cleanName = FileUtils.cleanFileName(updatedFile.name);
if (updatedFile.name !== cleanName) {
updatedFile = new File([updatedFile], cleanName, {type: updatedFile.type});
}
const inputSource = URL.createObjectURL(updatedFile);
updatedFile.uri = inputSource;
const inputModalType = getModalType(inputSource, updatedFile);
setIsModalOpen(true);
setSourceState(inputSource);
setFile(updatedFile);
setModalType(inputModalType);
} else if (fileObject.uri) {
const inputModalType = getModalType(fileObject.uri, fileObject);
setIsModalOpen(true);
setSourceState(fileObject.uri);
setFile(fileObject);
setModalType(inputModalType);
}
});
},
[isValidFile, getModalType, isDirectoryCheck],
);
Expand Down Expand Up @@ -482,6 +495,12 @@ function AttachmentModal({
onModalHide={() => {
onModalHide();
setShouldLoadAttachment(false);
if (isPDFLoadError.current) {
isPDFLoadError.current = false;
setIsAttachmentInvalid(true);
setAttachmentInvalidReasonTitle('attachmentPicker.attachmentError');
setAttachmentInvalidReason('attachmentPicker.errorWhileSelectingCorruptedAttachment');
}
}}
propagateSwipe
initialFocus={() => {
Expand Down Expand Up @@ -543,6 +562,10 @@ function AttachmentModal({
isAuthTokenRequired={isAuthTokenRequiredState}
file={file}
onToggleKeyboard={setIsConfirmButtonDisabled}
onPDFLoadError={() => {
isPDFLoadError.current = true;
setIsModalOpen(false);
}}
isWorkspaceAvatar={isWorkspaceAvatar}
maybeIcon={maybeIcon}
fallbackSource={fallbackSource}
Expand Down
5 changes: 5 additions & 0 deletions src/components/Attachments/AttachmentView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,9 @@ type AttachmentViewProps = AttachmentViewOnyxProps &
/** Notify parent that the UI should be modified to accommodate keyboard */
onToggleKeyboard?: (shouldFadeOut: boolean) => void;

/** A callback when the PDF fails to load */
onPDFLoadError?: () => void;

/** Extra styles to pass to View wrapper */
containerStyles?: StyleProp<ViewStyle>;

Expand Down Expand Up @@ -88,6 +91,7 @@ function AttachmentView({
shouldShowDownloadIcon,
containerStyles,
onToggleKeyboard,
onPDFLoadError: onPDFLoadErrorProp = () => {},
isFocused,
isUsedInCarousel,
isUsedInAttachmentModal,
Expand Down Expand Up @@ -182,6 +186,7 @@ function AttachmentView({

const onPDFLoadError = () => {
setHasPDFFailedToLoad(true);
onPDFLoadErrorProp();
};

// We need the following View component on android native
Expand Down
7 changes: 5 additions & 2 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,8 +537,11 @@ function ReportActionCompose({
if (isAttachmentPreviewActive) {
return;
}
const data = event.dataTransfer?.items[0];
displayFileInModal(data as unknown as FileObject);
const data = event.dataTransfer?.files[0];
if (data) {
data.uri = URL.createObjectURL(data);
displayFileInModal(data);
}
}}
/>
</>
Expand Down
Loading