Unable to download file in Android 11 (ENOENT: no such file or directory, open '/storage/emulated/0/fileName.pdf')

[pankajnegi1893]

I am trying to download the File in Android 11 but unable to download the file. Every time it's giving ENOENT: no such file or directory, open '/storage/emulated/0/fileName.pdf' error.

FileHelper.js

const { PermissionsAndroid, Platform } = require("react-native");
         import RNFS from "react-native-fs";
         const requestStoragePermission = async () => {
         try {
               const granted = await PermissionsAndroid.request(
                 PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                 {
                   title: "Storage Permission",
                  message: "requires Storage Permission",
                  buttonNegative: "Cancel",
                  buttonPositive: "OK",
               },
            );
             if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                return true;
            } else {
              return false;
            }
            } catch (err) {
               console.warn(err);
                 return false;
            }
         };

    export const FILE_TYPE = {
        UPLOADING_START: 'uploadingStart',
        UPLOADING: 'uploading',
        DOWNLOADING_START: 'downloading_start',
        DOWNLOADING: 'downloading',
        FINISHED: 'finished',
     };

    export const downloadPDFFile = async (
         callback,
         serverFilePath = "https://www.mathworksheets4kids.com/add-sub/3by2-1.pdf",
         serverFileName = "3by2-1.pdf",
       ) => {
         try {
              if (Platform.OS == 'android') {
             const isPermissionGranted = await requestStoragePermission();
             if (!isPermissionGranted) {
                alert('You have cancelled the permission');
                 return;
             }
         }
          let path;
          let serveFileNameReplace = serverFileName.replace(/ /g, "%20");
          let serverURL = serverFilePath.replace(/ /g, "%20");
          if (Platform.OS == 'ios') {
              path = `${RNFS.DocumentDirectoryPath}/${serveFileNameReplace}`;
          } else {
             path = `${RNFS.ExternalStorageDirectoryPath}/${serveFileNameReplace}`;
         }
           console.log("===>",path);
         RNFS.downloadFile({
          fromUrl: serverURL,
          toFile: path,
          background: false,
          cacheable: false,
          connectionTimeout: 60 * 1000,
           readTimeout: 120 * 1000,
           begin: (res) => {
 
            console.log('begin :- ', res);
            callback({
               status: FILE_TYPE.DOWNLOADING_START,
               percentage: 0,
             });
         },
       progress: (res) => {
            console.log('res :- ', res);
           let percentage
            if(res.contentLength == -1){
             percentage = 0;
            }else {
              percentage = (res.bytesWritten * 100) / res.contentLength;
              percentage = Math.round(percentage);
           }
           if (percentage >= 100) {
             callback({
                status: FILE_TYPE.FINISHED,
               percentage: percentage,
           });
         } else {
           callback({
             status: FILE_TYPE.DOWNLOADING,
             percentage: percentage,
             path: path,
           });
         }
       },
       
     }).promise.then((res) => {
       console.log('res :- ', res);
       callback({
         status: FILE_TYPE.FINISHED,
         percentage: 100,
         path: path,
       });
     }).catch((err) => {
       console.log(err);
       alert(err);
     });
   } catch (err) {
     if (err.description === 'cancelled') {
       // cancelled by user
     }
     console.log(err);
     }
   };```

App.js 

    import React from 'react';
    import {
      SafeAreaView,
     View,
     Text,
     StatusBar,
     TouchableOpacity,
     } from 'react-native';
    import {downloadPDFFile} from './src/FileHelper';

  const App = () => {
      return (
             <>
               <StatusBar barStyle="dark-content" />
              <SafeAreaView>
                    <View style={{flex:1, marginTop: '50%', marginLeft: '10%'}}>
                         <TouchableOpacity 
                                  style={{
                                         justifyContent:'center',
                                         alignItems:'center',
                                         width: '80%',
                                         height: 40,
                                         backgroundColor: 'green'
                                     }}
                                onPress={() => {
                                      downloadPDFFile((res) => {
                                                console.log(res);
                                      });
                                 }}>
                              <Text style={{color: '#000000'}}>Download File</Text>
                        </TouchableOpacity>
                    </View>
             </SafeAreaView>
          </>);
      };
     export default App;

AndroidManifest:-

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
       package="com.awesomeprojectandroid11">

     <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
         tools:ignore="ScopedStorage" />
       <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
       <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
       <application
         android:name=".MainApplication"
         android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
        android:preserveLegacyExternalStorage="true"
        tools:ignore="GoogleAppIndexingWarning,UnusedAttribute"
        android:theme="@style/AppTheme">
       <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
          android:launchMode="singleTask"
           android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>

react-native-fs I am using to download the File. But it's not working. 

[moygospadin]

Hello do u solve the problem?

[xgenem]

Seriously...

[Yandamuri]

try for the permission in following way,

const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);

[R4DIC4L]

If you want to be able to download a document to android storage, you must request user permission for PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE before downloading and saving to storage, as mentioned by @Yandamuri . But if you also want to view/open the document for the user, you must also request user permission PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE before attempting to open it.

For older versions of android, you must add the necessary permissions from above (see below) to AndroidManifest.xml under manifest tag before application tag. These are requested when installing the app rather than when using them and this applies to other android permissions as well (bluetooth, camera etc).

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="<your package name here>">
    ...
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    ...
    <application
    ....
    </application>
</manifest>

[Yandamuri]

@R4DIC4L Can you please let us know up to what version of android permissions need to be mentioned in Androidmanifest.xml?

[R4DIC4L]

@Yandamuri As mentioned in https://developer.android.com/guide/topics/manifest/uses-permission-element:
Permissions are granted by the user when the application is installed (on devices running Android 5.1 and lower) or while the app is running (on devices running Android 6.0 and higher).

I find it good practice to also include the permisions in the manifest since for android 5.1 and below it is easy to do and handled by the Play Store automatically at install time (you receive Granted when asking in code by default as the user acknowledges all necessary permissions when agreeing to install your app), permissions also show in the app page when you tap See permissions in About page. But you can skip this if your users must have Android 6 and above to install the app.

[R4DIC4L]

Also, keep in mind that android 11 added scoped storage for apps by default and all react-native packages that I know of are not yet prepared to handle this. Until a next android version, you can opt out of this as mentioned here: https://developer.android.com/about/versions/11/privacy/storage.

So you probably also need to set requestLegacyExternalStorage="true" on the application node in the manifest for using the old storage model also on android 11, check android developer documentation for more info. In the link above it is stated that:
The default value is: - false for apps with targetSdkVersion >= 29 (Q). - true for apps with targetSdkVersion < 29.

[i1990jain]

<application
        android:requestLegacyExternalStorage="true"

setting this solves the file download error on Android 10/11

[marf]

Hello, since by the 5th of May Google Play will ignore this flag and remove app that do not use API like Media Store or Storage Access Framework how should we handle this?

[Yandamuri]

@marf is there any official note regarding this? if so, Can you please ping me the link?

[marf]

Hello @Yandamuri,
this is the reference: docs.

The flag

<application
        android:requestLegacyExternalStorage="true" 

will be ignored soon and also app uploaded with this flag enable are receiving a warning form Google about this fact.

Thank you!

[cstehreem]

Has anyone found a workaround for this? Since the May 5th deadline is pretty close..

[rcerrejon]

@marf
For an update from the app I found a backward compatibility with legacyExternalStorage, but is only for updates, not for new installations.
with the flag:

android/app/src/main/AndroidManifest.xml

<application 
      android:preserveLegacyExternalStorage="true"

API 30 is needed to found the flag android:preserveLegacyExternalStorage.

android/build.gradle

        targetSdkVersion = 30
        compileSdkVersion = 30