Allow download of images shared in chat

[jboniface]

If you haven’t already, check out our contributing guidelines for onboarding!

---

Platform - version:
All platforms / 280

Action Performed (reproducible steps):

1. Log into Expensify Cash
2. Click the paperclip icon
3. Select an image and confirm the upload
4. Once the image uploads to the chat, click the image
5. Notice that there is no way to download the image in the Attachment modal

Expected Result:
The modal should provide an icon that can be clicked to download the image.

Actual Result:
There is no way to download the image

Notes/Photos/Videos:

Here is what it currently looks like:

Instead, we'd like to include a download button:

The icon asset can be found here:

After downloading, please confirm the image is stored on the device.

view the job on Upwork here.

[daniyal-intellicel]

Hi,
My proposal for solution:

1. Adding download image button (as provided in this issue's description)
2. Binding this button to a download action
3. For native mobile apps download action will use rn-fetch-blob library to download files to Download folder of device
4. For web/desktop download action will use js fetch to download file and then send it to web window to be saved

[marcaaron]

@daniyal-intellicel Thanks! This plan sounds good, but I have a few questions...

1. Are you planning to generalize the "download" behavior? e.g. Is it something that could be used to "download" anything in the future?
2. When you say a "download action", what do you mean by this? Is it a utility method? Component? Something else?

[daniyal-intellicel]

@marcaaron Thanks!

1. Yes "download" action will be generalised to download almost any file. It will take only one parameter (attachment/file url) and perform platform specific download.
2. Download action will be a utility method defined under src/libs folder.

[bullseye405]

We could use rn-fetch-blob or
react-native-fs

Using this, we can create a small component, put that component next to the close button and use the download icon ( which is in png, should we not use a svg? ) to download the file

[arielgreen]

Looks good @bullseye405, please proceed with your PR.

@shawnborton is png correct or should the icon be svg format?

[shawnborton]

We should use an .svg for the icon. You should be able to take a look at how we're handling .svg icons elsewhere in the app.

[arielgreen]

@bullseye405, please provide an update.

[smokfyz]

I have solved this issue with rn-fetch-blob.
const { config, fs } = RNFetchBlob
let PictureDir = fs.dirs.PictureDir
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true,
notification : false,
path: PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2),
description : 'Downloading image.'
}
}
config(options).fetch('GET', "http://www.example.com/example.png").then((res) => {
//
})

[SameeraMadushan]

Hi,

I submitted a proposal on Upwork and I would like to handle this task.
I will explain my approach to solve this.

Problem

The modal should provide an icon that can be clicked to download the image.

Suggested solution

This function will be implemented as a reusable function inside src/libs.
Any type of file download will be possible

iOS and Android

• I will use rn-fetch-blob for both iOS and Android
• I checked and this package is already installed and WRITE_EXTERNAL_STORAGE permission also already enabled.

Web, Desktop and mobile web

• I will use fetch and create blob link to download the file

Thanks,
Sameera