React-native-document-picker: Error trying load files from iCloud, Dropbox

[johuder33]

Hi, @Elyx0 , first at all, great module for RN, your work is amazing.

I've been using your module, quite good, but I face an issue with it.

when trying load files from iCloud or Dropbox, the module it can't able to find it, also I've tried with

• react-native-fs
• react-native-fetch-blob

but not luck, it throw theses errors.

I've been trying all these codes

loadFile(url) {
    console.log("START LOADING FILES");
    setTimeout(() => {
      console.log("LOADING FILES");

      const parts = url.split("/");
      const _parts = url.split("/");
      const name = parts.pop();
      const inbox = parts.pop();
      const mainPath = `${RNFS.MainBundlePath}/${inbox}/${name}`;
      const cachaPath = `${RNFS.CachesDirectoryPath}/${inbox}/${name}`;
      const documentPath = `${RNFS.DocumentDirectoryPath}/${inbox}/${name}`;
      const tmpPath = `${RNFS.TemporaryDirectoryPath}/${inbox}/${name}`;

      _parts.shift();
      _parts.shift();
      _parts.shift();
      _parts.shift();

      const _url = _parts.join("/");

      // URL
      RNFetchBlob.fs.stat(`/${_url}`)
        .then((file) => {
          console.log("_url SUCCESS", file);
          file.path = url;
          //uploadFile(file);
        })
        .catch((err) => {
          console.log("_url => ERROR", err)
        });

      RNFS.stat(`/${_url}`)
        .then((file) => {
          console.log("RNFS _url SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS _url ERROR", err);
        });

      RNFS.stat(url)
        .then((file) => {
          console.log("RNFS URL SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS URL ERROR", err);
        });

      RNFS.stat(mainPath)
        .then((file) => {
          console.log("RNFS mainPath SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS mainPath ERROR", err);
        });

      RNFS.stat(cachaPath)
        .then((file) => {
          console.log("RNFS cachaPath SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS cachaPath ERROR", err);
        });

      RNFS.stat(documentPath)
        .then((file) => {
          console.log("RNFS documentPath SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS documentPath ERROR", err);
        });

      RNFS.stat(tmpPath)
        .then((file) => {
          console.log("RNFS tmpPath SUCCESS", file);
        })
        .catch((err) => {
          console.log("RNFS tmpPath ERROR", err);
        });

      // URL
      RNFetchBlob.fs.stat(url)
        .then((file) => {
          console.log("URL SUCCESS", file);
          file.path = url;
          //uploadFile(file);
        })
        .catch((err) => {
          console.log("URL => ERROR", err)
        });

      // MAIN
      RNFetchBlob.fs.stat(mainPath)
      .then((file) => {
        console.log("mainPath SUCCESS", file);
        file.path = url;
        //uploadFile(file);
      })
      .catch((err) => {
        console.log("mainPath => ERROR", err)
      });

      // CACHE
      RNFetchBlob.fs.stat(cachaPath)
        .then((file) => {
          console.log("cachaPath SUCCESS", file);
          file.path = url;
          //uploadFile(file);
        })
        .catch((err) => {
          console.log("cachaPath => ERROR", err)
        });

      // DOCUMENT
      RNFetchBlob.fs.stat(documentPath)
        .then((file) => {
          console.log("documentPath SUCCESS", file);
          file.path = url;
          //uploadFile(file);
        })
        .catch((err) => {
          console.log("documentPath => ERROR", err)
        });

      // TEMP
      RNFetchBlob.fs.stat(tmpPath)
        .then((file) => {
          console.log("tmpPath SUCCESS", tmpPath);
          file.path = url;
          //uploadFile(file);
        })
        .catch((err) => {
          console.log("tmpPath => ERROR", err)
        });
    }, 5000);
  }

please, point me in the right direction to make this work.

Thanks.

[johuder33]

@Elyx0 I already solved the issue, we noticed that all files that couldn't load have something in common, all of them have spaces between their name so we need to decode their names to be able to load them.

So, thanks, I will close this unnecessary issue.

[sibelius]

@johuder33 could you post you code solution here?

[johuder33]

Sure @sibelius , this is my solution code

I have a loadFileStatFromURL function to get stat info of the file and then upload to the server with some of the metadata that stat can give me, like size, type, lastModified, etc.

I always use decodeURIComponent function to decode the url that comes from document picker.

const loadFileStatFromURL = (url) => {
  const urlDecoded = decodeURIComponent(url);
  return new Promise((resolve, reject) => {
    RNFetchBlob.fs.stat(urlDecoded)
      .then(resolve)
      .catch(reject);
  });
};

[Elyx0]

This should go in a wiki hmm. Gonna look at opening one

[leoyb]

@johuder33 hi, i follow your code to do, but it is not work for me, can you post detailed code? or a link of demo?