Search code examples
javascripttypescriptreact-nativeexpofilesystems

React Native Expo - Directory for 'file:///xxx' doesn't exist when using downloadResumable.downloadAsync()

Before is my code to download file in the RN fileSystem

import * as FileSystem from 'expo-file-system';
...
const callback = () => {...}
const url = 'http://techslides.com/demos/sample-videos/small.mp4';
const outputDir = `${FileSystem.documentDirectory}${'some-title'}.mp4`;

const downloadResumable = FileSystem.createDownloadResumable(url, outputDir, {}, callback);

try {
  const { uri } = await downloadResumable.downloadAsync();
  console.log('Finished downloading to ', uri);
} catch (e) {
  console.error(e);
}

The error appears as below

Directory for 'file:///Users/CCCC/Library/Developer/CoreSimulator/Devices/E87E063B-79E8-41BF-A577-AA49182563DF/data/Containers/Data/Application/F5DDDD75-D189-48E6-8147-A34CFBD2F3E9/Documents/ExponentExperienceData/%40anonymous%2Freact-native-app-f9653fe1-4d31-4314-a801-d0d158dd59b1/eob/88000954-101-246844-29062022165701.pdf.pdf' doesn't exist. Please make sure directory '/Users/CCCC/Library/Developer/CoreSimulator/Devices/E87E063B-79E8-41BF-A577-AA49182563DF/data/Containers/Data/Application/F5DDDD75-D189-48E6-8147-A34CFBD2F3E9/Documents/ExponentExperienceData/%40anonymous%2Freact-native-app-f9653fe1-4d31-4314-a801-d0d158dd59b1/eob' exists before calling downloadAsync.
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:104:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:240:21 in DownloadResumable#downloadAsync
at http://192.168.1.97:19000/index.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:320670:16 in Promise
at node_modules/expo-file-system/build/FileSystem.js:232:4 in DownloadResumable#downloadAsync
...

How can I fix it?

Solution

  • Looks like I have to create the folder, if it doesn't exist.

    The fix is

    import * as FileSystem from 'expo-file-system';
...
const callback = () => {...}
const url = 'http://techslides.com/demos/sample-videos/small.mp4';
const outputDir = `${FileSystem.documentDirectory}${'some-title'}.mp4`;

const downloadResumable = FileSystem.createDownloadResumable(url, outputDir, {}, callback);

try {
   const directoryInfo = await FileSystem.getInfoAsync(outputDir);
   if (!directoryInfo.exists) {
       await FileSystem.makeDirectoryAsync(outputDir, { intermediates: true 
       });
   }

  const { uri } = await downloadResumable.downloadAsync();
  console.log('Finished downloading to ', uri);
} catch (e) {
  console.error(e);
}

    Reference:
    https://docs.expo.dev/versions/latest/sdk/filesystem/#managing-giphys