I am trying to read an image file using the URI using react-native-fs and redux-saga:

file:///var/mobile/Containers/Data/Application/605FB6C0-869C-4128-883E-A59616933C64/Documents/images/52108C66-A087-4942-9DD4-22CBD0327089.jpg

Below is the line where I am getting an error while trying to read the image file:

const imageFile = yield call([RNFS, RNFS.readFile], logo.uri);

Below is the error I am getting:

Error: Invalid UTF-8 detected
    at decodeSymbol (utf8.js:194)
    at Object.utf8decode [as decode] (utf8.js:206)
    at FSmon.js:150
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:301
    at _callTimer (JSTimers.js:154)
    at _callImmediatesPass (JSTimers.js:202)
    at Object.callImmediates (JSTimers.js:470)
    at MessageQueue.__callImmediates (MessageQueue.js:275)
    at MessageQueue.js:140

Can someone please tell me what I am doing wrong?

I am trying to read an image file using the URI using react-native-fs and redux-saga:

file:///var/mobile/Containers/Data/Application/605FB6C0-869C-4128-883E-A59616933C64/Documents/images/52108C66-A087-4942-9DD4-22CBD0327089.jpg

Below is the line where I am getting an error while trying to read the image file:

const imageFile = yield call([RNFS, RNFS.readFile], logo.uri);

Below is the error I am getting:

Error: Invalid UTF-8 detected
    at decodeSymbol (utf8.js:194)
    at Object.utf8decode [as decode] (utf8.js:206)
    at FS.mon.js:150
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:301
    at _callTimer (JSTimers.js:154)
    at _callImmediatesPass (JSTimers.js:202)
    at Object.callImmediates (JSTimers.js:470)
    at MessageQueue.__callImmediates (MessageQueue.js:275)
    at MessageQueue.js:140

Can someone please tell me what I am doing wrong?

• javascript
• react-native
• react-redux
• redux-saga
• react-native-fs

• The link contains …, which should not be included in the URI. – Raptor Commented Jan 16, 2018 at 7:10
• Should I replace that? because thats what Uri I got when the user selected an image – Sumanth Jois Commented Jan 16, 2018 at 7:12
• It shouldn't be. It's just too long to be displayed in full. The actual URI is not this one. Please double check. – Raptor Commented Jan 16, 2018 at 7:13
• Sorry I edited the question I have changed the uri please check it out – Sumanth Jois Commented Jan 16, 2018 at 7:14
• perhaps you don't have to read the content, what do you want to do exactly? upload an image ? if so, just find some library to do it, it's weird to get some binary file content in javaScript – yangguang1029 Commented Jan 16, 2018 at 7:46

2 Answers 2

This is how it worked for me with a JPEG file on iOS :

(...)
var RNFS = require('react-native-fs');
(...)
var uri = '{your file uri}'
var img = 'file:///' + (uri.replace('file://', '')); // Must do that for RNFS

RNFS.readFile(img, 'base64') // 'base64' to process binary format
    .then((file) => {
      console.log("Getting image");
      console.log(file);
    })

RNFS only read file as string, the default encoding is utf8. image is binary file, you should try some other library to read it