RN fetch blob download docx or pdf from URL in IOS

Question

What is done:

Implemented in Android and its getting downloaded in specific DCIM directory in android. In ios using DocumentDir to download the pdf or docx file. Using "rn-fetch-blob": "^0.12.0";

Error:

In IOS it says the message in console :

The file saved to /var/mobile/Containers/Data/Application/E6FDC2DD-7FCA-44DC-85C4-A275078F8825/Documents/wow13.pdf

The code to download is something like this :

downloadFileOnSuccess = async () => {
    let dirs =
      Platform.OS == 'ios'
        ? RNFetchBlob.fs.dirs.DocumentDir
        : RNFetchBlob.fs.dirs.DCIMDir;
    console.log(dirs, 'document path');
    RNFetchBlob.config({
      // response data will be saved to this path if it has access right.

      fileCache: true,
      path: dirs + `/wow13.pdf`,
    })
      .fetch(
        'GET',
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
        {
          //some headers ..
        },
      )
      .then(res => {
        // the path should be dirs.DocumentDir + 'path-to-file.anything'
        console.log('The file saved to ', res.path());
      });
  };

But i cannot get where the file is downloaded in my iphone 7 real device. Is there any permission i'm missing in IOS? Havent added any permission for IOS.

Hey, use **LibraryDirectoryPath**, instead of DocumentDir path. — Elango, Feb 04 '20 at 07:03
Yes, but first you need to create custom folder. var PATH_TO_CREATE = `${RNFS.LibraryDirectoryPath}/Your_Folder_Name`; RNFetchBlob.fs.mkdir(PATH_TO_CREATE) .then(() => { ... }) .catch((err) => { ... }); — Elango, Feb 04 '20 at 07:22
in RNFS have lots of option for save your file in both ios and android...bcoz i'm already done with rnfs.. — Elango, Feb 04 '20 at 07:30
nope. RNFS.mkdir(PATH_TO_CREATE).then((result)=>{ console.log('Folder Created'); }).catch((err) => { console.log('err', err) }); — Elango, Feb 04 '20 at 07:31

Gaurav Roy · Accepted Answer · 2021-10-06T06:26:32.333

12

Thanks to pruthvi, i got the answer , for ios i need to prompt the user:

.then(resp => {
      if (Platform.OS === "ios") {
        RNFetchBlob.ios.openDocument(resp.data);
      }
    })

hope it helps you guys

edited Oct 06 '21 at 06:26

answered Feb 04 '20 at 07:21

Gaurav Roy

11,175
3
24
45

hi sir i need your help in https://stackoverflow.com/questions/76455232/premission-prompt-not-opening-in-react-native this question – Pratik Gaikwad Jun 12 '23 at 10:03

score 9 · Answer 2 · edited Jan 15 '21 at 19:38

Latest working solution:

const actualDownload = () => {
        const { dirs } = RNFetchBlob.fs;
        const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
        const configfb = {
            fileCache: true,
            useDownloadManager: true,
            notification: true,
            mediaScannable: true,
            title: pdfInfo.pdf,
            path: `${dirToSave}/${pdfInfo.pdf}`,
        }
        const configOptions = Platform.select({
            ios: {
                fileCache: configfb.fileCache,
                title: configfb.title,
                path: configfb.path,
                appendExt: 'pdf',
            },
            android: configfb,
        });
    
        console.log('The file saved to 23233', configfb, dirs);
    
        RNFetchBlob.config(configOptions)
            .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${pdfInfo.pdf}`, {})
            .then((res) => {
                if (Platform.OS === "ios") {
                    RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                    RNFetchBlob.ios.previewDocument(configfb.path);
                }
                setisdownloaded(false)
                if (Platform.OS == 'android') {
                    showSnackbar('File downloaded');
                }
                console.log('The file saved to ', res);
            })
            .catch((e) => {
                setisdownloaded(true)
                showSnackbar(e.message);
                console.log('The file saved to ERROR', e.message)
            });
    }

This worked well. But still my downloaded file is not being shown in documents of iOS phone — Hamza Kashif, Aug 30 '23 at 10:50

score 3 · Answer 3 · edited Jun 23 '22 at 03:15

Improving on Ajmall Hasan's answer.
I have to change ${pdfInfo.pdf} to ${'pdfInfo.pdf'} to make it work

const actualDownload = () => {
        const { dirs } = RNFetchBlob.fs;
        const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
        const configfb = {
            fileCache: true,
            useDownloadManager: true,
            notification: true,
            mediaScannable: true,
            title: pdfInfo.pdf,
            path: `${dirToSave}/${'pdfInfo.pdf'}`,
        }
        const configOptions = Platform.select({
            ios: {
                fileCache: configfb.fileCache,
                title: configfb.title,
                path: configfb.path,
                appendExt: 'pdf',
            },
            android: configfb,
        });
    
        console.log('The file saved to ', configfb, dirs);
    
        RNFetchBlob.config(configOptions)
            .fetch('GET', `https://aquatherm.s3.ap-south-1.amazonaws.com/pdfs/${'pdfInfo.pdf'}`, {})
            .then((res) => {
                if (Platform.OS === "ios") {
                    RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
                    RNFetchBlob.ios.previewDocument(configfb.path);
                }
                if (Platform.OS == 'android') {
                    showSnackbar('File downloaded');
                }
                console.log('The file saved to ', res);
            })
            .catch((e) => {
                showSnackbar(e.message);
                console.log('The file saved to ERROR', e.message)
            });
    }

http://www.africau.edu/images/default/sample.pdf replace this URL its works for me — GUGAN RAJ, Dec 06 '21 at 16:57

score 0 · Answer 4 · answered Dec 06 '21 at 17:10

 GetItem_downloadbtn = (item, itemname) => {
var pdfInfo = itemname;
const { dirs } = RNFetchBlob.fs;
const dirToSave = Platform.OS == 'ios' ? dirs.DocumentDir : dirs.DownloadDir
const configfb = {
    fileCache: true,
    useDownloadManager: true,
    notification: true,
    mediaScannable: true,
    title: pdfInfo.pdf,
    path: `${dirToSave}/${itemname}`,
}
const configOptions = Platform.select({
    ios: {
        fileCache: configfb.fileCache,
        title: configfb.title,
        path: configfb.path,
        appendExt: 'pdf',
    },
    android: configfb,
});
console.log('The file saved to 23233', configfb, dirs);

RNFetchBlob.config(configOptions)
    .fetch('GET', item, {})
    .then((res) => {
        if (Platform.OS === "ios") {
            RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
            RNFetchBlob.ios.previewDocument(configfb.path);
        }
        setisdownloaded(false)
        if (Platform.OS == 'android') {
            showSnackbar('File downloaded');
        }
        console.log('The file saved to ', res);
    })
    .catch((e) => {
        setisdownloaded(true)
        showSnackbar(e.message);
        console.log('The file saved to ERROR', e.message)
    });

}

RN fetch blob download docx or pdf from URL in IOS

4 Answers4

Linked