0

I'm receieving a blob from api and i want to save it as a pdf document to file system.But on saving I'm getting a file with size 0B in my mobile

Code

export const getParkingReciept = (bookindId) => {
   
     return async function (dispatch, getState) {

      try {
    const TOKEN = getState().Auth.token;

    const formdata = new FormData();
  formdata.append("booking_id", bookindId);


    RNFetchBlob.fetch(
        'POST',
        `${BASE_URL}parking-space/booking/receipt`,
        { 
            'Accept': 'application/json',
            'Authorization': `Bearer ${TOKEN}`,
            'Content-Type': 'multipart/form-data'
        },[

            { name : 'booking_id',  data: bookindId.toString()}
          ]
    )
    .then(
        response => {
            console.log("response is ",response);
        response.blob().then(res=>console.log(checkPermission(res,response.taskId)));
       console.log("pdf base64 is ", response.base64());

 }
    ).catch((error) => {
        // error handling
        console.log("Error", error)
    }
    
    
    );
    
}catch (e) {
    if (e.response) {
        console.log("error response is ", e.response);
    } else if (e.request) {
        console.log(e.request);
    } else {
        console.log('Error', e);
    }
    console.log(e.config);
}
}    
const checkPermission=async (file,name) => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: "Cool Photo App Camera Permission",
          message:
            "Cool Photo App needs access to your camera " +
            "so you can take awesome pictures.",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can write to external storage");
        var path = RNFS.DownloadDirectoryPath + '/'+name+".pdf";
console.log("pdf being written is ",file);

        RNFS.writeFile(path,  file, 'utf8')
        .then((success) => {
          console.log('FILE WRITTEN!');
          RNFetchBlob.fs.scanFile([ { path : path, mime : "application/pdf" } ])
          //     .then(() => {
          //       console.log("scan file success")
          //     })
          //     .catch((err) => {
          //       console.log("scan file error")
          //     })
        })
        .catch((err) => {
          console.log(err.message);
        });
      } else {
        console.log("permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };

reponse I get from fetch is enter image description here

on calling blob() function of response what I get is enter image description here

There is type Application/pdf there ,but in base 64 string does not start with JVBERi it starts with some SFRUU,Is that a valid pdf file?. What am I missing ? what am I doing wrong here?

Arjun
  • 1,116
  • 3
  • 24
  • 44

1 Answers1

0

This answer solves your problem , gives you detailed explanation about how to download files from a network request using rn fetch blob

https://stackoverflow.com/a/56890611/7324484

Once you downloaded the file or you can open the pdf directly using

https://www.npmjs.com/package/react-native-pdf

Vivek Jm
  • 121
  • 1
  • 2
  • 6