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?

The link contains `…`, which should not be included in the URI. — Raptor, Jan 16 '18 at 07:10
Should I replace that? because thats what Uri I got when the user selected an image — Sumanth Jois, Jan 16 '18 at 07: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, Jan 16 '18 at 07:13
Sorry I edited the question I have changed the uri please check it out — Sumanth Jois, Jan 16 '18 at 07: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, Jan 16 '18 at 07:46
I want to upload the file to firebase and I am using redux-saga — Sumanth Jois, Jan 16 '18 at 07:48
To upload a file to firebase I will need it as a BLOB or a File thats what I am trying to do — Sumanth Jois, Jan 16 '18 at 07:48

score 6 · Answer 1 · answered Apr 07 '18 at 10:00

6

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

answered Apr 07 '18 at 10:00

Jan ATAC

1,212
1
18
36

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. – Seb Mar 17 '20 at 11:31

score -1 · Answer 2 · answered Jan 16 '18 at 07:36

-1

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

answered Jan 16 '18 at 07:36

yangguang1029

1,813
14
16

Do you know any other library? I have tried searching for one but couldn;t find any – Sumanth Jois Jan 16 '18 at 07:37
take a look at [this](https://www.npmjs.com/package/react-native-fetch-blob#file-stream) @Jois – yangguang1029 Jan 16 '18 at 07:40
It only supports base64 ascii and utf8 – Sumanth Jois Jan 16 '18 at 07:42
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? – P.Lorand Feb 14 '18 at 10:30

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

2 Answers2