CODEWITHSUNDEEP
react-nativereact-native-fs
Arnaud
Arnaud

Reputation: 5122

How to download a file with React Native?

I am building an app with React Native, for Android and iOS. I am trying to let the user download a PDF file when clicking on a button.

I do not find other solutions for this problem. I have found libraries for viewing a PDF, but I would like to let the user download the PDF.

Upvotes: 52

Views: 153516

Answers (5)

Ray
Ray

Reputation: 9684

Follow these steps:

  1. Run npm install rn-fetch-blob.

  2. Follow the installation instructions. If you want to manually install the package without using rnpm, go to their wiki.

  3. Finally, that's how I made it possible to download files within my app:

    const { config, fs } = RNFetchBlob
    let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
    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', "http://www.example.com/example.pdf").then((res) => {
      // do some magic here
    })

Upvotes: 61

GUGAN RAJ
GUGAN RAJ

Reputation: 111

  GetItem_downloadbtn = (item, itemname) => {
    console.log("fiel url comiugn jdd   " + item);
    console.log("item name checkoing " + itemname);
    const android = RNFetchBlob.android;
    const filename = itemname;
    const filepath = RNFetchBlob.fs.dirs.DownloadDir + '/foldernamae/' + filename;
    const downloadAppUrl = item;

    RNFetchBlob.config({
        addAndroidDownloads: {
            useDownloadManager: true,
            title: 'great, download success',
            description:'an apk that will be download',
            mime: 'application/vnd.android.package-archive',
            // mime: 'image/jpeg',
            // mediaScannable: true,
            notification: true,
            path: filepath
        }
    })
    .fetch('GET', downloadAppUrl)
    .then((res) => {
        // console.log('res.path ', res.path());
        alert('res.path ', res.path());
        android.actionViewIntent(res.path(), 'application/vnd.android.package-archive');
    })
    .catch((err) => {
        alert('download error, err is', JSON.stringify(err));
    });
  }

Upvotes: 2

Rogerio Gelonezi
Rogerio Gelonezi

Reputation: 344

I Followed the solution from Jonathan Simonney, above on this post. But I had to change it a little:

const { config, fs } = RNFetchBlob;
  const date = new Date();

  const { DownloadDir } = fs.dirs; // You can check the available directories in the wiki.
  const options = {
    fileCache: true,
    addAndroidDownloads: {
      useDownloadManager: true, // true will use native manager and be shown on notification bar.
      notification: true,
      path: `${DownloadDir}/me_${Math.floor(date.getTime() + date.getSeconds() / 2)}.pdf`,
      description: 'Downloading.',
    },
  };

  config(options).fetch('GET', 'http://www.africau.edu/images/default/sample.pdf').then((res) => {
    console.log('do some magic in here');
  });

Upvotes: 6

Sameer Ali
Sameer Ali

Reputation: 9

I had the same issue, got it working using Expo WebBrowser Module

// install module 
npm install react-native-webview

// import the module
import * as WebBrowser from 'expo-web-browser';

// then in your function you can call this function
await WebBrowser.openBrowserAsync(file_ur);

it will open preview of the file and then user can download using share button.

Upvotes: 0

Fancy John
Fancy John

Reputation: 39428

If you're using Expo, react-native-fetch-blob won't work. Use FileSystem.

Here's a working example:

const { uri: localUri } = await FileSystem.downloadAsync(remoteUri, FileSystem.documentDirectory + 'name.ext');

Now you have localUri with the path to the downloaded file. Feel free to set your own filename instead of name.ext.

Upvotes: 28

Related Questions