Cannot save image in IOS only.

[niraj-khatiwada]

Works on IOS but I can't seem to figure out how to save in IOS.

 "react-native": "^0.63.4",
 "rn-fetch-blob": "^0.12.0",

Code:

const handleDownload = React.useCallback(async () => {
    try {
      if (!permissionGranted) {
        permissionRef.current = true;
        await checkPermission(
          'storage',
          setPermissionGranted,
          true,
          true,
          false,
        );
      } else {
        const fs = RNFetchBlob.fs;
        const PictureDir =
          fs.dirs[Platform.OS === 'ios' ? 'LibraryDir' : 'PictureDir'];
        const path = `${PictureDir}/Images/image_${+new Date()}.png`;
        await fs.writeFile(path, svgRef.current, 'base64');
        showToast({type: 'success', message: locale.QrCodeSaved});
      }
    } catch (_) {
      showToast({message: locale['SomethingWentWrong.']});
    }
  }, [name, permissionGranted]);

Here svg.current is the base64 url with no data:image/png;base64,

The writeFile does not show any error, but the images are not saved.

Thanks!

[tdammy92]

@niraj-khatiwada Please did you find a way around this ?? having same issues on IOs

[SectionJ]

@niraj-khatiwada did you find a way to solve it?

[A-Vijay]

const { dirs } = RNFetchBlob.fs; const PictureDir = Platform.OS === 'ios' ? dirs.DocumentDir : dirs.PictureDir ;

[tdammy92]

@A-Vijay have tried this didnt work either, i add to use the RNFetchBlob.ios.previewDocument.(response?.path()) so this shows a dialogue prompting the user where to save the file. which i dont like the flow.

[VijayA61]

const configOptions = Platform.select({ ios: { fileCache: true, path: fPath, appendExt: ext } });

let imagePath = null;
RNFetchBlob.config(configOptions)
  .fetch('GET', image_URL)
  .then( (res) => {
    imagePath = res.path();
    return res.readFile('base64');
  }).then(base64Data => {
    this.setState({ showDownloadingLoader: false }) ;
    if (Platform.OS == 'ios'){
      RNFetchBlob.fs.writeFile(imagePath, base64Data, 'base64') .then( (res) => {
        console.log('IMAGE saved ', res);
      });
    }
  })
  .catch((e) => {
    console.log('The file  ERROR', e.message);
  });

@tdammy92 can you check this once. One the image is saved you can check that in your files.

[tdammy92]

const configOptions = Platform.select({ ios: { fileCache: true, path: fPath, appendExt: ext } });

let imagePath = null;
RNFetchBlob.config(configOptions)
  .fetch('GET', image_URL)
  .then( (res) => {
    imagePath = res.path();
    return res.readFile('base64');
  }).then(base64Data => {
    this.setState({ showDownloadingLoader: false }) ;
    if (Platform.OS == 'ios'){
      RNFetchBlob.fs.writeFile(imagePath, base64Data, 'base64') .then( (res) => {
        console.log('IMAGE saved ', res);
      });
    }
  })
  .catch((e) => {
    console.log('The file  ERROR', e.message);
  });

@tdammy92 can you check this once. One the image is saved you can check that in your files.

Ok thanks will implement and give a feedback.

[dentep]

const configOptions = Platform.select({ ios: { fileCache: true, path: fPath, appendExt: ext } });

let imagePath = null;
RNFetchBlob.config(configOptions)
  .fetch('GET', image_URL)
  .then( (res) => {
    imagePath = res.path();
    return res.readFile('base64');
  }).then(base64Data => {
    this.setState({ showDownloadingLoader: false }) ;
    if (Platform.OS == 'ios'){
      RNFetchBlob.fs.writeFile(imagePath, base64Data, 'base64') .then( (res) => {
        console.log('IMAGE saved ', res);
      });
    }
  })
  .catch((e) => {
    console.log('The file  ERROR', e.message);
  });

@tdammy92 can you check this once. One the image is saved you can check that in your files.

return res.readFile('base64');

return undefined