0

I am unable to download images form url in react-native , i am using 'react-native-fetch-blob' it's working fine for android but not iOS. let PictureDir = fs.dirs.PictureDir; Here is PicureDir is undefined for iOS.

Here is the code : 

const { config, fs } = RNFetchBlob;

let PictureDir = Platform.OS === 'ios' ? fs.dirs.DocumentDir : fs.dirs.PictureDir;
let options = {
  fileCache: true,
  addAndroidDownloads : {
    useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
    notification : false,
    path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
    description : 'Downloading image.'
  }
}

config(options).fetch('GET', "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg").then((res) => {
}) ;
Ahmad Sadiq
  • 153
  • 1
  • 1
  • 8

1 Answers1

3

As it says in the documentation that the PictureDir is only available in Android.

https://github.com/joltup/rn-fetch-blob/wiki/File-System-Access-API#dirs

DocumentDir
CacheDir
MainBundleDir (Can be used to access files embedded on iOS apps only)
DCIMDir (Android Only)
DownloadDir (Android Only)
MusicDir (Android Only)
PictureDir (Android Only)
MovieDir (Android Only)
RingtoneDir (Android Only)
SDCardDir (0.9.5+ Android Only)

You should use DocumentDir or CacheDir to save files on iOS

You could do something like this which will allow you to use different directories depending on the OS

import { Platform } from 'react-native';

...

let PictureDir = Platform.OS === 'ios' ? fs.dirs.DocumentDir : fs.dirs.PictureDir;

Update

I tried out your updated code and it works, however I did have to make one tweak to it.

When you use the addAndroidDownloads you have to be aware that you cannot set your own path for Android.

When using DownloadManager, fileCache and path properties in config will not take effect, because Android DownloadManager can only store files to external storage, also notice that Download Manager can only support GET method, which means the request body will be ignored.

https://github.com/joltup/rn-fetch-blob#android-media-scanner-and-download-manager-support

So to set the path so that iOS knows where to store the file you should set the path outside that addAndroidDownloads object so that your options become:

let options = {
  fileCache: true,
  addAndroidDownloads : {
    useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
    notification : false,
    description : 'Downloading image.'
  },
  path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2) // this is the path where your downloaded file will live in
}

For iOS it will ignore the settings in addAndroidDownloads and the file will be saved in the documents directory on the device, as that is the path that is given.

If you are wanting to save the file into the photo gallery of the device on iOS then you will have to look into using CameraRoll

You can see an answer that I gave on how to use that here https://stackoverflow.com/a/54125033/5508175

Andrew
  • 26,706
  • 9
  • 85
  • 101
  • It worked i get the path but still unable to download file ,i have added code in the question kindly have a look. – Ahmad Sadiq Jan 13 '19 at 16:01
  • Hey @Andrew I'm trying to download the audio file but i can't my app crashed here's code snippet `RNFetchBlob.config({ fileCache: true, path: pathFile + '/me_' + Math.floor(date.getTime() + date.getSeconds() / 2), }) .fetch('GET', url) .then(res => { console.log('The file is save to ', res.path()); }) .catch(err => console.log('err', err));` – Oliver D Feb 28 '20 at 21:46
  • @OliverD. I would suggest writing up the relevant parts into a new question so that you can clearly express everything that you need to do, as the comments on SO do not really allow a detailed discussion to take place. For one, code does not format nicely here; and secondly, you are limited to 600 characters, so it makes it hard to express oneself fully. – Andrew Feb 29 '20 at 10:02
  • Yes.. sorry about that, I'm already doing it [here](https://stackoverflow.com/questions/60459901/download-audio-file-in-react-native) – Oliver D Feb 29 '20 at 13:10