[Due for payment 2025-10-15] [Due for payment 2025-09-26] [Due for payment 2025-09-23] [$250] Web - Attachments - Download option is present on broken image

[jponikarchuk]

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

---

Version Number: v9.1.96-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-324/folder/13176710/41236964/846106878
Email or phone of affected tester (no customers): aperera+test@applausemail.com
Issue reported by: Applause Internal Team
Device used: Windows 11
App Component: Other

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Go to any conversation
3. Send the broken image ![off](https://github.com/14980976ba8f16359b60bd7c33ba9e4a13b57b7a92f43c0cc7e5cb7a26717da0/68747470733a2f2f696e76616c69642d75726c2f696d6167652e6a7067)
4. Open just sent broken image quickly

Expected Result:

The download option should be hidden on the broken image

Actual Result:

The download option is present on broken image

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bandicam.2025-08-19.13-50-33-302.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021958855231164055867
• Upwork Job ID: 1958855231164055867
• Last Price Increase: 2025-08-29

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[thelullabyy]

Proposal

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

• The download button appears briefly even when the image is broken or fails to load.

What is the root cause of that problem?

• The current logic that determines the visibility of the download button is here:
  

  App/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent.tsx

  Lines 408 to 413 in 9ce95b7

  	const shouldShowDownloadButton = useMemo(() => {
  	if ((!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) && !isErrorInAttachment(sourceState)) {
  	return allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource;
  	}
  	return false;
  	}, [allowDownload, isDownloadButtonReadyToBeShown, isErrorInAttachment, isLocalSource, isOffline, isReceiptAttachment, report, shouldShowNotFoundPage, sourceState, type]);

• When an attachment is first opened, the system assumes it is valid and displays the download button. However, if the image fails to load, an error is triggered asynchronously, after which the download button is hidden.

• This results in a flickering effect, where the download button is shown for a short time before disappearing, as observed in the original post.

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

• Instead of relying on the error state to hide the download button, we should only show the button after the attachment has successfully loaded.

• Here's how we can implement this:

---

1. Create a hook to track the loaded state of each attachment.

import {useCallback, useState} from 'react';
import type {AttachmentSource} from '@components/Attachments/types';

function convertSourceToString(source: AttachmentSource) {
    if (typeof source === 'string' || typeof source === 'number') {
        return source.toString();
    }
    if (Array.isArray(source)) {
        return source.map((src) => src.uri).join(', ');
    }
    if ('uri' in source) {
        return source.uri ?? '';
    }
    return '';
}

/**
 * Custom hook for tracking whether an attachment has successfully loaded.
 */
function useAttachmentLoaded() {
    const [attachmentLoaded, setAttachmentLoaded] = useState<Record&lt;string, boolean&gt;>({});

    const setAttachmentLoadedState = useCallback((key: AttachmentSource, state = true) => {
        const url = convertSourceToString(key);
        if (!url) return;
        setAttachmentLoaded((prevState) => ({
            ...prevState,
            [url]: state,
        }));
    }, []);

    const clearAttachmentLoaded = useCallback(() => {
        setAttachmentLoaded({});
    }, []);

    const isAttachmentLoaded = useCallback(
        (key: AttachmentSource) => !!attachmentLoaded?.[convertSourceToString(key)],
        [attachmentLoaded],
    );

    return {
        setAttachmentLoaded: setAttachmentLoadedState,
        clearAttachmentLoaded,
        isAttachmentLoaded,
    };
}

export default useAttachmentLoaded;

---

2. Update the logic for displaying the download button.

App/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent.tsx

Lines 408 to 413 in 9ce95b7

	const shouldShowDownloadButton = useMemo(() => {
	if ((!isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH) && !isErrorInAttachment(sourceState)) {
	return allowDownload && isDownloadButtonReadyToBeShown && !shouldShowNotFoundPage && !isReceiptAttachment && !isOffline && !isLocalSource;
	}
	return false;
	}, [allowDownload, isDownloadButtonReadyToBeShown, isErrorInAttachment, isLocalSource, isOffline, isReceiptAttachment, report, shouldShowNotFoundPage, sourceState, type]);

const {setAttachmentLoaded, isAttachmentLoaded} = useAttachmentLoaded();

const shouldShowDownloadButton = useMemo(() => {
    const isValidContext = !isEmptyObject(report) || type === CONST.ATTACHMENT_TYPE.SEARCH;

    if (isValidContext && !isErrorInAttachment(sourceState)) {
        return (
            allowDownload &&
            isDownloadButtonReadyToBeShown &&
            !shouldShowNotFoundPage &&
            !isReceiptAttachment &&
            !isOffline &&
            !isLocalSource &&
            isAttachmentLoaded(sourceState)
        );
    }

    return false;
}, [
    allowDownload,
    isDownloadButtonReadyToBeShown,
    isErrorInAttachment,
    isLocalSource,
    isOffline,
    isReceiptAttachment,
    report,
    shouldShowNotFoundPage,
    sourceState,
    type,
    isAttachmentLoaded,
]);

---

3. Set the attachment loaded state when the image finishes loading.

• Pass setAttachmentLoaded down through the component hierarchy:

From:

App/src/pages/media/AttachmentModalScreen/AttachmentModalBaseContent.tsx

Line 488 in 9ce95b7

<AttachmentCarousel

To:

App/src/components/Attachments/AttachmentCarousel/index.tsx

Line 98 in 9ce95b7

<AttachmentCarouselView

Then:

App/src/components/Attachments/AttachmentCarousel/AttachmentCarouselView/index.tsx

Line 161 in 9ce95b7

onAttachmentError,

const context = useMemo(() => ({
    ...
    onAttachmentLoaded,
}), [...]);

Finally, call onAttachmentLoaded in:

App/src/components/ImageView/index.tsx

Line 82 in 9ce95b7

const imageLoad = ({nativeEvent}: ImageOnLoadEvent) => {

const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
const {onAttachmentLoaded} = attachmentCarouselPagerContext ?? {};

const imageLoad = ({nativeEvent}: ImageOnLoadEvent) => {
    setImageRegion(nativeEvent.width, nativeEvent.height);
    setIsLoading(false);
    onAttachmentLoaded?.(url, true);
};

• We can apply the fix to other attachment components if needed.

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

• N/A

What alternative solutions did you explore? (Optional)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021958855231164055867

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @truph01 (External)

[muhammad-ali-abbasi]

Proposal

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

Web - Attachments - Download option is present on broken image

---

What is the root cause of that problem?

The UI that decides whether to show the download control only reads a shouldShowDownloadIcon flag (or simply renders DefaultAttachmentView which renders the icon). It does not factor in the attachment’s actual load state (imageError), nor other states that must suppress download (deleted, uploading, clearly invalid/no filename).

Concretely:

• src/components/Attachments/AttachmentView/index.tsx manages imageError when an <img> fails, but callers downstream still receive shouldShowDownloadIcon = true and render the download control.
• src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx renders the download icon whenever shouldShowDownloadIcon is truthy; it has no defensive check for imageError, missing fileName, isDeleted, or isUploading.
• In some code paths (AttachmentPreview or server-sent HTML in ReportActionItem*) the broken image path may bypass the AttachmentView checks, leaving an inconsistent UI.

Result: broken image → imageError === true but download icon still shown.

---

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

High-level approach: only show the download control when there is a valid downloadable file. Hide it when the attachment has failed to load or is otherwise unavailable.

Exact, minimal changes (no diffs here — description only):

1. Caller-level decision in AttachmentView

   • File: src/components/Attachments/AttachmentView/index.tsx

   • What to change:

     • Compute an effective flag before passing it to DefaultAttachmentView:

       effectiveShowDownloadIcon = !!shouldShowDownloadIcon && !imageError && !isDeleted && !isUploading
       

     • Use effectiveShowDownloadIcon when rendering DefaultAttachmentView and any fallback placeholder render paths (image-fallback branch, high-res fallback, etc.).

   • Rationale: this centralizes the decision where imageError is known and prevents the download icon being shown for failed loads.

2. Defensive guard inside DefaultAttachmentView

   • File: src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx

   • What to change:

     • Add a small defensive check before rendering the download control so a caller mistake can’t reintroduce the bug:

       • Hide download if !fileName (no meaningful target), isDeleted === true, or isUploading === true.

     • Keep the existing shouldShowLoadingSpinnerIcon and shouldShowDownloadIcon props; but final render of the download icon should be conditioned on both caller flag and the defensive checks.

   • Rationale: makes the component resilient at other call sites that may render it directly.

3. Ensure previews / alternate render paths respect the same rule

   • File: src/components/AttachmentPreview.tsx and any direct attachment renderers (e.g., ReportActionItem* paths that render attachments from server HTML).

   • What to change:

     • If AttachmentPreview or ReportActionItem renders a download option independently, update them to consult the same effective rule (or to delegate to AttachmentView behavior).

   • Rationale: prevents inconsistencies where one code path hides the control and another shows it.

4. UX note (optional)

   • When hiding the download icon, consider showing a small “file unavailable” state (existing fallback) instead of a download control, but do not expose a download action for broken images.