React-native Invalid UTF-8 detected while trying to read a image file

Question

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.common.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?

Dib

The link contains …, which should not be included in the URI. – Monicamonie

Should I replace that? because thats what Uri I got when the user selected an image – Dib

It shouldn't be. It's just too long to be displayed in full. The actual URI is not this one. Please double check. – Monicamonie

Sorry I edited the question I have changed the uri please check it out – Dib

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 – Church

I want to upload the file to firebase and I am using redux-saga – Dib

To upload a file to firebase I will need it as a BLOB or a File thats what I am trying to do – Dib

Answer 1

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);
    })

Wee

Where you able to decode the read file with: jpeg.decode() from the module jpeg-js? Because this results in [Error: SOI not found], like the result from readFile was invalid jpg. – Lientery

Answer 2

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

Church

Do you know any other library? I have tried searching for one but couldn;t find any – Dib

take a look at this @Jois – Church

It only supports base64 ascii and utf8 – Dib

But in the RNFS documentation for the 'readFile' method it says that: Reads the file at path and return contents. So it should return the image and not only the path wright? – Ferullo