How to get File path from the document directory in iOS and convert that file to Base64.

[gopikasireddy202]

Hi Team,

Please help me to get the file path from the document in the iOS and also convert the file to Base64 format. Please find my below code and also find the screenshots.

---

async pickupDocuments() { try { const results = await DocumentPicker.pickMultiple({ type: [DocumentPicker.types.allFiles], }); for (const res of results) {

            const split = (res.uri).split('/');
            const name = split.pop();
            const inbox = split.pop();
            const realPath = 'file://'+`${RNFS.DocumentDirectoryPath}${inbox}/${name}`;
            alert(" FILE PATH " + realPath);
            RNFS.readFile(realPath, 'base64').then(res => {

                alert(" RESPONSE " + res)
            })
                .catch(err => {
                    (err.message, err.code);
                    alert("ERROR MSG" + err.message, "ERROR CODE" + err.code)

                });

        }

    }
    catch (err) {
        if (DocumentPicker.isCancel(err)) {
            alert("User Cancel")
        } else {
            //   throw err;
            alert(err)
        }
    }
}

[hank121314]

You should change

RNFS.RNFS.DocumentDirectoryPath

to

RNFS.TemporaryDirectoryPath 

Since react-native-document-picker only provide a temporary url if you don't copy it.

[gopikasireddy202]

Same error I got even I have change the DocumentDirectoryPath to TemporaryDirectoryPath.

On Wed, Aug 5, 2020 at 12:10 PM hank121314 notifications@github.com wrote:

You should change

RNFS.RNFS.DocumentDirectoryPath

to

RNFS.TemporaryDirectoryPath

Since react-native-document-picker only provide a temporary url if you don't copy it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/itinance/react-native-fs/issues/915#issuecomment-669010892, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMLYJ54KGMWXRHRSJ7Q3C3R7D5EPANCNFSM4PUKDKQA .

-- K Gopi Krishna | React-Native Developer / Khameleon M: (+91) 9030363095 <(813)6004060> W: https://www.amzur.com https://www.facebook.com/amzurtech http://www.twitter.com/amzurtech https://www.linkedin.com/company/amzur-technologies-inc/ https://www.instagram.com/amzurtech/?igshid=mgjads2zvq6l https://www.youtube.com/channel/UCs6QJtQfeH-7vbr5CkfFIyg An ISO 9001:2015 Certified Company An ISO 27001:2013 Certified Company

[hank121314]

How about use copyTo in iOS? Like this:

function pickupDocuments() {
  try {
    const results = await DocumentPicker.pickMultiple({
      type: [DocumentPicker.types.allFiles],
      copyTo: "documentDirectory"
    });
    for (const res of results) {
      const split = res.fileCopyUri.split('/');
      const name = split.pop();
      const inbox = split.pop();
      const realPath = 'file://' + `${RNFS.DocumentDirectoryPath}${inbox}/${name}`;
      alert(' FILE PATH ' + realPath);
      RNFS.readFile(realPath, 'base64')
        .then((res) => {
          alert(' RESPONSE ' + res);
        })
        .catch((err) => {
          err.message, err.code;
          alert('ERROR MSG' + err.message, 'ERROR CODE' + err.code);
        });
    }
  } catch (err) {
    if (DocumentPicker.isCancel(err)) {
      alert('User Cancel');
    } else {
      //   throw err;
      alert(err);
    }
  }
}

[gopikasireddy202]

I am used the above code and it returns error.

Please find the screenshot.

On Wed, Aug 5, 2020 at 1:42 PM hank121314 notifications@github.com wrote:

How about use copyTo in iOS? Like this:

