Rn-fetch-blob: Show Downloaded File and Notification in Android Downloads App.

[ghost]

Hi,

I'm trying to make a pdf that I have downloaded via react-native-pdf visible in any of the file directories on android.

I can copy the filepath returned by react-native-pdf, add a notification using RNFetchBlob.android.addCompleteDownload and click on the file, which flicks back to my app, but only if app in foreground.

But I want user to be able to see file in the Files app on android.

savePdf = () => {
const newPath = ${RNFetchBlob.fs.dirs.DocumentDir}/Invoice-${this.props.currentInvoiceNumber}.pdf

RNFetchBlob.fs.cp(this.state.filePath, newPath)
  .then(() => {
    if (Platform.OS === 'ios') {
      RNFetchBlob.ios.previewDocument(newPath)
    } else {
      RNFetchBlob.fs.scanFile([{ path: newPath, mime: 'application/pdf' }])
      .then(() => {
        RNFetchBlob.android.addCompleteDownload({
          title: `Invoice ${this.props.currentInvoiceNumber}`,
          description: 'desc',
          mime: 'application/pdf',
          path: newPath,
          showNotification: true,
          notification: true
        })
      })
      .catch((err) => {
      })
    }
  })
  .catch((err) => {
  })

}

[simonedavico]

I have the same issue currently, clicking the notification tries to open my app and I don't see the file through the Files application.

@joltup, any idea?

[kuzkokov]

Hey guys. Same thing with react-native-pdf and local downloads. I managed to solve this problem. Topic starter doesn't need it anymore for sure, but probably it might help future seekers. You also need permissions for Android, so here is the full code.

if (isIOS) {
  await RNFetchBlob.ios.previewDocument(path);
} else {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
    {
      title: 'Permission to save file into the file storage',
      message: 'The app needs access to your file storage so you can download the file',
      buttonNeutral: 'Ask Me Later',
      buttonNegative: 'Cancel',
      buttonPositive: 'OK',
    }
  );

  if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
    throw new Error();
  }

  const filePath = `${RNFetchBlob.fs.dirs.DownloadDir}/${fileName}`;
  RNFetchBlob.fs
    .cp(path, filePath)
    .then(() =>
      RNFetchBlob.android.addCompleteDownload({
        title: fileName,
        description: 'Download complete',
        mime: 'application/pdf',
        path: filePath,
        showNotification: true,
      })
    )
    .then(() =>
      RNFetchBlob.fs.scanFile([
        { path: filePath, mime: 'application/pdf' },
      ])
    );
}

[nikbelikov]

Hey guys. Same thing with react-native-pdf and local downloads. I managed to solve this problem. Topic starter doesn't need it anymore for sure, but probably it might help future seekers. You also need permissions for Android, so here is the full code.

if (isIOS) {
  await RNFetchBlob.ios.previewDocument(path);
} else {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
    {
      title: 'Permission to save file into the file storage',
      message: 'The app needs access to your file storage so you can download the file',
      buttonNeutral: 'Ask Me Later',
      buttonNegative: 'Cancel',
      buttonPositive: 'OK',
    }
  );

  if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
    throw new Error();
  }

  const filePath = `${RNFetchBlob.fs.dirs.DownloadDir}/${fileName}`;
  RNFetchBlob.fs
    .cp(path, filePath)
    .then(() =>
      RNFetchBlob.android.addCompleteDownload({
        title: fileName,
        description: 'Download complete',
        mime: 'application/pdf',
        path: filePath,
        showNotification: true,
      })
    )
    .then(() =>
      RNFetchBlob.fs.scanFile([
        { path: filePath, mime: 'application/pdf' },
      ])
    );
}

thank you very much! that helped me a lot!