diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 38f513fe8ea7..69a27743023c 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -478,6 +478,12 @@ const ROUTES = {
         route: 'attachment',
         getRoute: (params?: ReportAttachmentsRouteParams) => getAttachmentModalScreenRoute('attachment', params),
     },
+    REPORT_ADD_ATTACHMENT: {
+        route: 'r/:reportID/attachment/add',
+        getRoute: (reportID: string, params?: ReportAddAttachmentRouteParams) => {
+            return getAttachmentModalScreenRoute(`r/${reportID}/attachment/add`, params);
+        },
+    },
     EDIT_CURRENCY_REQUEST: {
         route: 'r/:threadReportID/edit/currency',
         getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}` as const,
@@ -3281,11 +3287,13 @@ export {PUBLIC_SCREENS_ROUTES, SHARED_ROUTE_PARAMS, VERIFY_ACCOUNT};
 export default ROUTES;
 
 type ReportAttachmentsRoute = typeof ROUTES.ATTACHMENTS.route;
-type AttachmentRoutes = ReportAttachmentsRoute;
+type ReportAddAttachmentRoute = `r/${string}/attachment/add`;
+type AttachmentRoutes = ReportAttachmentsRoute | ReportAddAttachmentRoute;
 
 type ReportAttachmentsRouteParams = RootNavigatorParamList[typeof SCREENS.ATTACHMENTS];
+type ReportAddAttachmentRouteParams = RootNavigatorParamList[typeof SCREENS.REPORT_ADD_ATTACHMENT];
 
-function getAttachmentModalScreenRoute(url: AttachmentRoutes, params?: ReportAttachmentsRouteParams) {
+function getAttachmentModalScreenRoute(url: AttachmentRoutes, params?: ReportAttachmentsRouteParams | ReportAddAttachmentRouteParams) {
     if (!params?.source) {
         return url;
     }
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 090fae7a7487..c2dbfe7883da 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -8,6 +8,7 @@ const PROTECTED_SCREENS = {
     HOME: 'Home',
     CONCIERGE: 'Concierge',
     ATTACHMENTS: 'Attachments',
+    REPORT_ADD_ATTACHMENT: 'ReportAddAttachment',
     TRACK_EXPENSE: 'TrackExpense',
     SUBMIT_EXPENSE: 'SubmitExpense',
 } as const;
diff --git a/src/components/AttachmentComposerModal.tsx b/src/components/AttachmentComposerModal.tsx
deleted file mode 100644
index 35bcfb10b4d7..000000000000
--- a/src/components/AttachmentComposerModal.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
-import type {View} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import type {OnyxEntry} from 'react-native-onyx';
-import Animated, {FadeIn, LayoutAnimationConfig} from 'react-native-reanimated';
-import useFilesValidation from '@hooks/useFilesValidation';
-import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {cleanFileName} from '@libs/fileDownload/FileUtils';
-import CONST from '@src/CONST';
-import type * as OnyxTypes from '@src/types/onyx';
-import type ModalType from '@src/types/utils/ModalType';
-import viewRef from '@src/types/utils/viewRef';
-import AttachmentCarouselView from './Attachments/AttachmentCarousel/AttachmentCarouselView';
-import useCarouselArrows from './Attachments/AttachmentCarousel/useCarouselArrows';
-import useAttachmentErrors from './Attachments/AttachmentView/useAttachmentErrors';
-import type {Attachment} from './Attachments/types';
-import Button from './Button';
-import HeaderGap from './HeaderGap';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import Modal from './Modal';
-import SafeAreaConsumer from './SafeAreaConsumer';
-
-type ImagePickerResponse = {
-    height?: number;
-    name: string;
-    size?: number | null;
-    type: string;
-    uri: string;
-    width?: number;
-};
-
-type FileObject = Partial<File | ImagePickerResponse>;
-
-type ChildrenProps = {
-    displayFilesInModal: (data: FileObject[], items?: DataTransferItem[]) => void;
-    show: () => void;
-};
-
-type AttachmentComposerModalProps = {
-    /** Optional callback to fire when we want to preview an image and approve it for use. */
-    onConfirm: ((file: FileObject | FileObject[]) => void) | null;
-
-    /** Title shown in the header of the modal */
-    headerTitle: string;
-
-    /** Optional callback to fire when we want to do something after modal show. */
-    onModalShow: () => void;
-
-    /** Optional callback to fire when we want to do something after modal hide. */
-    onModalHide: () => void;
-
-    /** A function as a child to pass modal launching methods to */
-    children: React.FC<ChildrenProps>;
-
-    /** Should disable send button */
-    shouldDisableSendButton: boolean;
-
-    /** The report currently being looked at */
-    report?: OnyxEntry<OnyxTypes.Report>;
-};
-
-function AttachmentComposerModal({onConfirm, onModalShow = () => {}, onModalHide = () => {}, headerTitle, children, shouldDisableSendButton = false, report}: AttachmentComposerModalProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {setAttachmentError, clearAttachmentErrors} = useAttachmentErrors();
-    const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
-
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
-    const [validFilesToUpload, setValidFilesToUpload] = useState<FileObject[]>([]);
-    const [attachments, setAttachments] = useState<Attachment[]>([]);
-    const [page, setPage] = useState<number>(0);
-    const [currentAttachment, setCurrentAttachment] = useState<Attachment | null>(null);
-
-    /**
-     * If our attachment is a PDF, return the unswipeable Modal type.
-     */
-    const getModalType = useCallback(
-        (sourceURL: string, fileObject: FileObject) => {
-            const fileName = fileObject?.name ?? translate('attachmentView.unknownFilename');
-            return sourceURL && (sourceURL.includes('.pdf') || fileName.includes('.pdf')) ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.CENTERED;
-        },
-        [translate],
-    );
-
-    /**
-     * Execute the onConfirm callback and close the modal.
-     */
-    const submitAndClose = useCallback(() => {
-        // If the modal has already been closed
-        if (!isModalOpen) {
-            return;
-        }
-
-        if (onConfirm) {
-            if (validFilesToUpload.length) {
-                onConfirm(validFilesToUpload);
-            } else if (currentAttachment) {
-                onConfirm(currentAttachment.file ?? (currentAttachment as FileObject));
-            }
-        }
-
-        setIsModalOpen(false);
-    }, [isModalOpen, onConfirm, validFilesToUpload, currentAttachment]);
-
-    /**
-     * Sanitizes file names and ensures proper URI references for file system compatibility
-     */
-    const cleanFileObjectName = useCallback((fileObject: FileObject): FileObject => {
-        if (fileObject instanceof File) {
-            const cleanName = cleanFileName(fileObject.name);
-            if (fileObject.name !== cleanName) {
-                const updatedFile = new File([fileObject], cleanName, {type: fileObject.type});
-                const inputSource = URL.createObjectURL(updatedFile);
-                updatedFile.uri = inputSource;
-                return updatedFile;
-            }
-            if (!fileObject.uri) {
-                const inputSource = URL.createObjectURL(fileObject);
-                // eslint-disable-next-line no-param-reassign
-                fileObject.uri = inputSource;
-            }
-        }
-        return fileObject;
-    }, []);
-
-    const convertFileToAttachment = useCallback((fileObject: FileObject, source: string): Attachment => {
-        return {
-            source,
-            file: fileObject,
-        };
-    }, []);
-
-    useEffect(() => {
-        if (!validFilesToUpload.length) {
-            return;
-        }
-
-        if (validFilesToUpload.length > 0) {
-            // Convert all files to attachments
-            const newAttachments = validFilesToUpload.map((fileObject) => {
-                const source = fileObject.uri ?? '';
-                return convertFileToAttachment(fileObject, source);
-            });
-
-            const firstAttachment = newAttachments.at(0) ?? null;
-            setAttachments(newAttachments);
-            setCurrentAttachment(firstAttachment);
-            setPage(0);
-
-            if (firstAttachment?.file) {
-                const inputModalType = getModalType(firstAttachment.source as string, firstAttachment.file);
-                setModalType(inputModalType);
-            }
-
-            setIsModalOpen(true);
-        }
-    }, [validFilesToUpload, convertFileToAttachment, getModalType]);
-
-    const {ErrorModal, validateFiles, PDFValidationComponent} = useFilesValidation(setValidFilesToUpload, false);
-
-    const validateAndDisplayMultipleFilesToUpload = useCallback(
-        (data: FileObject[], items?: DataTransferItem[]) => {
-            if (!data?.length) {
-                return;
-            }
-
-            const validIndices: number[] = [];
-            const fileObjects = data
-                .map((item, index) => {
-                    let fileObject = item;
-                    if ('getAsFile' in item && typeof item.getAsFile === 'function') {
-                        fileObject = item.getAsFile() as FileObject;
-                    }
-                    const cleanedFileObject = cleanFileObjectName(fileObject);
-                    if (cleanedFileObject !== null) {
-                        validIndices.push(index);
-                    }
-                    return cleanedFileObject;
-                })
-                .filter((fileObject): fileObject is FileObject => fileObject !== null);
-
-            if (!fileObjects.length) {
-                return;
-            }
-
-            // Create a filtered items array that matches the fileObjects
-            const filteredItems = items && validIndices.length > 0 ? validIndices.map((index) => items.at(index) ?? ({} as DataTransferItem)) : undefined;
-
-            validateFiles(fileObjects, filteredItems);
-        },
-        [cleanFileObjectName, validateFiles],
-    );
-
-    const closeModal = useCallback(() => {
-        setIsModalOpen(false);
-    }, []);
-
-    const openModal = useCallback(() => {
-        setIsModalOpen(true);
-    }, []);
-
-    const headerTitleNew = headerTitle ?? translate('reportActionCompose.sendAttachment');
-
-    const submitRef = useRef<View | HTMLElement>(null);
-
-    return (
-        <>
-            {PDFValidationComponent}
-            <Modal
-                type={modalType}
-                onClose={closeModal}
-                isVisible={isModalOpen}
-                onModalShow={() => {
-                    onModalShow();
-                }}
-                onModalHide={() => {
-                    onModalHide();
-                    clearAttachmentErrors();
-                    setValidFilesToUpload([]);
-                    setAttachments([]);
-                    setCurrentAttachment(null);
-                    setPage(0);
-                }}
-                initialFocus={() => {
-                    if (!submitRef.current) {
-                        return false;
-                    }
-                    return submitRef.current;
-                }}
-                shouldHandleNavigationBack
-            >
-                <GestureHandlerRootView style={styles.flex1}>
-                    {shouldUseNarrowLayout && <HeaderGap />}
-                    <HeaderWithBackButton
-                        shouldMinimizeMenuButton
-                        title={headerTitleNew}
-                        shouldShowBorderBottom
-                        shouldShowCloseButton={!shouldUseNarrowLayout}
-                        shouldShowBackButton={shouldUseNarrowLayout}
-                        onBackButtonPress={closeModal}
-                        onCloseButtonPress={closeModal}
-                        shouldSetModalVisibility={false}
-                        shouldDisplayHelpButton={false}
-                    />
-                    {attachments.length > 0 && !!currentAttachment && (
-                        <AttachmentCarouselView
-                            attachments={attachments}
-                            source={currentAttachment.source}
-                            page={page}
-                            setPage={setPage}
-                            onClose={closeModal}
-                            autoHideArrows={autoHideArrows}
-                            cancelAutoHideArrow={cancelAutoHideArrows}
-                            setShouldShowArrows={setShouldShowArrows}
-                            onAttachmentError={setAttachmentError}
-                            shouldShowArrows={shouldShowArrows}
-                            report={report}
-                        />
-                    )}
-                    <LayoutAnimationConfig skipEntering>
-                        {(validFilesToUpload.length > 0 || !!currentAttachment) && (
-                            <SafeAreaConsumer>
-                                {({safeAreaPaddingBottomStyle}) => (
-                                    <Animated.View
-                                        style={safeAreaPaddingBottomStyle}
-                                        entering={FadeIn}
-                                    >
-                                        <Button
-                                            ref={viewRef(submitRef)}
-                                            success
-                                            large
-                                            style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
-                                            textStyles={[styles.buttonConfirmText]}
-                                            text={translate('common.send')}
-                                            onPress={submitAndClose}
-                                            isDisabled={shouldDisableSendButton}
-                                            pressOnEnter
-                                        />
-                                    </Animated.View>
-                                )}
-                            </SafeAreaConsumer>
-                        )}
-                    </LayoutAnimationConfig>
-                </GestureHandlerRootView>
-            </Modal>
-            {children?.({
-                displayFilesInModal: validateAndDisplayMultipleFilesToUpload,
-                show: openModal,
-            })}
-            {ErrorModal}
-        </>
-    );
-}
-
-AttachmentComposerModal.displayName = 'AttachmentComposerModal';
-
-export default memo(AttachmentComposerModal);
-
-export type {FileObject, ImagePickerResponse};
diff --git a/src/components/Composer/implementation/index.tsx b/src/components/Composer/implementation/index.tsx
index 1ddcb16d2251..dd51e5e3e394 100755
--- a/src/components/Composer/implementation/index.tsx
+++ b/src/components/Composer/implementation/index.tsx
@@ -163,7 +163,7 @@ function Composer(
             // If paste contains files, then trigger file management
             if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) {
                 // Prevent the default so we do not post the file name into the text box
-                onPasteFile(event.clipboardData.files[0]);
+                onPasteFile(Array.from(event.clipboardData.files));
                 return true;
             }
 
diff --git a/src/components/Composer/types.ts b/src/components/Composer/types.ts
index 7ecf77add492..74f4454d96c4 100644
--- a/src/components/Composer/types.ts
+++ b/src/components/Composer/types.ts
@@ -35,7 +35,7 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> & {
     onChangeText?: (numberOfLines: string) => void;
 
     /** Callback method to handle pasting a file */
-    onPasteFile?: (file: FileObject) => void;
+    onPasteFile?: (files: FileObject | FileObject[]) => void;
 
     /** General styles to apply to the text input */
     // eslint-disable-next-line react/forbid-prop-types
diff --git a/src/hooks/useFilesValidation.tsx b/src/hooks/useFilesValidation.tsx
index f979b17f0cb4..9e08cec12e4d 100644
--- a/src/hooks/useFilesValidation.tsx
+++ b/src/hooks/useFilesValidation.tsx
@@ -31,7 +31,7 @@ const sortFilesByOriginalOrder = (files: FileObject[], orderMap: Map<string, num
     return files.sort((a, b) => (orderMap.get(a.uri ?? '') ?? 0) - (orderMap.get(b.uri ?? '') ?? 0));
 };
 
-function useFilesValidation(proceedWithFilesAction: (files: FileObject[]) => void, isValidatingReceipts = true) {
+function useFilesValidation(proceedWithFilesAction: (files: FileObject[], dataTransferItems: DataTransferItem[]) => void, isValidatingReceipts = true) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isErrorModalVisible, setIsErrorModalVisible] = useState(false);
@@ -170,7 +170,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[]) => voi
             }
         } else if (validFiles.current.length > 0) {
             const sortedFiles = sortFilesByOriginalOrder(validFiles.current, originalFileOrder.current);
-            proceedWithFilesAction(sortedFiles);
+            proceedWithFilesAction(sortedFiles, dataTransferItemList.current);
             resetValidationState();
         }
     }, [deduplicateErrors, pdfFilesToRender.length, proceedWithFilesAction, resetValidationState]);
@@ -258,7 +258,7 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[]) => voi
                         }
                     } else if (processedFiles.length > 0) {
                         const sortedFiles = sortFilesByOriginalOrder(processedFiles, originalFileOrder.current);
-                        proceedWithFilesAction(sortedFiles);
+                        proceedWithFilesAction(sortedFiles, dataTransferItemList.current);
                         resetValidationState();
                     }
                 }
@@ -309,13 +309,13 @@ function useFilesValidation(proceedWithFilesAction: (files: FileObject[]) => voi
             // eslint-disable-next-line deprecation/deprecation
             InteractionManager.runAfterInteractions(() => {
                 if (sortedFiles.length !== 0) {
-                    proceedWithFilesAction(sortedFiles);
+                    proceedWithFilesAction(sortedFiles, dataTransferItemList.current);
                 }
                 resetValidationState();
             });
         } else {
             if (sortedFiles.length !== 0) {
-                proceedWithFilesAction(sortedFiles);
+                proceedWithFilesAction(sortedFiles, dataTransferItemList.current);
             }
             hideModalAndReset();
         }
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 0fee45ceb335..9d7f6f949a14 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -584,6 +584,12 @@ function AuthScreens() {
                     getComponent={loadAttachmentModalScreen}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name={SCREENS.REPORT_ADD_ATTACHMENT}
+                    options={attachmentModalScreenOptions}
+                    getComponent={loadAttachmentModalScreen}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name={SCREENS.PROFILE_AVATAR}
                     options={{
diff --git a/src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts b/src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts
index afcfc36ead14..e20e00eadd8c 100644
--- a/src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts
+++ b/src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts
@@ -20,6 +20,7 @@ const MODAL_ROUTES_TO_DISMISS: string[] = [
     NAVIGATORS.TEST_DRIVE_MODAL_NAVIGATOR,
     SCREENS.NOT_FOUND,
     SCREENS.ATTACHMENTS,
+    SCREENS.REPORT_ADD_ATTACHMENT,
     SCREENS.TRANSACTION_RECEIPT,
     SCREENS.MONEY_REQUEST.RECEIPT_PREVIEW,
     SCREENS.PROFILE_AVATAR,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 34f2d473c61b..fdb519acc506 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -25,6 +25,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
         [SCREENS.SAML_SIGN_IN]: ROUTES.SAML_SIGN_IN,
         [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT,
         [SCREENS.ATTACHMENTS]: ROUTES.ATTACHMENTS.route,
+        [SCREENS.REPORT_ADD_ATTACHMENT]: ROUTES.REPORT_ADD_ATTACHMENT.route,
         [SCREENS.PROFILE_AVATAR]: ROUTES.PROFILE_AVATAR.route,
         [SCREENS.WORKSPACE_AVATAR]: ROUTES.WORKSPACE_AVATAR.route,
         [SCREENS.REPORT_AVATAR]: ROUTES.REPORT_AVATAR.route,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index a47dee09e7aa..2d9b9009c410 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -12,13 +12,12 @@ import type {
 } from '@react-navigation/native';
 import type {TupleToUnion, ValueOf} from 'type-fest';
 import type {UpperCaseCharacters} from 'type-fest/source/internal';
-import type {FileObject} from '@components/AttachmentComposerModal';
 import type {SearchQueryString} from '@components/Search/types';
 import type {IOURequestType} from '@libs/actions/IOU';
 import type {SaveSearchParams} from '@libs/API/parameters';
 import type {ReimbursementAccountStepToOpen} from '@libs/ReimbursementAccountUtils';
 import type {AvatarSource} from '@libs/UserUtils';
-import type {AttachmentModalContainerModalProps} from '@pages/media/AttachmentModalScreen/types';
+import type {AttachmentModalContainerModalProps, FileObject} from '@pages/media/AttachmentModalScreen/types';
 import type CONST from '@src/CONST';
 import type {Country, IOUAction, IOUType} from '@src/CONST';
 import type NAVIGATORS from '@src/NAVIGATORS';
@@ -2189,7 +2188,22 @@ type AttachmentModalScreensParamList = {
         maybeIcon?: boolean;
         file?: FileObject;
         shouldDisableSendButton?: boolean;
-        onConfirm?: (file: FileObject) => void;
+    };
+    [SCREENS.REPORT_ADD_ATTACHMENT]: AttachmentModalContainerModalProps & {
+        reportID?: string;
+        accountID?: number;
+        attachmentID?: string;
+        source?: AvatarSource;
+        file?: FileObject | FileObject[];
+        dataTransferItems?: DataTransferItem[];
+        type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
+        isAuthTokenRequired?: boolean;
+        originalFileName?: string;
+        attachmentLink?: string;
+        hashKey?: number;
+        headerTitle?: string;
+        shouldDisableSendButton?: boolean;
+        onConfirm?: (file: FileObject | FileObject[]) => void;
     };
     [SCREENS.PROFILE_AVATAR]: AttachmentModalContainerModalProps & {
         accountID: number;
diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts
index b7864804ba94..b3ae8d3cf506 100644
--- a/src/libs/fileDownload/FileUtils.ts
+++ b/src/libs/fileDownload/FileUtils.ts
@@ -699,6 +699,51 @@ const canvasFallback = (blob: Blob, fileName: string): Promise<File> => {
     });
 };
 
+function getFilesFromClipboardEvent(event: DragEvent) {
+    if (event.dataTransfer?.files.length && event.dataTransfer?.files.length > 1) {
+        const files = Array.from(event.dataTransfer?.files).map((file) => {
+            // eslint-disable-next-line no-param-reassign
+            file.uri = URL.createObjectURL(file);
+            return file;
+        });
+        return files;
+    }
+
+    const data = event.dataTransfer?.files[0];
+    if (data) {
+        data.uri = URL.createObjectURL(data);
+        return [data];
+    }
+
+    return [];
+}
+
+function cleanFileObject(fileObject: FileObject): FileObject {
+    if ('getAsFile' in fileObject && typeof fileObject.getAsFile === 'function') {
+        return fileObject.getAsFile() as FileObject;
+    }
+
+    return fileObject;
+}
+
+function cleanFileObjectName(fileObject: FileObject): FileObject {
+    if (fileObject instanceof File) {
+        const cleanName = cleanFileName(fileObject.name);
+        if (fileObject.name !== cleanName) {
+            const updatedFile = new File([fileObject], cleanName, {type: fileObject.type});
+            const inputSource = URL.createObjectURL(updatedFile);
+            updatedFile.uri = inputSource;
+            return updatedFile;
+        }
+        if (!fileObject.uri) {
+            const inputSource = URL.createObjectURL(fileObject);
+            // eslint-disable-next-line no-param-reassign
+            fileObject.uri = inputSource;
+        }
+    }
+    return fileObject;
+}
+
 export {
     showGeneralErrorAlert,
     showSuccessAlert,
@@ -728,4 +773,7 @@ export {
     hasHeicOrHeifExtension,
     getConfirmModalPrompt,
     canvasFallback,
+    getFilesFromClipboardEvent,
+    cleanFileObject,
+    cleanFileObjectName,
 };
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
index b5bf9d34a67d..db552f6a7e80 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
@@ -58,8 +58,8 @@ type AttachmentPickerWithMenuItemsProps = {
     /** The personal details of the current user */
     currentUserPersonalDetails: OnyxTypes.PersonalDetails;
 
-    /** Callback to open the file in the modal */
-    displayFilesInModal: (files: FileObject[]) => void;
+    /** Callback when the attachment is picked */
+    onAttachmentPicked: (url: FileObject | FileObject[]) => void;
 
     /** Whether or not the full size composer is available */
     isFullComposerAvailable: boolean;
@@ -114,7 +114,7 @@ function AttachmentPickerWithMenuItems({
     report,
     currentUserPersonalDetails,
     reportParticipantIDs,
-    displayFilesInModal,
+    onAttachmentPicked,
     isFullComposerAvailable,
     isComposerFullSize,
     reportID,
@@ -338,7 +338,7 @@ function AttachmentPickerWithMenuItems({
                 const triggerAttachmentPicker = () => {
                     onTriggerAttachmentPicker();
                     openPicker({
-                        onPicked: (data) => displayFilesInModal(data),
+                        onPicked: onAttachmentPicked,
                         onCanceled: () => {
                             onCanceledAttachmentPicker?.();
                             setIsLoaderVisible(false);
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
index 43571aa64809..eb42e95d32eb 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
@@ -100,8 +100,8 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> & {
     /** The placeholder for the input */
     inputPlaceholder: string;
 
-    /** Function to display a file in a modal */
-    displayFilesInModal: (file: FileObject[]) => void;
+    /** Callback when a file is pasted */
+    onPasteFile: (file: FileObject | FileObject[]) => void;
 
     /** Whether the input is disabled, defaults to false */
     disabled?: boolean;
@@ -215,7 +215,7 @@ function ComposerWithSuggestions({
     setIsFullComposerAvailable,
     isMenuVisible,
     inputPlaceholder,
-    displayFilesInModal,
+    onPasteFile,
     disabled,
     setIsCommentEmpty,
     handleSendMessage,
@@ -810,9 +810,9 @@ function ComposerWithSuggestions({
                     }}
                     onBlur={onBlur}
                     onClick={setShouldBlockSuggestionCalcToFalse}
-                    onPasteFile={(file) => {
+                    onPasteFile={(files) => {
                         textInputRef.current?.blur();
-                        displayFilesInModal([file]);
+                        onPasteFile(files);
                     }}
                     onClear={onClear}
                     isDisabled={disabled}
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index b27a3e3a7180..b1fafdfa9ed7 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -7,7 +7,6 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {runOnUI, useSharedValue} from 'react-native-reanimated';
 import type {Emoji} from '@assets/emojis/types';
 import * as ActionSheetAwareScrollView from '@components/ActionSheetAwareScrollView';
-import AttachmentComposerModal from '@components/AttachmentComposerModal';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DropZoneUI from '@components/DropZone/DropZoneUI';
 import DualDropZone from '@components/DropZone/DualDropZone';
@@ -21,7 +20,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
-import useFilesValidation from '@hooks/useFilesValidation';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useHandleExceedMaxTaskTitleLength from '@hooks/useHandleExceedMaxTaskTitleLength';
 import useLocalize from '@hooks/useLocalize';
@@ -33,6 +31,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import DomUtils from '@libs/DomUtils';
 import {getDraftComment} from '@libs/DraftCommentUtils';
@@ -49,27 +48,21 @@ import {
     isGroupChat,
     isReportApproved,
     isReportTransactionThread,
-    isSelfDM,
     isSettled,
     temporary_getMoneyRequestOptions,
 } from '@libs/ReportUtils';
-import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
 import {getTransactionID, hasReceipt as hasReceiptTransactionUtils, isDistanceRequest, isManualDistanceRequest} from '@libs/TransactionUtils';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
-import Navigation from '@navigation/Navigation';
 import AgentZeroProcessingRequestIndicator from '@pages/home/report/AgentZeroProcessingRequestIndicator';
 import ParticipantLocalTime from '@pages/home/report/ParticipantLocalTime';
 import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator';
 import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import {hideEmojiPicker, isActive as isActiveEmojiPickerAction} from '@userActions/EmojiPickerAction';
-import {initMoneyRequest, replaceReceipt, setMoneyRequestParticipantsFromReport, setMoneyRequestReceipt} from '@userActions/IOU';
 import {addAttachmentWithComment, setIsComposerFullSize} from '@userActions/Report';
 import Timing from '@userActions/Timing';
-import {buildOptimisticTransactionAndCreateDraft} from '@userActions/TransactionEdit';
 import {isBlockedFromConcierge as isBlockedFromConciergeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -77,6 +70,7 @@ import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems';
 import ComposerWithSuggestions from './ComposerWithSuggestions';
 import type {ComposerRef, ComposerWithSuggestionsProps} from './ComposerWithSuggestions/ComposerWithSuggestions';
 import SendButton from './SendButton';
+import useAttachmentUploadValidation from './useAttachmentUploadValidation';
 
 type SuggestionsRef = {
     resetSuggestions: () => void;
@@ -318,6 +312,8 @@ function ReportActionCompose({
     const onAttachmentPreviewClose = useCallback(() => {
         updateShouldShowSuggestionMenuToFalse();
         setIsAttachmentPreviewActive(false);
+        // This enables Composer refocus when the attachments modal is closed by the browser navigation
+        ComposerFocusManager.setReadyToFocus();
     }, [updateShouldShowSuggestionMenuToFalse]);
 
     /**
@@ -484,74 +480,21 @@ function ReportActionCompose({
         [isComposerFullSize, reportID, debouncedValidate],
     );
 
-    const saveFileAndInitMoneyRequest = (files: FileObject[]) => {
-        if (files.length === 0) {
-            return;
-        }
-        if (shouldAddOrReplaceReceipt && transactionID) {
-            const source = URL.createObjectURL(files.at(0) as Blob);
-            replaceReceipt({transactionID, file: files.at(0) as File, source});
-        } else {
-            const initialTransaction = initMoneyRequest({
-                reportID,
-                newIouRequestType: CONST.IOU.REQUEST_TYPE.SCAN,
-                report,
-                parentReport: newParentReport,
-                currentDate,
-            });
-
-            files.forEach((file, index) => {
-                const source = URL.createObjectURL(file as Blob);
-                const newTransaction =
-                    index === 0
-                        ? (initialTransaction as Partial<OnyxTypes.Transaction>)
-                        : buildOptimisticTransactionAndCreateDraft({
-                              initialTransaction: initialTransaction as Partial<OnyxTypes.Transaction>,
-                              currentUserPersonalDetails,
-                              reportID,
-                          });
-                const newTransactionID = newTransaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
-                setMoneyRequestReceipt(newTransactionID, source, file.name ?? '', true, file.type);
-                setMoneyRequestParticipantsFromReport(newTransactionID, report);
-            });
-            Navigation.navigate(
-                ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
-                    CONST.IOU.ACTION.CREATE,
-                    isSelfDM(report) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT,
-                    CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
-                    reportID,
-                ),
-            );
-        }
-    };
-
-    const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(saveFileAndInitMoneyRequest);
-
-    const handleAddingReceipt = (e: DragEvent) => {
-        if (policy && shouldRestrictUserBillableActions(policy.id)) {
-            Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
-            return;
-        }
-        if (shouldAddOrReplaceReceipt && transactionID) {
-            const file = e?.dataTransfer?.files?.[0];
-            if (file) {
-                file.uri = URL.createObjectURL(file);
-                validateFiles([file], Array.from(e.dataTransfer?.items ?? []));
-                return;
-            }
-        }
-
-        const files = Array.from(e?.dataTransfer?.files ?? []);
-        if (files.length === 0) {
-            return;
-        }
-        files.forEach((file) => {
-            // eslint-disable-next-line no-param-reassign
-            file.uri = URL.createObjectURL(file);
-        });
-
-        validateFiles(files, Array.from(e.dataTransfer?.items ?? []));
-    };
+    const {validateAttachments, onReceiptDropped, PDFValidationComponent, ErrorModal} = useAttachmentUploadValidation({
+        policy,
+        reportID,
+        addAttachment,
+        onAttachmentPreviewClose,
+        exceededMaxLength,
+        shouldAddOrReplaceReceipt,
+        transactionID,
+        report,
+        newParentReport,
+        currentDate,
+        currentUserPersonalDetails,
+        isAttachmentPreviewActive,
+        setIsAttachmentPreviewActive,
+    });
 
     return (
         <View style={[shouldShowReportRecipientLocalTime && !isOffline && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
@@ -579,121 +522,81 @@ function ReportActionCompose({
                         ]}
                     >
                         {PDFValidationComponent}
-                        <AttachmentComposerModal
-                            headerTitle={translate('reportActionCompose.sendAttachment')}
-                            onConfirm={addAttachment}
-                            onModalShow={() => setIsAttachmentPreviewActive(true)}
-                            onModalHide={onAttachmentPreviewClose}
-                            shouldDisableSendButton={!!exceededMaxLength}
+                        <AttachmentPickerWithMenuItems
+                            onAttachmentPicked={(files) => validateAttachments({files})}
+                            reportID={reportID}
                             report={report}
-                        >
-                            {({displayFilesInModal}) => {
-                                const handleAttachmentDrop = (event: DragEvent) => {
-                                    if (isAttachmentPreviewActive) {
-                                        return;
-                                    }
-                                    if (event.dataTransfer?.files.length && event.dataTransfer?.files.length > 1) {
-                                        const files = Array.from(event.dataTransfer?.files).map((file) => {
-                                            // eslint-disable-next-line no-param-reassign
-                                            file.uri = URL.createObjectURL(file);
-                                            return file;
-                                        });
-                                        displayFilesInModal(files, Array.from(event.dataTransfer?.items ?? []));
-                                        return;
-                                    }
-
-                                    const data = event.dataTransfer?.files[0];
-                                    if (data) {
-                                        data.uri = URL.createObjectURL(data);
-                                        displayFilesInModal([data], Array.from(event.dataTransfer?.items ?? []));
-                                    }
-                                };
-
-                                return (
-                                    <>
-                                        <AttachmentPickerWithMenuItems
-                                            displayFilesInModal={displayFilesInModal}
-                                            reportID={reportID}
-                                            report={report}
-                                            currentUserPersonalDetails={currentUserPersonalDetails}
-                                            reportParticipantIDs={reportParticipantIDs}
-                                            isFullComposerAvailable={isFullComposerAvailable}
-                                            isComposerFullSize={isComposerFullSize}
-                                            disabled={isBlockedFromConcierge}
-                                            setMenuVisibility={setMenuVisibility}
-                                            isMenuVisible={isMenuVisible}
-                                            onTriggerAttachmentPicker={onTriggerAttachmentPicker}
-                                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
-                                            onAddActionPressed={onAddActionPressed}
-                                            onItemSelected={onItemSelected}
-                                            onCanceledAttachmentPicker={() => {
-                                                if (!shouldFocusInputOnScreenFocus) {
-                                                    return;
-                                                }
-                                                focus();
-                                            }}
-                                            actionButtonRef={actionButtonRef}
-                                            shouldDisableAttachmentItem={!!exceededMaxLength}
-                                        />
-                                        <ComposerWithSuggestions
-                                            ref={(ref) => {
-                                                composerRef.current = ref ?? undefined;
-                                                composerRefShared.set({
-                                                    clear: ref?.clear,
-                                                });
-                                            }}
-                                            suggestionsRef={suggestionsRef}
-                                            isNextModalWillOpenRef={isNextModalWillOpenRef}
-                                            isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered}
-                                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
-                                            reportID={reportID}
-                                            policyID={report?.policyID}
-                                            includeChronos={chatIncludesChronos(report)}
-                                            isGroupPolicyReport={isGroupPolicyReport}
-                                            lastReportAction={lastReportAction}
-                                            isMenuVisible={isMenuVisible}
-                                            inputPlaceholder={inputPlaceholder}
-                                            isComposerFullSize={isComposerFullSize}
-                                            setIsFullComposerAvailable={setIsFullComposerAvailable}
-                                            displayFilesInModal={displayFilesInModal}
-                                            onCleared={submitForm}
-                                            disabled={isBlockedFromConcierge}
-                                            setIsCommentEmpty={setIsCommentEmpty}
-                                            handleSendMessage={handleSendMessage}
-                                            shouldShowComposeInput={shouldShowComposeInput}
-                                            onFocus={onFocus}
-                                            onBlur={onBlur}
-                                            measureParentContainer={measureContainer}
-                                            onValueChange={onValueChange}
-                                            didHideComposerInput={didHideComposerInput}
-                                        />
-                                        {shouldDisplayDualDropZone && (
-                                            <DualDropZone
-                                                isEditing={shouldAddOrReplaceReceipt && hasReceipt}
-                                                onAttachmentDrop={handleAttachmentDrop}
-                                                onReceiptDrop={handleAddingReceipt}
-                                                shouldAcceptSingleReceipt={shouldAddOrReplaceReceipt}
-                                            />
-                                        )}
-                                        {!shouldDisplayDualDropZone && (
-                                            <DragAndDropConsumer onDrop={handleAttachmentDrop}>
-                                                <DropZoneUI
-                                                    icon={Expensicons.MessageInABottle}
-                                                    dropTitle={translate('dropzone.addAttachments')}
-                                                    dropStyles={styles.attachmentDropOverlay(true)}
-                                                    dropTextStyles={styles.attachmentDropText}
-                                                    dashedBorderStyles={[
-                                                        styles.dropzoneArea,
-                                                        styles.easeInOpacityTransition,
-                                                        styles.activeDropzoneDashedBorder(theme.attachmentDropBorderColorActive, true),
-                                                    ]}
-                                                />
-                                            </DragAndDropConsumer>
-                                        )}
-                                    </>
-                                );
+                            currentUserPersonalDetails={currentUserPersonalDetails}
+                            reportParticipantIDs={reportParticipantIDs}
+                            isFullComposerAvailable={isFullComposerAvailable}
+                            isComposerFullSize={isComposerFullSize}
+                            disabled={isBlockedFromConcierge}
+                            setMenuVisibility={setMenuVisibility}
+                            isMenuVisible={isMenuVisible}
+                            onTriggerAttachmentPicker={onTriggerAttachmentPicker}
+                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                            onAddActionPressed={onAddActionPressed}
+                            onItemSelected={onItemSelected}
+                            onCanceledAttachmentPicker={() => {
+                                if (!shouldFocusInputOnScreenFocus) {
+                                    return;
+                                }
+                                focus();
+                            }}
+                            actionButtonRef={actionButtonRef}
+                            shouldDisableAttachmentItem={!!exceededMaxLength}
+                        />
+                        <ComposerWithSuggestions
+                            ref={(ref) => {
+                                composerRef.current = ref ?? undefined;
+                                composerRefShared.set({
+                                    clear: ref?.clear,
+                                });
                             }}
-                        </AttachmentComposerModal>
+                            suggestionsRef={suggestionsRef}
+                            isNextModalWillOpenRef={isNextModalWillOpenRef}
+                            isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered}
+                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                            reportID={reportID}
+                            policyID={report?.policyID}
+                            includeChronos={chatIncludesChronos(report)}
+                            isGroupPolicyReport={isGroupPolicyReport}
+                            lastReportAction={lastReportAction}
+                            isMenuVisible={isMenuVisible}
+                            inputPlaceholder={inputPlaceholder}
+                            isComposerFullSize={isComposerFullSize}
+                            setIsFullComposerAvailable={setIsFullComposerAvailable}
+                            onPasteFile={(files) => validateAttachments({files})}
+                            onCleared={submitForm}
+                            disabled={isBlockedFromConcierge}
+                            setIsCommentEmpty={setIsCommentEmpty}
+                            handleSendMessage={handleSendMessage}
+                            shouldShowComposeInput={shouldShowComposeInput}
+                            onFocus={onFocus}
+                            onBlur={onBlur}
+                            measureParentContainer={measureContainer}
+                            onValueChange={onValueChange}
+                            didHideComposerInput={didHideComposerInput}
+                        />
+                        {shouldDisplayDualDropZone && (
+                            <DualDropZone
+                                isEditing={shouldAddOrReplaceReceipt && hasReceipt}
+                                onAttachmentDrop={(dragEvent) => validateAttachments({dragEvent})}
+                                onReceiptDrop={onReceiptDropped}
+                                shouldAcceptSingleReceipt={shouldAddOrReplaceReceipt}
+                            />
+                        )}
+                        {!shouldDisplayDualDropZone && (
+                            <DragAndDropConsumer onDrop={(dragEvent) => validateAttachments({dragEvent})}>
+                                <DropZoneUI
+                                    icon={Expensicons.MessageInABottle}
+                                    dropTitle={translate('dropzone.addAttachments')}
+                                    dropStyles={styles.attachmentDropOverlay(true)}
+                                    dropTextStyles={styles.attachmentDropText}
+                                    dashedBorderStyles={[styles.dropzoneArea, styles.easeInOpacityTransition, styles.activeDropzoneDashedBorder(theme.attachmentDropBorderColorActive, true)]}
+                                />
+                            </DragAndDropConsumer>
+                        )}
                         {canUseTouchScreen() && isMediumScreenWidth ? null : (
                             <EmojiPickerButton
                                 isDisabled={isBlockedFromConcierge}
diff --git a/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts b/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts
new file mode 100644
index 000000000000..72ddb99fa2cf
--- /dev/null
+++ b/src/pages/home/report/ReportActionCompose/useAttachmentUploadValidation.ts
@@ -0,0 +1,203 @@
+import {useCallback, useContext, useRef} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {CurrentUserPersonalDetails} from '@components/CurrentUserPersonalDetailsProvider';
+import useFilesValidation from '@hooks/useFilesValidation';
+import useLocalize from '@hooks/useLocalize';
+import {cleanFileObject, cleanFileObjectName, getFilesFromClipboardEvent} from '@libs/fileDownload/FileUtils';
+import {isSelfDM} from '@libs/ReportUtils';
+import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils';
+import Navigation from '@navigation/Navigation';
+import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
+import {initMoneyRequest, replaceReceipt, setMoneyRequestParticipantsFromReport, setMoneyRequestReceipt} from '@userActions/IOU';
+import {buildOptimisticTransactionAndCreateDraft} from '@userActions/TransactionEdit';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import type * as OnyxTypes from '@src/types/onyx';
+
+type AttachmentUploadValidationProps = {
+    policy: OnyxEntry<OnyxTypes.Policy>;
+    reportID: string;
+    addAttachment: (file: FileObject | FileObject[]) => void;
+    onAttachmentPreviewClose: () => void;
+    exceededMaxLength: boolean | number | null;
+    shouldAddOrReplaceReceipt: boolean;
+    transactionID: string | undefined;
+    report: OnyxEntry<OnyxTypes.Report>;
+    newParentReport: OnyxEntry<OnyxTypes.Report>;
+    currentDate: string | undefined;
+    currentUserPersonalDetails: CurrentUserPersonalDetails;
+    isAttachmentPreviewActive: boolean;
+    setIsAttachmentPreviewActive: (isActive: boolean) => void;
+};
+
+function useAttachmentUploadValidation({
+    policy,
+    reportID,
+    addAttachment,
+    onAttachmentPreviewClose,
+    exceededMaxLength,
+    shouldAddOrReplaceReceipt,
+    transactionID,
+    report,
+    newParentReport,
+    currentDate,
+    currentUserPersonalDetails,
+    isAttachmentPreviewActive,
+    setIsAttachmentPreviewActive,
+}: AttachmentUploadValidationProps) {
+    const {translate} = useLocalize();
+
+    const reportAttachmentsContext = useContext(AttachmentModalContext);
+    const showAttachmentModalScreen = useCallback(
+        (file: FileObject | FileObject[], dataTransferItems?: DataTransferItem[]) => {
+            reportAttachmentsContext.setCurrentAttachment<typeof SCREENS.REPORT_ADD_ATTACHMENT>({
+                reportID,
+                file,
+                dataTransferItems,
+                headerTitle: translate('reportActionCompose.sendAttachment'),
+                onConfirm: addAttachment,
+                onShow: () => setIsAttachmentPreviewActive(true),
+                onClose: onAttachmentPreviewClose,
+                shouldDisableSendButton: !!exceededMaxLength,
+            });
+            Navigation.navigate(ROUTES.REPORT_ADD_ATTACHMENT.getRoute(reportID));
+        },
+        [addAttachment, exceededMaxLength, onAttachmentPreviewClose, reportAttachmentsContext, reportID, setIsAttachmentPreviewActive, translate],
+    );
+
+    const attachmentUploadType = useRef<'receipt' | 'attachment'>(undefined);
+    const onFilesValidated = (files: FileObject[], dataTransferItems: DataTransferItem[]) => {
+        if (files.length === 0) {
+            return;
+        }
+
+        if (attachmentUploadType.current === 'attachment') {
+            showAttachmentModalScreen(files, dataTransferItems);
+            return;
+        }
+
+        if (shouldAddOrReplaceReceipt && transactionID) {
+            const source = URL.createObjectURL(files.at(0) as Blob);
+            replaceReceipt({transactionID, file: files.at(0) as File, source});
+            return;
+        }
+
+        const initialTransaction = initMoneyRequest({
+            reportID,
+            newIouRequestType: CONST.IOU.REQUEST_TYPE.SCAN,
+            report,
+            parentReport: newParentReport,
+            currentDate,
+        });
+
+        files.forEach((file, index) => {
+            const source = URL.createObjectURL(file as Blob);
+            const newTransaction =
+                index === 0
+                    ? (initialTransaction as Partial<OnyxTypes.Transaction>)
+                    : buildOptimisticTransactionAndCreateDraft({
+                          initialTransaction: initialTransaction as Partial<OnyxTypes.Transaction>,
+                          currentUserPersonalDetails,
+                          reportID,
+                      });
+            const newTransactionID = newTransaction?.transactionID ?? CONST.IOU.OPTIMISTIC_TRANSACTION_ID;
+            setMoneyRequestReceipt(newTransactionID, source, file.name ?? '', true);
+            setMoneyRequestParticipantsFromReport(newTransactionID, report);
+        });
+        Navigation.navigate(
+            ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
+                CONST.IOU.ACTION.CREATE,
+                isSelfDM(report) ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT,
+                CONST.IOU.OPTIMISTIC_TRANSACTION_ID,
+                reportID,
+            ),
+        );
+    };
+
+    const {validateFiles, PDFValidationComponent, ErrorModal} = useFilesValidation(onFilesValidated, false);
+
+    const validateAttachments = useCallback(
+        ({dragEvent, files}: {dragEvent?: DragEvent; files?: FileObject | FileObject[]}) => {
+            if (isAttachmentPreviewActive) {
+                return;
+            }
+
+            let extractedFiles: FileObject[] = [];
+
+            if (!files) {
+                if (!dragEvent) {
+                    return;
+                }
+
+                extractedFiles = getFilesFromClipboardEvent(dragEvent);
+            } else {
+                extractedFiles = Array.isArray(files) ? files : [files];
+            }
+
+            const dataTransferItems = Array.from(dragEvent?.dataTransfer?.items ?? []);
+            if (extractedFiles.length === 0) {
+                return;
+            }
+
+            const validIndices: number[] = [];
+            const fileObjects = extractedFiles
+                .map((item, index) => {
+                    const fileObject = cleanFileObject(item);
+                    const cleanedFileObject = cleanFileObjectName(fileObject);
+                    if (cleanedFileObject !== null) {
+                        validIndices.push(index);
+                    }
+                    return cleanedFileObject;
+                })
+                .filter((fileObject) => fileObject !== null);
+
+            if (!fileObjects.length) {
+                return;
+            }
+
+            // Create a filtered items array that matches the fileObjects
+            const filteredItems = dataTransferItems && validIndices.length > 0 ? validIndices.map((index) => dataTransferItems.at(index) ?? ({} as DataTransferItem)) : undefined;
+
+            attachmentUploadType.current = 'attachment';
+            validateFiles(fileObjects, filteredItems);
+        },
+        [isAttachmentPreviewActive, validateFiles],
+    );
+
+    const onReceiptDropped = useCallback(
+        (e: DragEvent) => {
+            if (policy && shouldRestrictUserBillableActions(policy.id)) {
+                Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id));
+                return;
+            }
+
+            const files = getFilesFromClipboardEvent(e);
+            const items = Array.from(e.dataTransfer?.items ?? []);
+
+            if (shouldAddOrReplaceReceipt && transactionID) {
+                const file = files.at(0);
+                if (!file) {
+                    return;
+                }
+
+                attachmentUploadType.current = 'receipt';
+                validateFiles([file], items);
+            }
+
+            attachmentUploadType.current = 'receipt';
+            validateFiles(files, items);
+        },
+        [policy, shouldAddOrReplaceReceipt, transactionID, validateFiles],
+    );
+
+    return {
+        validateAttachments,
+        onReceiptDropped,
+        PDFValidationComponent,
+        ErrorModal,
+    };
+}
+
+export default useAttachmentUploadValidation;
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
index 1cc64a6c1465..41b2cadd277a 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/index.tsx
@@ -1,5 +1,5 @@
-import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {InteractionManager, Keyboard, View} from 'react-native';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import Animated, {FadeIn, LayoutAnimationConfig, useSharedValue} from 'react-native-reanimated';
 import AttachmentCarousel from '@components/Attachments/AttachmentCarousel';
@@ -9,11 +9,9 @@ import useAttachmentErrors from '@components/Attachments/AttachmentView/useAttac
 import type {Attachment} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
-import ConfirmModal from '@components/ConfirmModal';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderGap from '@components/HeaderGap';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import useLocalize from '@hooks/useLocalize';
@@ -21,75 +19,60 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import fileDownload from '@libs/fileDownload';
-import {getFileName} from '@libs/fileDownload/FileUtils';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import Navigation from '@libs/Navigation/Navigation';
 import {getOriginalMessage, getReportAction, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {hasEReceipt, hasMissingSmartscanFields, hasReceipt, hasReceiptSource, isReceiptBeingScanned} from '@libs/TransactionUtils';
 import type {AvatarSource} from '@libs/UserUtils';
 import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
 import variables from '@styles/variables';
-import {detachReceipt} from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import viewRef from '@src/types/utils/viewRef';
 import {AttachmentStateContext} from './AttachmentStateContextProvider';
 import type {AttachmentModalBaseContentProps} from './types';
 
 function AttachmentModalBaseContent({
-    source = '',
-    attachmentID,
+    source: sourceProp = '',
     fallbackSource,
-    file: fileProp,
+    file: filesProp,
+    fileToDisplayIndex = 0,
     originalFileName = '',
+    attachmentID,
     isAuthTokenRequired = false,
     maybeIcon = false,
-    headerTitle: headerTitleProp,
     type,
-    draftTransactionID,
-    iouAction,
-    iouType: iouTypeProp,
     accountID,
     attachmentLink = '',
-    allowDownload = false,
-    isTrackExpenseAction = false,
     report,
     reportID,
-    isReceiptAttachment = false,
     isWorkspaceAvatar = false,
-    canEditReceipt = false,
-    canDeleteReceipt = false,
+    headerTitle,
+    threeDotsMenuItems: threeDotsMenuItemsProp,
     isLoading = false,
     shouldShowNotFoundPage = false,
+    shouldShowCarousel = true,
     shouldDisableSendButton = false,
-    shouldDisplayHelpButton = true,
-    isDeleteReceiptConfirmModalVisible = false,
-    isAttachmentInvalid = false,
-    attachmentInvalidReason,
-    attachmentInvalidReasonTitle,
+    shouldDisplayHelpButton = false,
     submitRef,
+    onDownloadAttachment,
     onClose,
     onConfirm,
-    onConfirmModalClose,
-    onRequestDeleteReceipt,
-    onDeleteReceipt,
+    AttachmentContent,
     onCarouselAttachmentChange = () => {},
-    onValidateFile,
 }: AttachmentModalBaseContentProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
 
     // This logic is used to ensure that the source is updated when the source changes and
     // that the initially provided source is always used as a fallback.
-    const [sourceState, setSourceState] = useState<AvatarSource>(() => source);
-    const sourceForAttachmentView = sourceState || source;
+    const [source, setSource] = useState<AvatarSource>(() => sourceProp);
+    const isLocalSource = typeof source === 'string' && /^file:|^blob:/.test(source);
+    const sourceForAttachmentView = source || sourceProp;
     useEffect(() => {
-        setSourceState(() => source);
-    }, [source]);
+        setSource(() => sourceProp);
+    }, [sourceProp]);
 
     const [isAuthTokenRequiredState, setIsAuthTokenRequiredState] = useState(isAuthTokenRequired);
     useEffect(() => {
@@ -97,58 +80,60 @@ function AttachmentModalBaseContent({
     }, [isAuthTokenRequired]);
 
     const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
-    const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
-    const iouType = useMemo(() => iouTypeProp ?? (isTrackExpenseAction ? CONST.IOU.TYPE.TRACK : CONST.IOU.TYPE.SUBMIT), [isTrackExpenseAction, iouTypeProp]);
     const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const transactionID = (isMoneyRequestAction(parentReportAction) && getOriginalMessage(parentReportAction)?.IOUTransactionID) || CONST.DEFAULT_NUMBER_ID;
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {canBeMissing: true});
     const [currentAttachmentLink, setCurrentAttachmentLink] = useState(attachmentLink);
 
-    const {setAttachmentError, isErrorInAttachment, clearAttachmentErrors} = useAttachmentErrors();
-    useEffect(() => {
-        return () => {
-            clearAttachmentErrors();
-        };
-    }, [clearAttachmentErrors]);
-
     const fallbackFile = useMemo(() => (originalFileName ? {name: originalFileName} : undefined), [originalFileName]);
-    const [file, setFile] = useState<FileObject | undefined>(() => fileProp ?? fallbackFile);
-    useEffect(() => {
-        if (!fileProp) {
-            return;
+    const [files, setFilesInternal] = useState<FileObject | FileObject[] | undefined>();
+    const [isMultipleFiles, setIsMultipleFiles] = useState<boolean>(() => Array.isArray(files));
+    const fileToDisplay = useMemo(() => {
+        if (isMultipleFiles) {
+            return (files as FileObject[])?.at(fileToDisplayIndex);
         }
+        return files as FileObject;
+    }, [files, fileToDisplayIndex, isMultipleFiles]);
 
-        if (onValidateFile) {
-            onValidateFile?.(fileProp, setFile);
+    const setFile = useCallback((newFile: FileObject | FileObject[] | undefined) => {
+        if (Array.isArray(newFile)) {
+            setFilesInternal(newFile);
+            setIsMultipleFiles(true);
         } else {
-            setFile(fileProp ?? fallbackFile);
+            setFilesInternal(newFile);
+            setIsMultipleFiles(false);
         }
-    }, [fileProp, fallbackFile, onValidateFile]);
+    }, []);
 
     useEffect(() => {
-        setFile(fallbackFile);
-    }, [fallbackFile]);
-
-    const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
+        if (!filesProp) {
+            return;
+        }
 
-    const isLocalSource = typeof sourceState === 'string' && /^file:|^blob:/.test(sourceState);
+        setFile(filesProp ?? fallbackFile);
+    }, [filesProp, fallbackFile, setFile]);
 
     /**
      * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
      */
     const onNavigate = useCallback(
         (attachment: Attachment) => {
-            setSourceState(attachment.source);
+            setSource(attachment.source);
             setFile(attachment.file);
             setIsAuthTokenRequiredState(attachment.isAuthTokenRequired ?? false);
             onCarouselAttachmentChange(attachment);
             setCurrentAttachmentLink(attachment?.attachmentLink ?? '');
         },
-        [onCarouselAttachmentChange],
+        [onCarouselAttachmentChange, setFile],
     );
 
+    const threeDotsMenuItems = useMemo(
+        () => (typeof threeDotsMenuItemsProp === 'function' ? threeDotsMenuItemsProp({file: fileToDisplay, source, isLocalSource}) : (threeDotsMenuItemsProp ?? [])),
+        [fileToDisplay, isLocalSource, source, threeDotsMenuItemsProp],
+    );
+
+    const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = useState(true);
     const setDownloadButtonVisibility = useCallback(
         (isButtonVisible: boolean) => {
             if (isDownloadButtonReadyToBeShown === isButtonVisible) {
@@ -159,25 +144,6 @@ function AttachmentModalBaseContent({
         [isDownloadButtonReadyToBeShown],
     );
 
-    /**
-     * Download the currently viewed attachment.
-     */
-    const downloadAttachment = useCallback(() => {
-        let sourceURL = sourceState;
-        if (isAuthTokenRequiredState && typeof sourceURL === 'string') {
-            sourceURL = addEncryptedAuthTokenToURL(sourceURL);
-        }
-
-        if (typeof sourceURL === 'string') {
-            const fileName = type === CONST.ATTACHMENT_TYPE.SEARCH ? getFileName(`${sourceURL}`) : file?.name;
-            fileDownload(sourceURL, fileName ?? '', undefined, undefined, undefined, undefined, undefined, !draftTransactionID);
-        }
-
-        // At ios, if the keyboard is open while opening the attachment, then after downloading
-        // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
-        Keyboard.dismiss();
-    }, [sourceState, isAuthTokenRequiredState, type, file?.name, draftTransactionID]);
-
     /**
      * Execute the onConfirm callback and close the modal.
      */
@@ -189,21 +155,12 @@ function AttachmentModalBaseContent({
         }
 
         if (onConfirm) {
-            onConfirm(Object.assign(file ?? {}, {source: sourceState} as FileObject));
+            onConfirm(Object.assign(files ?? {}, {source} as FileObject));
         }
 
         onClose?.();
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isConfirmButtonDisabled, onConfirm, file, sourceState]);
-
-    /**
-     * Detach the receipt and close the modal.
-     */
-    const deleteAndCloseModal = useCallback(() => {
-        detachReceipt(transaction?.transactionID);
-        onDeleteReceipt?.();
-        onClose?.();
-    }, [onClose, onDeleteReceipt, transaction?.transactionID]);
+    }, [isConfirmButtonDisabled, onConfirm, files, source]);
 
     // Close the modal when the escape key is pressed
     useEffect(() => {
@@ -222,94 +179,22 @@ function AttachmentModalBaseContent({
         return unsubscribeEscapeKey;
     }, [onClose]);
 
-    const threeDotsMenuItems = useMemo(() => {
-        if (!isReceiptAttachment) {
-            return [];
-        }
-
-        const menuItems = [];
-        if (canEditReceipt) {
-            menuItems.push({
-                icon: Expensicons.Camera,
-                text: translate('common.replace'),
-                onSelected: () => {
-                    const goToScanScreen = () => {
-                        // eslint-disable-next-line deprecation/deprecation
-                        InteractionManager.runAfterInteractions(() => {
-                            Navigation.navigate(
-                                ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
-                                    iouAction ?? CONST.IOU.ACTION.EDIT,
-                                    iouType,
-                                    draftTransactionID ?? transaction?.transactionID,
-                                    report?.reportID,
-                                    Navigation.getActiveRoute(),
-                                ),
-                            );
-                        });
-                    };
-
-                    onClose?.({shouldCallDirectly: true, onAfterClose: goToScanScreen});
-                },
-            });
-        }
-        if ((!isOffline && allowDownload && !isLocalSource) || !!draftTransactionID) {
-            menuItems.push({
-                icon: Expensicons.Download,
-                text: translate('common.download'),
-                onSelected: () => downloadAttachment(),
-            });
-        }
-
-        const hasOnlyEReceipt = hasEReceipt(transaction) && !hasReceiptSource(transaction);
-        if (!hasOnlyEReceipt && hasReceipt(transaction) && !isReceiptBeingScanned(transaction) && canDeleteReceipt && !hasMissingSmartscanFields(transaction)) {
-            menuItems.push({
-                icon: Expensicons.Trashcan,
-                text: translate('receipt.deleteReceipt'),
-                onSelected: onRequestDeleteReceipt,
-                shouldCallAfterModalHide: true,
-            });
-        }
-        return menuItems;
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isReceiptAttachment, transaction, file, sourceState, iouType]);
-
-    // There are a few things that shouldn't be set until we absolutely know if the file is a receipt or an attachment.
-    // props.isReceiptAttachment will be null until its certain what the file is, in which case it will then be true|false.
-    const headerTitle = useMemo(() => headerTitleProp ?? translate(isReceiptAttachment ? 'common.receipt' : 'common.attachment'), [headerTitleProp, isReceiptAttachment, translate]);
-    const shouldShowThreeDotsButton = useMemo(() => isReceiptAttachment && threeDotsMenuItems.length !== 0, [isReceiptAttachment, threeDotsMenuItems.length]);
+    const {setAttachmentError, isErrorInAttachment, clearAttachmentErrors} = useAttachmentErrors();
+    useEffect(() => {
+        return () => {
+            clearAttachmentErrors();
+        };
+    }, [clearAttachmentErrors]);
 
     const {isAttachmentLoaded} = useContext(AttachmentStateContext);
     const shouldShowDownloadButton = useMemo(() => {
-        if ((!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) && !isErrorInAttachment(sourceState)) {
-            return allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource && isAttachmentLoaded?.(sourceState);
+        const isValidContext = !isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH;
+        if (!isValidContext || isErrorInAttachment(source)) {
+            return false;
         }
-        return false;
-    }, [
-        allowDownload,
-        isDownloadButtonReadyToBeShown,
-        isErrorInAttachment,
-        isLocalSource,
-        isOffline,
-        isReceiptAttachment,
-        report,
-        shouldShowNotFoundPage,
-        sourceState,
-        type,
-        isAttachmentLoaded,
-    ]);
 
-    const isPDFLoadError = useRef(false);
-    const onPdfLoadError = useCallback(() => {
-        isPDFLoadError.current = true;
-        onClose?.();
-    }, [isPDFLoadError, onClose]);
-
-    const onInvalidReasonModalHide = useCallback(() => {
-        if (!isPDFLoadError.current) {
-            return;
-        }
-        isPDFLoadError.current = false;
-    }, [isPDFLoadError]);
+        return !!onDownloadAttachment && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isOffline && !isLocalSource && isAttachmentLoaded?.(source);
+    }, [isAttachmentLoaded, isDownloadButtonReadyToBeShown, isErrorInAttachment, isLocalSource, isOffline, onDownloadAttachment, report, shouldShowNotFoundPage, source, type]);
 
     // We need to pass a shared value of type boolean to the context, so `falseSV` acts as a default value.
     const falseSV = useSharedValue(false);
@@ -328,139 +213,145 @@ function AttachmentModalBaseContent({
         [onClose, falseSV, sourceForAttachmentView, setAttachmentError],
     );
 
-    return (
-        <>
-            <GestureHandlerRootView style={styles.flex1}>
-                {shouldUseNarrowLayout && <HeaderGap />}
-                <HeaderWithBackButton
-                    shouldMinimizeMenuButton
-                    title={headerTitle}
-                    shouldShowBorderBottom
-                    shouldShowDownloadButton={shouldShowDownloadButton}
-                    shouldDisplayHelpButton={shouldDisplayHelpButton}
-                    onDownloadButtonPress={() => downloadAttachment()}
-                    shouldShowCloseButton={!shouldUseNarrowLayout}
-                    shouldShowBackButton={shouldUseNarrowLayout}
-                    onBackButtonPress={onClose}
-                    onCloseButtonPress={onClose}
-                    shouldShowThreeDotsButton={shouldShowThreeDotsButton}
-                    threeDotsAnchorAlignment={{
-                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                    }}
-                    shouldSetModalVisibility={false}
-                    threeDotsMenuItems={threeDotsMenuItems}
-                    shouldOverlayDots
-                    subTitleLink={currentAttachmentLink ?? ''}
+    const shouldDisplayContent = !shouldShowNotFoundPage && !isLoading;
+    const Content = useMemo(() => {
+        if (AttachmentContent) {
+            return (
+                <AttachmentContent
+                    fileToDisplay={fileToDisplay}
+                    files={files}
                 />
-                <View style={styles.imageModalImageCenterContainer}>
-                    {isLoading && <FullScreenLoadingIndicator testID="attachment-loading-spinner" />}
-                    {shouldShowNotFoundPage && !isLoading && (
-                        <BlockingView
-                            icon={Illustrations.ToddBehindCloud}
-                            iconWidth={variables.modalTopIconWidth}
-                            iconHeight={variables.modalTopIconHeight}
-                            title={translate('notFound.notHere')}
-                            subtitle={translate('notFound.pageNotFound')}
-                            linkTranslationKey="notFound.goBackHome"
-                            onLinkPress={onClose}
-                        />
-                    )}
-                    {!shouldShowNotFoundPage &&
-                        !isLoading &&
-                        // We shouldn't show carousel arrow in search result attachment
-                        (!isEmptyObject(report) && !isReceiptAttachment && type !== CONST.ATTACHMENT_TYPE.SEARCH ? (
-                            <AttachmentCarousel
-                                accountID={accountID}
-                                type={type}
-                                attachmentID={attachmentID}
-                                report={report}
-                                onNavigate={onNavigate}
-                                onClose={onClose}
-                                source={source}
-                                setDownloadButtonVisibility={setDownloadButtonVisibility}
-                                attachmentLink={currentAttachmentLink}
-                                onAttachmentError={setAttachmentError}
-                            />
-                        ) : (
-                            !!sourceForAttachmentView && (
-                                <AttachmentCarouselPagerContext.Provider value={context}>
-                                    <AttachmentView
-                                        containerStyles={[styles.mh5]}
-                                        source={sourceForAttachmentView}
-                                        isAuthTokenRequired={isAuthTokenRequiredState}
-                                        file={file}
-                                        onToggleKeyboard={setIsConfirmButtonDisabled}
-                                        onPDFLoadError={() => onPdfLoadError?.()}
-                                        isWorkspaceAvatar={isWorkspaceAvatar}
-                                        maybeIcon={maybeIcon}
-                                        fallbackSource={fallbackSource}
-                                        isUsedInAttachmentModal
-                                        transactionID={transaction?.transactionID}
-                                        isUploaded={!isEmptyObject(report)}
-                                        reportID={reportID ?? (!isEmptyObject(report) ? report.reportID : undefined)}
-                                    />
-                                </AttachmentCarouselPagerContext.Provider>
-                            )
-                        ))}
-                </View>
-                {/* If we have an onConfirm method show a confirmation button */}
-                {!!onConfirm && !isConfirmButtonDisabled && (
-                    <LayoutAnimationConfig skipEntering>
-                        {!!onConfirm && !isConfirmButtonDisabled && (
-                            <SafeAreaConsumer>
-                                {({safeAreaPaddingBottomStyle}) => (
-                                    <Animated.View
-                                        style={safeAreaPaddingBottomStyle}
-                                        entering={FadeIn}
-                                    >
-                                        <Button
-                                            ref={submitRef ? viewRef(submitRef) : undefined}
-                                            success
-                                            large
-                                            style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
-                                            textStyles={[styles.buttonConfirmText]}
-                                            text={translate('common.send')}
-                                            onPress={submitAndClose}
-                                            isDisabled={isConfirmButtonDisabled || shouldDisableSendButton}
-                                            pressOnEnter
-                                        />
-                                    </Animated.View>
-                                )}
-                            </SafeAreaConsumer>
-                        )}
-                    </LayoutAnimationConfig>
-                )}
-                {isReceiptAttachment && (
-                    <ConfirmModal
-                        title={translate('receipt.deleteReceipt')}
-                        isVisible={isDeleteReceiptConfirmModalVisible}
-                        onConfirm={deleteAndCloseModal}
-                        onCancel={onConfirmModalClose}
-                        prompt={translate('receipt.deleteConfirmation')}
-                        confirmText={translate('common.delete')}
-                        cancelText={translate('common.cancel')}
-                        danger
+            );
+        }
+
+        return !isEmptyObject(report) && shouldShowCarousel && type !== CONST.ATTACHMENT_TYPE.SEARCH ? (
+            <AttachmentCarousel
+                accountID={accountID}
+                type={type}
+                attachmentID={attachmentID}
+                report={report}
+                onNavigate={onNavigate}
+                onClose={onClose}
+                source={sourceProp}
+                setDownloadButtonVisibility={setDownloadButtonVisibility}
+                attachmentLink={currentAttachmentLink}
+                onAttachmentError={setAttachmentError}
+            />
+        ) : (
+            !!sourceForAttachmentView && (
+                <AttachmentCarouselPagerContext.Provider value={context}>
+                    <AttachmentView
+                        containerStyles={[styles.mh5]}
+                        source={sourceForAttachmentView}
+                        isAuthTokenRequired={isAuthTokenRequiredState}
+                        file={fileToDisplay}
+                        onToggleKeyboard={setIsConfirmButtonDisabled}
+                        isWorkspaceAvatar={isWorkspaceAvatar}
+                        maybeIcon={maybeIcon}
+                        fallbackSource={fallbackSource}
+                        isUsedInAttachmentModal
+                        transactionID={transaction?.transactionID}
+                        isUploaded={!isEmptyObject(report)}
+                        reportID={reportID ?? (!isEmptyObject(report) ? report.reportID : undefined)}
+                    />
+                </AttachmentCarouselPagerContext.Provider>
+            )
+        );
+    }, [
+        AttachmentContent,
+        accountID,
+        attachmentID,
+        context,
+        currentAttachmentLink,
+        fallbackSource,
+        fileToDisplay,
+        files,
+        isAuthTokenRequiredState,
+        isWorkspaceAvatar,
+        maybeIcon,
+        onClose,
+        onNavigate,
+        report,
+        reportID,
+        setAttachmentError,
+        setDownloadButtonVisibility,
+        shouldShowCarousel,
+        sourceForAttachmentView,
+        sourceProp,
+        styles.mh5,
+        transaction?.transactionID,
+        type,
+    ]);
+
+    return (
+        <GestureHandlerRootView style={styles.flex1}>
+            {shouldUseNarrowLayout && <HeaderGap />}
+            <HeaderWithBackButton
+                shouldMinimizeMenuButton
+                title={headerTitle ?? translate('common.attachment')}
+                shouldShowBorderBottom
+                shouldShowDownloadButton={shouldShowDownloadButton}
+                shouldDisplayHelpButton={shouldDisplayHelpButton}
+                onDownloadButtonPress={() => onDownloadAttachment?.({file: fileToDisplay, source})}
+                shouldShowCloseButton={!shouldUseNarrowLayout}
+                shouldShowBackButton={shouldUseNarrowLayout}
+                onBackButtonPress={onClose}
+                onCloseButtonPress={onClose}
+                shouldShowThreeDotsButton={threeDotsMenuItems.length > 0}
+                threeDotsMenuItems={threeDotsMenuItems}
+                threeDotsAnchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                }}
+                shouldSetModalVisibility={false}
+                shouldOverlayDots
+                subTitleLink={currentAttachmentLink ?? ''}
+            />
+            <View style={styles.imageModalImageCenterContainer}>
+                {isLoading && <FullScreenLoadingIndicator testID="attachment-loading-spinner" />}
+                {shouldShowNotFoundPage && !isLoading && (
+                    <BlockingView
+                        icon={Illustrations.ToddBehindCloud}
+                        iconWidth={variables.modalTopIconWidth}
+                        iconHeight={variables.modalTopIconHeight}
+                        title={translate('notFound.notHere')}
+                        subtitle={translate('notFound.pageNotFound')}
+                        linkTranslationKey="notFound.goBackHome"
+                        onLinkPress={onClose}
                     />
                 )}
-            </GestureHandlerRootView>
-            {!isReceiptAttachment && (
-                <ConfirmModal
-                    title={attachmentInvalidReasonTitle ? translate(attachmentInvalidReasonTitle) : ''}
-                    onConfirm={() => onConfirmModalClose?.()}
-                    onCancel={onConfirmModalClose}
-                    isVisible={isAttachmentInvalid}
-                    prompt={attachmentInvalidReason ? translate(attachmentInvalidReason) : ''}
-                    confirmText={translate('common.close')}
-                    shouldShowCancelButton={false}
-                    onModalHide={onInvalidReasonModalHide}
-                />
+                {shouldDisplayContent && Content}
+            </View>
+            {/* If we have an onConfirm method show a confirmation button */}
+            {!!onConfirm && !isConfirmButtonDisabled && (
+                <LayoutAnimationConfig skipEntering>
+                    {!!onConfirm && !isConfirmButtonDisabled && (
+                        <SafeAreaConsumer>
+                            {({safeAreaPaddingBottomStyle}) => (
+                                <Animated.View
+                                    style={safeAreaPaddingBottomStyle}
+                                    entering={FadeIn}
+                                >
+                                    <Button
+                                        ref={submitRef ? viewRef(submitRef) : undefined}
+                                        success
+                                        large
+                                        style={[styles.buttonConfirm, shouldUseNarrowLayout ? {} : styles.attachmentButtonBigScreen]}
+                                        textStyles={[styles.buttonConfirmText]}
+                                        text={translate('common.send')}
+                                        onPress={submitAndClose}
+                                        isDisabled={isConfirmButtonDisabled || shouldDisableSendButton}
+                                        pressOnEnter
+                                    />
+                                </Animated.View>
+                            )}
+                        </SafeAreaConsumer>
+                    )}
+                </LayoutAnimationConfig>
             )}
-        </>
+        </GestureHandlerRootView>
     );
 }
 AttachmentModalBaseContent.displayName = 'AttachmentModalBaseContent';
 
 export default memo(AttachmentModalBaseContent);
-
-export type {AttachmentModalBaseContentProps};
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
index bfa8892f9544..0aaf94a73b92 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types.ts
@@ -3,20 +3,36 @@ import type {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment} from '@components/Attachments/types';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type {AvatarSource} from '@libs/UserUtils';
 import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
-import type {IOUAction, IOUType} from '@src/CONST';
 import type CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import type * as OnyxTypes from '@src/types/onyx';
 
-type OnValidateFileCallback = (file: FileObject | undefined, setFile: (file: FileObject | undefined) => void) => void;
-
 type AttachmentModalOnCloseOptions = {
     shouldCallDirectly?: boolean;
     onAfterClose?: () => void;
 };
 
+type AttachmentModalContentData = {
+    source: AvatarSource;
+    file: FileObject | undefined;
+};
+
+type ThreeDotsMenuItemGeneratorProps = AttachmentModalContentData & {
+    isLocalSource: boolean;
+};
+
+type ThreeDotsMenuItemGenerator = (props: ThreeDotsMenuItemGeneratorProps) => PopoverMenuItem[];
+
+type DownloadAttachmentCallback = (props: AttachmentModalContentData) => void;
+
+type AttachmentContentProps = {
+    fileToDisplay: FileObject | undefined;
+    files: FileObject | FileObject[] | undefined;
+};
+type AttachmentContent = React.FC<AttachmentContentProps>;
+
 type AttachmentModalBaseContentProps = {
     /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
     source?: AvatarSource;
@@ -28,7 +44,10 @@ type AttachmentModalBaseContentProps = {
     fallbackSource?: AvatarSource;
 
     /** Optional file object to be used for the attachment. If not passed in via props must be specified when modal is opened. */
-    file?: FileObject;
+    file?: FileObject | FileObject[];
+
+    /** The index of the file to display in the carousel */
+    fileToDisplayIndex?: number;
 
     /** Optional original filename when uploading */
     originalFileName?: string;
@@ -36,15 +55,12 @@ type AttachmentModalBaseContentProps = {
     /** Whether source url requires authentication */
     isAuthTokenRequired?: boolean;
 
-    /** Determines if download Button should be shown or not */
-    allowDownload?: boolean;
-
-    /** Determines if the receipt comes from track expense action */
-    isTrackExpenseAction?: boolean;
-
     /** Title shown in the header of the modal */
     headerTitle?: string;
 
+    /** The menu items for the three dots button */
+    threeDotsMenuItems?: PopoverMenuItem[] | ThreeDotsMenuItemGenerator;
+
     /** The report that has this attachment */
     report?: OnyxEntry<OnyxTypes.Report>;
 
@@ -54,83 +70,60 @@ type AttachmentModalBaseContentProps = {
     /** The type of the attachment */
     type?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
 
-    /** The iou action of the expense creation flow of which we are displaying the receipt for. */
-    iouAction?: IOUAction;
-
-    /** The iou type of the expense creation flow of which we are displaying the receipt for. */
-    iouType?: IOUType;
-
-    /** The id of the draft transaction linked to the receipt. */
-    draftTransactionID?: string;
-
     /** If the attachment originates from a note, the accountID will represent the author of that note. */
     accountID?: number;
 
     /** The data is loading or not */
     isLoading?: boolean;
 
-    /** Should display not found page or not */
-    shouldShowNotFoundPage?: boolean;
-
     /** Denotes whether it is a workspace avatar or not */
     isWorkspaceAvatar?: boolean;
 
     /** Denotes whether it can be an icon (ex: SVG) */
     maybeIcon?: boolean;
 
-    /** Whether it is a receipt attachment or not */
-    isReceiptAttachment?: boolean;
+    /** Whether to display not found page */
+    shouldShowNotFoundPage?: boolean;
 
-    /** Determines if the user can edit the receipt or not */
-    canEditReceipt?: boolean;
+    /** Whether to show an attachment carousel */
+    shouldShowCarousel?: boolean;
 
-    /** Determines if the user can delete the receipt or not */
-    canDeleteReceipt?: boolean;
+    /** Whether to show download button */
+    shouldShowDownloadButton?: boolean;
 
-    /** Determines if the send button should be disabled or not */
+    /** Whether to disable send button */
     shouldDisableSendButton?: boolean;
 
-    /** Determines if the help button should be displayed or not */
+    /** Whether to display help button */
     shouldDisplayHelpButton?: boolean;
 
     /** The link of the attachment */
     attachmentLink?: string;
 
-    /** Determines if the attachment is invalid or not */
-    isAttachmentInvalid?: boolean;
-
-    /** Determines if the attachment is invalid or not */
-    attachmentInvalidReason?: TranslationPaths | null;
-
-    /** Determines the title of the invalid reason modal */
-    attachmentInvalidReasonTitle?: TranslationPaths | null;
-
     /** Ref to the submit button */
     submitRef?: RefObject<View | HTMLElement | null>;
 
-    /** Determines if the delete receipt confirm modal is visible or not */
-    isDeleteReceiptConfirmModalVisible?: boolean;
+    AttachmentContent?: AttachmentContent;
+
+    /** Callback triggered when the download button is pressed */
+    onDownloadAttachment?: DownloadAttachmentCallback;
 
     /** Optional callback to fire when we want to preview an image and approve it for use. */
-    onConfirm?: (file: FileObject) => void;
+    onConfirm?: (file: FileObject | FileObject[]) => void;
 
     /** Callback triggered when the modal is closed */
     onClose?: (options?: AttachmentModalOnCloseOptions) => void;
 
-    /** Callback triggered when the confirm modal is closed */
-    onConfirmModalClose?: () => void;
-
-    /** Callback triggered when the delete receipt modal is shown */
-    onRequestDeleteReceipt?: () => void;
-
-    /** Callback triggered when the delete receipt is confirmed */
-    onDeleteReceipt?: () => void;
-
     /** Optional callback to fire when we want to do something after attachment carousel changes. */
     onCarouselAttachmentChange?: (attachment: Attachment) => void;
-
-    /** Optional callback to fire when we want to validate the file. */
-    onValidateFile?: OnValidateFileCallback;
 };
 
-export type {AttachmentModalBaseContentProps, AttachmentModalOnCloseOptions, OnValidateFileCallback};
+export type {
+    AttachmentModalBaseContentProps,
+    AttachmentModalOnCloseOptions,
+    DownloadAttachmentCallback,
+    AttachmentContent,
+    AttachmentContentProps,
+    ThreeDotsMenuItemGenerator,
+    ThreeDotsMenuItemGeneratorProps,
+};
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.native.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.native.tsx
index eff47db70bf9..ff15cbf1f0b7 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.native.tsx
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.native.tsx
@@ -9,7 +9,7 @@ import AttachmentModalContext from '@pages/media/AttachmentModalScreen/Attachmen
 import type {AttachmentModalScreenType} from '@pages/media/AttachmentModalScreen/types';
 import type AttachmentModalContainerProps from './types';
 
-function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({contentProps, navigation, onShow, onClose}: AttachmentModalContainerProps<Screen>) {
+function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({contentProps, navigation, onShow, onClose, ExtraContent}: AttachmentModalContainerProps<Screen>) {
     const attachmentsContext = useContext(AttachmentModalContext);
     const testID = typeof contentProps.source === 'string' ? contentProps.source : (contentProps.source?.toString() ?? '');
 
@@ -37,19 +37,22 @@ function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({con
     }, [onShow]);
 
     return (
-        <ScreenWrapper
-            navigation={navigation}
-            testID={`attachment-modal-${testID}`}
-            enableEdgeToEdgeBottomSafeAreaPadding
-        >
-            <AttachmentStateContextProvider>
-                <AttachmentModalBaseContent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...contentProps}
-                    onClose={closeScreen}
-                />
-            </AttachmentStateContextProvider>
-        </ScreenWrapper>
+        <>
+            <ScreenWrapper
+                navigation={navigation}
+                testID={`attachment-modal-${testID}`}
+                enableEdgeToEdgeBottomSafeAreaPadding
+            >
+                <AttachmentStateContextProvider>
+                    <AttachmentModalBaseContent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...contentProps}
+                        onClose={closeScreen}
+                    />
+                </AttachmentStateContextProvider>
+            </ScreenWrapper>
+            {ExtraContent}
+        </>
     );
 }
 
diff --git a/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx b/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx
index ab1c2c097e98..ac1116682cce 100644
--- a/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx
@@ -9,7 +9,14 @@ import type {AttachmentModalScreenType} from '@pages/media/AttachmentModalScreen
 import CONST from '@src/CONST';
 import type AttachmentModalContainerProps from './types';
 
-function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({contentProps, modalType, onShow, onClose, shouldHandleNavigationBack}: AttachmentModalContainerProps<Screen>) {
+function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({
+    contentProps,
+    modalType,
+    onShow,
+    onClose,
+    shouldHandleNavigationBack,
+    ExtraContent,
+}: AttachmentModalContainerProps<Screen>) {
     const [isVisible, setIsVisible] = useState(true);
     const attachmentsContext = useContext(AttachmentModalContext);
 
@@ -40,28 +47,31 @@ function AttachmentModalContainer<Screen extends AttachmentModalScreenType>({con
     }, [onShow]);
 
     return (
-        <Modal
-            isVisible={isVisible}
-            type={modalType ?? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
-            initialFocus={() => {
-                if (!contentProps.submitRef?.current) {
-                    return false;
-                }
-                return contentProps.submitRef.current;
-            }}
-            shouldHandleNavigationBack={shouldHandleNavigationBack}
-            onClose={closeModal}
-            enableEdgeToEdgeBottomSafeAreaPadding
-        >
-            <AttachmentStateContextProvider>
-                <AttachmentModalBaseContent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...contentProps}
-                    shouldDisplayHelpButton={false}
-                    onClose={closeModal}
-                />
-            </AttachmentStateContextProvider>
-        </Modal>
+        <>
+            <Modal
+                isVisible={isVisible}
+                type={modalType ?? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE}
+                initialFocus={() => {
+                    if (!contentProps.submitRef?.current) {
+                        return false;
+                    }
+                    return contentProps.submitRef.current;
+                }}
+                shouldHandleNavigationBack={shouldHandleNavigationBack}
+                onClose={closeModal}
+                enableEdgeToEdgeBottomSafeAreaPadding
+            >
+                <AttachmentStateContextProvider>
+                    <AttachmentModalBaseContent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...contentProps}
+                        shouldDisplayHelpButton={false}
+                        onClose={closeModal}
+                    />
+                </AttachmentStateContextProvider>
+            </Modal>
+            {ExtraContent}
+        </>
     );
 }
 
diff --git a/src/pages/media/AttachmentModalScreen/index.tsx b/src/pages/media/AttachmentModalScreen/index.tsx
index f4ce3b373481..749260326f9a 100644
--- a/src/pages/media/AttachmentModalScreen/index.tsx
+++ b/src/pages/media/AttachmentModalScreen/index.tsx
@@ -2,6 +2,7 @@ import React, {useContext, useMemo} from 'react';
 import SCREENS from '@src/SCREENS';
 import AttachmentModalContext from './AttachmentModalContext';
 import ProfileAvatarModalContent from './routes/ProfileAvatarModalContent';
+import ReportAddAttachmentModalContent from './routes/report/ReportAddAttachmentModalContent';
 import ReportAttachmentModalContent from './routes/ReportAttachmentModalContent';
 import ReportAvatarModalContent from './routes/ReportAvatarModalContent';
 import TransactionReceiptModalContent from './routes/TransactionReceiptModalContent';
@@ -35,6 +36,15 @@ function AttachmentModalScreen<Screen extends AttachmentModalScreenType>({route,
         );
     }
 
+    if (route.name === SCREENS.REPORT_ADD_ATTACHMENT) {
+        return (
+            <ReportAddAttachmentModalContent
+                route={routeWithContext as RouteType<typeof SCREENS.REPORT_ADD_ATTACHMENT>}
+                navigation={navigation as NavigationType<typeof SCREENS.REPORT_ADD_ATTACHMENT>}
+            />
+        );
+    }
+
     if (route.name === SCREENS.TRANSACTION_RECEIPT || route.name === SCREENS.MONEY_REQUEST.RECEIPT_PREVIEW) {
         return (
             <TransactionReceiptModalContent
diff --git a/src/pages/media/AttachmentModalScreen/routes/ReportAttachmentModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/ReportAttachmentModalContent.tsx
index 76bdc16bf0f1..a59fa877059b 100644
--- a/src/pages/media/AttachmentModalScreen/routes/ReportAttachmentModalContent.tsx
+++ b/src/pages/media/AttachmentModalScreen/routes/ReportAttachmentModalContent.tsx
@@ -1,51 +1,34 @@
-import {Str} from 'expensify-common';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {View} from 'react-native';
 import type {Attachment} from '@components/Attachments/types';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useOriginalReportID from '@hooks/useOriginalReportID';
 import {openReport} from '@libs/actions/Report';
-import validateAttachmentFile from '@libs/AttachmentUtils';
-import ComposerFocusManager from '@libs/ComposerFocusManager';
-import {translateLocal} from '@libs/Localize';
 import Navigation from '@libs/Navigation/Navigation';
 import {isReportNotFound} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import type {AttachmentModalBaseContentProps, OnValidateFileCallback} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
+import type {AttachmentModalBaseContentProps} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
 import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/AttachmentModalContainer';
-import type {AttachmentModalScreenProps, FileObject} from '@pages/media/AttachmentModalScreen/types';
+import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import type ModalType from '@src/types/utils/ModalType';
+import useDownloadAttachment from './hooks/useDownloadAttachment';
+import useNavigateToReportOnRefresh from './hooks/useNavigateToReportOnRefresh';
+import useReportAttachmentModalType from './hooks/useReportAttachmentModalType';
 
 function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.ATTACHMENTS>) {
-    const {
-        attachmentID,
-        type,
-        file: fileParam,
-        source: sourceParam,
-        isAuthTokenRequired,
-        attachmentLink,
-        originalFileName,
-        accountID = CONST.DEFAULT_NUMBER_ID,
-        reportID,
-        hashKey,
-        shouldDisableSendButton,
-        headerTitle,
-        onConfirm,
-        onShow,
-    } = route.params;
-    // Extract the reportActionID from the attachmentID (format: reportActionID_index)
-    const reportActionID = useMemo(() => attachmentID?.split('_')?.[0], [attachmentID]);
+    const {attachmentID, type, source: sourceParam, isAuthTokenRequired, attachmentLink, originalFileName, accountID, reportID, hashKey, headerTitle, onShow, onClose} = route.params;
+
     const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
         canEvict: false,
         canBeMissing: true,
     });
+
+    const reportActionID = useMemo(() => attachmentID?.split('_')?.[0], [attachmentID]);
     const originalReportID = useOriginalReportID(reportID, reportActionID ? (reportActions?.[reportActionID ?? CONST.DEFAULT_NUMBER_ID] ?? {reportActionID}) : undefined);
     const reportActionReportID = originalReportID ?? reportID;
 
@@ -54,12 +37,11 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
         canBeMissing: false,
     });
 
+    useNavigateToReportOnRefresh({source: sourceParam, reportID});
+
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
     const {isOffline} = useNetwork();
 
-    const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
-    const [attachmentInvalidReason, setAttachmentInvalidReason] = useState<TranslationPaths | null>(null);
-    const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths | null>(null);
     const submitRef = useRef<View | HTMLElement>(null);
 
     const shouldFetchReport = useMemo(() => {
@@ -74,9 +56,6 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
         return !!isLoadingApp || isEmptyReport || (reportMetadata?.isLoadingInitialReportActions !== false && shouldFetchReport);
     }, [isOffline, reportActionReportID, isLoadingApp, report, reportMetadata, shouldFetchReport]);
 
-    const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
-    const [source, setSource] = useState(() => Number(sourceParam) || (typeof sourceParam === 'string' ? tryResolveUrlFromApiRoot(decodeURIComponent(sourceParam)) : undefined));
-
     const fetchReport = useCallback(() => {
         openReport(reportActionReportID, reportActionID);
     }, [reportActionReportID, reportActionID]);
@@ -107,134 +86,36 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
         [reportID, type, accountID, hashKey],
     );
 
-    const onClose = useCallback(() => {
-        // This enables Composer refocus when the attachments modal is closed by the browser navigation
-        ComposerFocusManager.setReadyToFocus();
-    }, []);
-
-    /**
-     * If our attachment is a PDF, return the unswipeable Modal type.
-     */
-    const getModalType = useCallback(
-        (sourceURL: string, fileObject: FileObject) =>
-            sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name ?? translateLocal('attachmentView.unknownFilename'))))
-                ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
-                : CONST.MODAL.MODAL_TYPE.CENTERED,
-        [],
-    );
-
-    // Validates the attachment file and renders the appropriate modal type or errors
-    const validateFile: OnValidateFileCallback = useCallback(
-        (file, setFile) => {
-            if (!file) {
-                return;
-            }
-
-            validateAttachmentFile(file).then((result) => {
-                if (!result.isValid) {
-                    const {error} = result;
-
-                    setIsAttachmentInvalid?.(true);
-                    switch (error) {
-                        case 'tooLarge':
-                            setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentTooLarge');
-                            setAttachmentInvalidReason?.('attachmentPicker.sizeExceeded');
-                            break;
-                        case 'tooSmall':
-                            setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentTooSmall');
-                            setAttachmentInvalidReason?.('attachmentPicker.sizeNotMet');
-                            break;
-                        case 'fileDoesNotExist':
-                            setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentError');
-                            setAttachmentInvalidReason?.('attachmentPicker.folderNotAllowedMessage');
-                            break;
-                        case 'fileInvalid':
-                        default:
-                            setAttachmentInvalidReasonTitle?.('attachmentPicker.attachmentError');
-                            setAttachmentInvalidReason?.('attachmentPicker.errorWhileSelectingCorruptedAttachment');
-                    }
-
-                    return;
-                }
-
-                const {source: fileSource} = result;
-                const inputModalType = getModalType(fileSource, file);
-                setModalType(inputModalType);
-                setSource(fileSource);
-                setFile(file);
-            });
-        },
-        [getModalType],
-    );
+    const onDownloadAttachment = useDownloadAttachment({
+        isAuthTokenRequired,
+    });
 
-    const contentTypeProps = useMemo<AttachmentModalBaseContentProps>(
-        () =>
-            fileParam
-                ? {
-                      file: fileParam,
-                      onValidateFile: validateFile,
-                  }
-                : {
-                      // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
-                      type,
-                      report,
-                      shouldShowNotFoundPage: !isLoading && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID,
-                      allowDownload: true,
-                      isAuthTokenRequired: !!isAuthTokenRequired,
-                      attachmentLink: attachmentLink ?? '',
-                      originalFileName: originalFileName ?? '',
-                      isLoading,
-                  },
-        [attachmentLink, fileParam, isAuthTokenRequired, isLoading, originalFileName, report, type, validateFile],
-    );
+    const source = useMemo(() => Number(sourceParam) || (typeof sourceParam === 'string' ? tryResolveUrlFromApiRoot(decodeURIComponent(sourceParam)) : undefined), [sourceParam]);
+    const modalType = useReportAttachmentModalType();
 
     const contentProps = useMemo<AttachmentModalBaseContentProps>(
         () => ({
-            ...contentTypeProps,
+            // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
+            type,
+            report,
+            shouldShowNotFoundPage: !isLoading && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID,
+            isAuthTokenRequired: !!isAuthTokenRequired,
+            attachmentLink: attachmentLink ?? '',
+            originalFileName: originalFileName ?? '',
+            isLoading,
             source,
             attachmentID,
             accountID,
-            onConfirm,
             headerTitle,
-            isAttachmentInvalid,
-            attachmentInvalidReasonTitle,
-            attachmentInvalidReason,
-            shouldDisableSendButton,
             submitRef,
+            onDownloadAttachment,
             onCarouselAttachmentChange,
         }),
-        [
-            accountID,
-            attachmentID,
-            attachmentInvalidReason,
-            attachmentInvalidReasonTitle,
-            contentTypeProps,
-            headerTitle,
-            isAttachmentInvalid,
-            onCarouselAttachmentChange,
-            onConfirm,
-            shouldDisableSendButton,
-            source,
-        ],
+        [accountID, attachmentID, attachmentLink, headerTitle, isAuthTokenRequired, isLoading, onCarouselAttachmentChange, onDownloadAttachment, originalFileName, report, source, type],
     );
 
-    // If the user refreshes during the send attachment flow, we need to navigate back to the report or home
-    useEffect(() => {
-        if (!!sourceParam || !!fileParam) {
-            return;
-        }
-
-        Navigation.isNavigationReady().then(() => {
-            if (reportID) {
-                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(reportID));
-            } else {
-                Navigation.goBack(ROUTES.HOME);
-            }
-        });
-    }, [sourceParam, reportID, route.name, fileParam]);
-
     return (
-        <AttachmentModalContainer
+        <AttachmentModalContainer<typeof SCREENS.ATTACHMENTS>
             navigation={navigation}
             contentProps={contentProps}
             modalType={modalType}
diff --git a/src/pages/media/AttachmentModalScreen/routes/hooks/useDownloadAttachment.ts b/src/pages/media/AttachmentModalScreen/routes/hooks/useDownloadAttachment.ts
new file mode 100644
index 000000000000..2ce970df91c2
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/routes/hooks/useDownloadAttachment.ts
@@ -0,0 +1,43 @@
+import {useCallback} from 'react';
+import {Keyboard} from 'react-native';
+import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+import fileDownload from '@libs/fileDownload';
+import {getFileName} from '@libs/fileDownload/FileUtils';
+import type {DownloadAttachmentCallback} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
+import CONST from '@src/CONST';
+
+type UseDownloadAttachmentProps = {
+    isAuthTokenRequired?: boolean;
+    type?: string;
+    draftTransactionID?: string;
+};
+
+function useDownloadAttachment({isAuthTokenRequired, type, draftTransactionID}: UseDownloadAttachmentProps = {}) {
+    /**
+     * Download the currently viewed attachment.
+     */
+    const downloadAttachment = useCallback<DownloadAttachmentCallback>(
+        ({source, file}) => {
+            let sourceURL = source;
+            if (isAuthTokenRequired && typeof sourceURL === 'string') {
+                sourceURL = addEncryptedAuthTokenToURL(sourceURL);
+            }
+
+            if (typeof sourceURL === 'string') {
+                const fileName = type === CONST.ATTACHMENT_TYPE.SEARCH ? getFileName(`${sourceURL}`) : file?.name;
+                const shouldUnlink = !draftTransactionID;
+                fileDownload(sourceURL, fileName ?? '', undefined, undefined, undefined, undefined, undefined, shouldUnlink);
+            }
+
+            // At ios, if the keyboard is open while opening the attachment, then after downloading
+            // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
+            Keyboard.dismiss();
+        },
+        [isAuthTokenRequired, type, draftTransactionID],
+    );
+
+    return downloadAttachment;
+}
+
+export default useDownloadAttachment;
+export type {UseDownloadAttachmentProps};
diff --git a/src/pages/media/AttachmentModalScreen/routes/hooks/useNavigateToReportOnRefresh.ts b/src/pages/media/AttachmentModalScreen/routes/hooks/useNavigateToReportOnRefresh.ts
new file mode 100644
index 000000000000..ade1bdcf7489
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/routes/hooks/useNavigateToReportOnRefresh.ts
@@ -0,0 +1,30 @@
+import {useEffect} from 'react';
+import Navigation from '@libs/Navigation/Navigation';
+import type {AvatarSource} from '@libs/UserUtils';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
+import ROUTES from '@src/ROUTES';
+
+type UseReportNavigationFallbackProps = {
+    source?: AvatarSource;
+    file?: FileObject | FileObject[];
+    reportID?: string;
+};
+
+// If the user refreshes during the send attachment flow, we need to navigate back to the report or home
+function useNavigateToReportOnRefresh({source, file, reportID}: UseReportNavigationFallbackProps) {
+    useEffect(() => {
+        if (!!source || !!file) {
+            return;
+        }
+
+        Navigation.isNavigationReady().then(() => {
+            if (reportID) {
+                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(reportID));
+            } else {
+                Navigation.goBack(ROUTES.HOME);
+            }
+        });
+    }, [source, reportID, file]);
+}
+
+export default useNavigateToReportOnRefresh;
diff --git a/src/pages/media/AttachmentModalScreen/routes/hooks/useReportAttachmentModalType.ts b/src/pages/media/AttachmentModalScreen/routes/hooks/useReportAttachmentModalType.ts
new file mode 100644
index 000000000000..ac7f4e704bb6
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/routes/hooks/useReportAttachmentModalType.ts
@@ -0,0 +1,40 @@
+import {Str} from 'expensify-common';
+import {useEffect, useState} from 'react';
+import type {FileObject} from '@pages/media/AttachmentModalScreen/types';
+import CONST from '@src/CONST';
+import type ModalType from '@src/types/utils/ModalType';
+
+function isPdfFile(source: string | number, fileObject: FileObject) {
+    if (!source) {
+        return false;
+    }
+
+    const isSourcePdf = typeof source === 'string' ? Str.isPDF(source) : false;
+    const isFilePdf = fileObject?.name ? Str.isPDF(fileObject.name) : false;
+    return isSourcePdf || isFilePdf;
+}
+
+function useReportAttachmentModalType(source?: string | number, file?: FileObject | FileObject[]) {
+    const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
+    useEffect(() => {
+        if (!file && !source) {
+            setModalType(CONST.MODAL.MODAL_TYPE.CENTERED);
+            return;
+        }
+
+        let isPdf = false;
+
+        if (Array.isArray(file)) {
+            isPdf = file.some((f) => isPdfFile(source ?? f.uri ?? '', f));
+        } else {
+            isPdf = isPdfFile(source ?? file?.uri ?? '', file ?? {});
+        }
+
+        // If our attachment is a PDF, return the unswipeable Modal type.
+        setModalType(isPdf ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.CENTERED);
+    }, [file, source]);
+
+    return modalType;
+}
+
+export default useReportAttachmentModalType;
diff --git a/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent.tsx
new file mode 100644
index 000000000000..ce879e9a7005
--- /dev/null
+++ b/src/pages/media/AttachmentModalScreen/routes/report/ReportAddAttachmentModalContent.tsx
@@ -0,0 +1,245 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {View} from 'react-native';
+import AttachmentCarouselView from '@components/Attachments/AttachmentCarousel/AttachmentCarouselView';
+import useCarouselArrows from '@components/Attachments/AttachmentCarousel/useCarouselArrows';
+import useAttachmentErrors from '@components/Attachments/AttachmentView/useAttachmentErrors';
+import type {Attachment} from '@components/Attachments/types';
+import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
+import {openReport} from '@libs/actions/Report';
+import validateAttachmentFile from '@libs/AttachmentUtils';
+import type {AttachmentValidationResult} from '@libs/AttachmentUtils';
+import {isReportNotFound} from '@libs/ReportUtils';
+import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
+import type {AttachmentContentProps, AttachmentModalBaseContentProps} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
+import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/AttachmentModalContainer';
+import useDownloadAttachment from '@pages/media/AttachmentModalScreen/routes/hooks/useDownloadAttachment';
+import useNavigateToReportOnRefresh from '@pages/media/AttachmentModalScreen/routes/hooks/useNavigateToReportOnRefresh';
+import useReportAttachmentModalType from '@pages/media/AttachmentModalScreen/routes/hooks/useReportAttachmentModalType';
+import type {AttachmentModalScreenProps, FileObject} from '@pages/media/AttachmentModalScreen/types';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+
+const convertFileToAttachment = (file: FileObject | undefined): Attachment => {
+    if (!file) {
+        return {source: ''};
+    }
+
+    return {
+        file,
+        source: file.uri ?? '',
+    };
+};
+
+function ReportAddAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.REPORT_ADD_ATTACHMENT>) {
+    const {
+        attachmentID,
+        file: fileParam,
+        source: sourceParam,
+        isAuthTokenRequired,
+        attachmentLink,
+        originalFileName,
+        accountID = CONST.DEFAULT_NUMBER_ID,
+        reportID,
+        shouldDisableSendButton,
+        headerTitle,
+        onConfirm: onConfirmParam,
+        onShow,
+        onClose,
+    } = route.params;
+
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: false});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        canEvict: false,
+        canBeMissing: true,
+    });
+    const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`, {
+        canBeMissing: false,
+    });
+
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true});
+    const {isOffline} = useNetwork();
+
+    const submitRef = useRef<View | HTMLElement>(null);
+
+    // Extract the reportActionID from the attachmentID (format: reportActionID_index)
+    const reportActionID = useMemo(() => attachmentID?.split('_')?.[0], [attachmentID]);
+
+    const shouldFetchReport = useMemo(() => {
+        return isEmptyObject(reportActions?.[reportActionID ?? CONST.DEFAULT_NUMBER_ID]);
+    }, [reportActions, reportActionID]);
+
+    const fetchReport = useCallback(() => {
+        openReport(reportID, reportActionID);
+    }, [reportID, reportActionID]);
+
+    useEffect(() => {
+        if (!reportID || !shouldFetchReport) {
+            return;
+        }
+
+        fetchReport();
+    }, [reportID, fetchReport, shouldFetchReport]);
+
+    const [source, setSource] = useState(() => Number(sourceParam) || (typeof sourceParam === 'string' ? tryResolveUrlFromApiRoot(decodeURIComponent(sourceParam)) : undefined));
+
+    const [validFiles, setValidFiles] = useState<FileObject | FileObject[] | undefined>(fileParam);
+    useEffect(() => {
+        if (!fileParam) {
+            return;
+        }
+
+        function updateState(result: AttachmentValidationResult | AttachmentValidationResult[]) {
+            if (Array.isArray(result)) {
+                const validResults = result.filter((r) => r.isValid);
+                if (validResults.length === 0) {
+                    return;
+                }
+
+                const validatedFiles = validResults.map((r) => r.file);
+                const firstValidSource = validResults.at(0)?.source;
+
+                setSource(firstValidSource);
+                setValidFiles(validatedFiles);
+                return;
+            }
+
+            if (!result.isValid) {
+                return;
+            }
+
+            setSource(result.source);
+            setValidFiles(result.file);
+        }
+
+        if (Array.isArray(fileParam)) {
+            Promise.all(fileParam.map((f) => validateAttachmentFile(f))).then(updateState);
+            return;
+        }
+
+        validateAttachmentFile(fileParam).then(updateState);
+    }, [fileParam]);
+
+    const modalType = useReportAttachmentModalType(source, validFiles);
+    useNavigateToReportOnRefresh({source: sourceParam, file: validFiles, reportID});
+
+    const isLoading = useMemo(() => {
+        if (isOffline || isReportNotFound(report) || !reportID) {
+            return false;
+        }
+        const isEmptyReport = isEmptyObject(report);
+        return !!isLoadingApp || isEmptyReport || (reportMetadata?.isLoadingInitialReportActions !== false && shouldFetchReport) || (Array.isArray(validFiles) && validFiles.length === 0);
+    }, [isOffline, report, reportID, isLoadingApp, reportMetadata?.isLoadingInitialReportActions, shouldFetchReport, validFiles]);
+
+    const onConfirm = useCallback(
+        (f: FileObject | FileObject[]) => {
+            if (Array.isArray(validFiles) && validFiles.length > 0) {
+                onConfirmParam?.(validFiles);
+            } else {
+                onConfirmParam?.(f);
+            }
+        },
+        [validFiles, onConfirmParam],
+    );
+
+    const onDownloadAttachment = useDownloadAttachment({
+        isAuthTokenRequired,
+    });
+
+    useNavigateToReportOnRefresh({source: sourceParam, file: validFiles, reportID});
+
+    const contentProps = useMemo<AttachmentModalBaseContentProps>(() => {
+        if (validFiles === undefined || (Array.isArray(validFiles) && validFiles.length === 0)) {
+            return {
+                isLoading: true,
+            };
+        }
+
+        return {
+            file: validFiles,
+            source,
+            isLoading,
+            isAuthTokenRequired,
+            attachmentLink,
+            originalFileName,
+            attachmentID,
+            accountID,
+            headerTitle,
+            shouldDisableSendButton,
+            submitRef,
+            onConfirm,
+            onDownloadAttachment,
+            AttachmentContent: AddAttachmentModalCarouselView,
+        };
+    }, [
+        validFiles,
+        source,
+        isLoading,
+        isAuthTokenRequired,
+        attachmentLink,
+        originalFileName,
+        attachmentID,
+        accountID,
+        headerTitle,
+        shouldDisableSendButton,
+        onConfirm,
+        onDownloadAttachment,
+    ]);
+
+    return (
+        <AttachmentModalContainer
+            navigation={navigation}
+            contentProps={contentProps}
+            modalType={modalType}
+            onShow={onShow}
+            onClose={onClose}
+        />
+    );
+}
+ReportAddAttachmentModalContent.displayName = 'ReportAddAttachmentModalContent';
+
+function AddAttachmentModalCarouselView({fileToDisplay, files}: AttachmentContentProps) {
+    const {setAttachmentError, clearAttachmentErrors} = useAttachmentErrors();
+    const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
+
+    const [page, setPage] = useState<number>(0);
+    const attachments = useMemo(() => {
+        if (Array.isArray(files)) {
+            return files?.map((file) => convertFileToAttachment(file)) ?? [];
+        }
+
+        if (!files) {
+            return [];
+        }
+
+        return [convertFileToAttachment(files)];
+    }, [files]);
+    const currentAttachment = useMemo(() => convertFileToAttachment(fileToDisplay), [fileToDisplay]);
+
+    useEffect(() => {
+        clearAttachmentErrors();
+    }, [clearAttachmentErrors]);
+
+    if (attachments.length === 0 || !currentAttachment) {
+        return null;
+    }
+
+    return (
+        <AttachmentCarouselView
+            attachments={attachments}
+            source={currentAttachment.source}
+            page={page}
+            setPage={setPage}
+            autoHideArrows={autoHideArrows}
+            cancelAutoHideArrow={cancelAutoHideArrows}
+            setShouldShowArrows={setShouldShowArrows}
+            onAttachmentError={setAttachmentError}
+            shouldShowArrows={shouldShowArrows}
+        />
+    );
+}
+AddAttachmentModalCarouselView.displayName = 'AddAttachmentModalCarouselView';
+
+export default ReportAddAttachmentModalContent;
diff --git a/src/pages/media/AttachmentModalScreen/types.ts b/src/pages/media/AttachmentModalScreen/types.ts
index 7d79bc40c22a..e383d298bc97 100644
--- a/src/pages/media/AttachmentModalScreen/types.ts
+++ b/src/pages/media/AttachmentModalScreen/types.ts
@@ -22,14 +22,25 @@ type ImagePickerResponse = {
 type FileObject = Partial<File | ImagePickerResponse>;
 
 type AttachmentModalContainerModalProps = {
+    /** The type of the modal */
     modalType?: ModalType;
+
+    /** Callback to fire when the modal is shown */
     onShow?: () => void;
+
+    /** Callback to fire when the modal is closed */
     onClose?: () => void;
+
+    /** Whether to handle navigation back */
     shouldHandleNavigationBack?: boolean;
+
+    /** Extra modals to be displayed in the modal */
+    ExtraContent?: React.ReactNode;
 };
 
 const ATTACHMENT_MODAL_SCREENS = [
     SCREENS.ATTACHMENTS,
+    SCREENS.REPORT_ADD_ATTACHMENT,
     SCREENS.REPORT_AVATAR,
     SCREENS.PROFILE_AVATAR,
     SCREENS.WORKSPACE_AVATAR,
diff --git a/src/stories/Composer.stories.tsx b/src/stories/Composer.stories.tsx
index cdf70313d87d..986d2f173497 100644
--- a/src/stories/Composer.stories.tsx
+++ b/src/stories/Composer.stories.tsx
@@ -35,7 +35,7 @@ const DEFAULT_VALUE = `Composer can do the following:
 
 function Default(props: ComposerProps) {
     const StyleUtils = useStyleUtils();
-    const [pastedFile, setPastedFile] = useState<FileObject | null>(null);
+    const [pastedFile, setPastedFile] = useState<FileObject | FileObject[]>();
     const [comment, setComment] = useState(DEFAULT_VALUE);
     const renderedHTML = parser.replace(comment ?? '');
     const [selection, setSelection] = useState<TextSelection>(() => ({start: DEFAULT_VALUE.length, end: DEFAULT_VALUE.length, positionX: 0, positionY: 0}));