function pickupDocuments() { try { const results = await DocumentPicker.pickMultiple({ type: [DocumentPicker.types.allFiles], copyTo: "documentDirectory" }); for (const res of results) { const split = res.fileCopyUri.split('/'); const name = split.pop(); const inbox = split.pop(); const realPath = 'file://' + ${RNFS.DocumentDirectoryPath}${inbox}/${name}; alert(' FILE PATH ' + realPath); RNFS.readFile(realPath, 'base64') .then((res) => { alert(' RESPONSE ' + res); }) .catch((err) => { err.message, err.code; alert('ERROR MSG' + err.message, 'ERROR CODE' + err.code); }); } } catch (err) { if (DocumentPicker.isCancel(err)) { alert('User Cancel'); } else { // throw err; alert(err); } } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/itinance/react-native-fs/issues/915#issuecomment-669050823, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMLYJ4ZD2IVAR2KPQFZV3LR7EIAPANCNFSM4PUKDKQA .

-- K Gopi Krishna | React-Native Developer / Khameleon M: (+91) 9030363095 <(813)6004060> W: https://www.amzur.com https://www.facebook.com/amzurtech http://www.twitter.com/amzurtech https://www.linkedin.com/company/amzur-technologies-inc/ https://www.instagram.com/amzurtech/?igshid=mgjads2zvq6l https://www.youtube.com/channel/UCs6QJtQfeH-7vbr5CkfFIyg An ISO 9001:2015 Certified Company An ISO 27001:2013 Certified Company

[hank121314]

Hi @gopikasireddy202 ! I think I have found the main reason. Because your files contain some whiteSpace will convert to '%20' by react-native-document-picker, we need to do decodeURI to let it work. Please use the code below:

async function pickupDocuments() {
      try {
        const results = await DocumentPicker.pickMultiple({
          type: [DocumentPicker.types.allFiles],
        });
        for (const res of results) {
          const split = res.fileCopyUri.split('/');
          const name = split.pop();
          const inbox = split.pop();
          const realPath = `file://${
            RNFS.TemporaryDirectoryPath
          }/${inbox}/${decodeURI(name)}`;
          console.log(realPath);
          RNFS.readFile(realPath, 'base64')
            .then((res) => {
              Alert.alert('RESPONSE', res);
            })
            .catch((err) => {
              console.log('ERROR MSG' + err.message, 'ERROR CODE' + err.code);
            });
        }
      } catch (err) {
        if (DocumentPicker.isCancel(err)) {
          console.log('User Cancel');
        } else {
          //   throw err;
          console.log(err);
        }
      }
    }

[gopikasireddy202]

Thanks. It works fine for me.When I upload the large size documents like PDF in MB size then app is crashed.While I am upload the PDF in KB then app is not crashed.

On Thu, Aug 6, 2020 at 6:42 AM hank121314 notifications@github.com wrote:

Hi @gopikasireddy202 https://github.com/gopikasireddy202 ! I think I have found the main reason. Because your files contain some whiteSpace will convert to '%20' by react-native-document-picker, we need to do decodeURI to let it work. Please use the code below:

async function pickupDocuments() { try { const results = await DocumentPicker.pickMultiple({ type: [DocumentPicker.types.allFiles], }); for (const res of results) { const split = res.fileCopyUri.split('/'); const name = split.pop(); const inbox = split.pop(); const realPath = file://${ RNFS.TemporaryDirectoryPath }/${inbox}/${decodeURI(name)}; console.log(realPath); RNFS.readFile(realPath, 'base64') .then((res) => { Alert.alert('RESPONSE', res); }) .catch((err) => { console.log('ERROR MSG' + err.message, 'ERROR CODE' + err.code); }); } } catch (err) { if (DocumentPicker.isCancel(err)) { console.log('User Cancel'); } else { // throw err; console.log(err); } } }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/itinance/react-native-fs/issues/915#issuecomment-669625308, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKMLYJ323WQQQHAEYGN5O5DR7H7Q5ANCNFSM4PUKDKQA .

-- K Gopi Krishna | React-Native Developer / Khameleon M: (+91) 9030363095 <(813)6004060> W: https://www.amzur.com https://www.facebook.com/amzurtech http://www.twitter.com/amzurtech https://www.linkedin.com/company/amzur-technologies-inc/ https://www.instagram.com/amzurtech/?igshid=mgjads2zvq6l https://www.youtube.com/channel/UCs6QJtQfeH-7vbr5CkfFIyg An ISO 9001:2015 Certified Company An ISO 27001:2013 Certified Company