How to read a jpg file from file system using expo?

Question

I downloaded an image(a.jpg) using expo using the code:

 FileSystem.downloadAsync(
                    httpUrl,
                    FileSystem.documentDirectory + location
                ).then((result)=>{
                    const uri = result.uri;
                }).catch((err)=>{
                    console.log("​getFile -> err", err);}
);

The file is successfully saved in the file system. Later when I try to read the file, I get an error that file couldn't be read. Code used to read the file:

const fileInfo = await FileSystem.getInfoAsync(uri);
if(fileInfo.exists){
            FileSystem.readAsStringAsync(uri).then(data => {
                const base64 = 'data:image/jpg;base64' + data;
                resolve(data) ; 
            }).catch(err => {
                console.log("​getFile -> err", err);
                reject(err) ;
            });
 }

The above code returns an error that file couldn't be read. fileInfo.exists is true as the file exists in the file system.

 ​getFile -> fileInfo Object {
    "exists": 1,
     "isDirectory": false,
     "modificationTime": 1547272322.8714085,
     "size": 51725,
    "uri": "file:///Users/deeparora/Library/Developer/CoreSimulator/Devices/A2DC4519-       C18C-4512-8C23-E624A1DAA506/data/Containers/Data/Application/6D7B23AA-      A555-4F9A-B9D1-EB5B9443CCB6/Documents/ExponentExperienceData/       %2540anonymous%252Fhola-vet-6faee8ac-e309-4d5b-a1c0-6f8688f8a508/a.jpg",
:}

Error when reading the file:

err [Error: File 'file:///Users/deeparora/Library/Developer/CoreSimulator/Devices/A2DC4519-C18C-4512-8C23-E624A1DAA506/data/Containers/Data/
Application/6D7B23AA-A555-4F9A-B9D1-EB5B9443CCB6/
Documents/ExponentExperienceData/%2540anonymous%252Fhola-vet-6faee8ac-e309-4d5b-a1c0-6f8688f8a508/a.jpg' could not be read.]

If instead of jpg(a.jpg), I try to read a text file(a.json), everything works well. So, FileSystem.readAsStringAsync works fine for the text file, not for jpg. May be, there is need to provide other parameters as options to this methods for it to read jpg as base64 string.

Answer 1

It's due to the fact that you are not telling FileSystem.readAsStringAsync that the encoding type that you require is base64.

Try using

let options = { encoding: FileSystem.EncodingTypes.Base64 };
FileSystem.readAsStringAsync(uri, options).then(data => {
            const base64 = 'data:image/jpg;base64' + data;
            resolve(base64); // are you sure you want to resolve the data and not the base64 string? 
        }).catch(err => {
            console.log("​getFile -> err", err);
            reject(err) ;
        });

You can see more about the different options in the docs. https://docs.expo.io/versions/latest/sdk/filesystem#expofilesystemreadasstringasyncfileuri-options

Here is a snack of it working with async/await https://snack.expo.io/Hk-m38wfN