How to save the file to device's folder like download

How to save the file to device’s folder like download?

I want to download images to download folder.

The Expo FileSystem API has a downloadAsync method: https://docs.expo.io/versions/latest/sdk/filesystem.html

Yes. I’ve tried that and after I download, I can’t see any downloaded file in my device’s folder. Is there any example?

Is there any solution for this issue?

I have exactly the same problem as you do.

hey @dooboolab & @enriquedev! can you guys post the code you used to download the file?

also, I made a component you can import to visually see whats happening to your apps filesystem. it might help you see what’s going wrong:

https://www.npmjs.com/package/expo-file-system-view

1 Like

@samee here it is

const donwloadFile = async () => {
  const fileUri = FileSystem.documentDirectory + filename;
  const url = fileRoute;

  let downloadObject = FileSystem.createDownloadResumable(
    url,
    fileUri
  );
  let response = await downloadObject.downloadAsync();
}

The file is being downloaded properly but it’s not possible to manipulate it on android. On iOS devices I use an ActionSheet with sharing options you can save it on your device, but I cannot find a workaround for Android.

hey, so basically everything is working on iOS, but on android you can’t access the file?

if so, that’s because there’s currently a bug in Android’s filesystem that doesn’t let you write/read directly from documentDirectory. the issue is currently being worked on, but for now you can work around it by adding a child folder to documentDirectory:

const fileUri = FileSystem.documentDirectory + 'thisIsAFolder/' + filename;

of course make sure you create the directory beforehand. let me know if this works

2 Likes

The file is downloaded successfully but, as I said before, there is no possible way to make it available to the user or can be accessed through a “File Explorer” application which makes this API pretty much useless…

sorry that the experience has been so tedious :frowning: its definitely frustrating that its not working like its supposed to but I think the expo team is working hard on fixing the problem, so it should be back to normal pretty soon.

when you say ‘make the file available to the user’ do you just mean accessing the file? if so, trying to access a file under a child folder (like my example above) should be working. As far as I know right now the only bug is if you try to read directly from the documentDirectory (like if you try to access the file from the code snippet you provided).

basically:

const fileUri1 = FileSystem.documentDirectory + filename
const fileUri2 = FileSystem.documentDirectory + 'thisIsAFolder/' + filename

// this will fail on android, because of the bug with r/w permissions
FileSystem.getInfoAsync(fileUri1)

// this should work, assuming you created the folder and download went ok
FileSystem.getInfoAsync(fileUri2)

similarly any other operation where you need a fileUri will behave the same way. Does that make sense?

If this doesn’t address the issue, maybe you could show me the code snippet that is producing the error as well as a screenshot of the error message? From my understanding the one you posted works, but later when you try to access the file it errors

Yes, as I said before is not an error, it just is not accesible to the user. So if I would want my file to be retrievable to the user what should I do?

Hi, news about this issue?

Still crying on this with an Android device. Any solution on how to find the saved file in a file manager?
I’ve tried by setting the path manually like “/storage/emulated/0/Android/data/folder” with no success.
Thank you all

2 Likes

Just open the File To download in WebBrowser.

CODE:

WebBrowser.openBrowserAsync(<file url>)

3 Likes

This is my post about your issue. You can test

It not work :confused:

I created this package today that uses Android’s Storage Access Framework. It has very limited features although with a very generic name, basically, you can save a blob of text to any file with any mimetype, maybe you can use it to save Base64 images, I don’t know, never tested it. If it is helpful for you, I’ll get it published to NPM on request.
https://github.com/idealistspace/react-native-android-file-util

However, you need to detach to use this. It’s not scary at all. I feel bad saying this at Expo forum because I started in Expo too, but I can’t find anything within React Native ecosystem can do this, so I ended up spending some time detaching (about a day or so finding all other alternative packages), and then this afternoon creating this package.

Hi, I printed the response object, and I can see that URI Path uri " “file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540arturo181991%252FFileViewer/test.pdf”, then I tried to open it with diferents File Explorer Apps, but they told me ‘File damaged- Can’t acces to file - Somethings like that’, and I decided copy file to Downloads Folder manually and after open it again and it works correctly. So I need to find the way to save it into a folder with necessary permissions

I have found a solution to this! It is not a great solution, and it is a total hack but I just tested it and it works great without needing any extra packages or permissions.

I was struggling to find a way to get a file out of my expo app and onto the device in a way I could edit it. I was trying to export a .txt backup file for my app. Here is how you do it.

React Native has a Camera Roll, it lets you take a photo and move it into the camera storage. However I just tested and it works with any file.

import { CameraRoll } from 'react-native';
...
CameraRoll.saveToCameraRoll( fileURI, 'photo');

This moves the file into the root DCIM directory. Which means it is accessible via USB, or file explorer. It is a straight up hack and probably an oversight on someones part to not check mimetype, but its working!

5 Likes

Unfortunately doesn’t seem to work on iOS :frowning:

1 Like