Can FileSystem.readAsStringAsync() reads base64 uri?

Hi,

I have the following setup, when user take picture using ImagePicker it will save it to FileSystem.documentDirectory using the following piece of code:

saveAvatar = async (uri) => {
    await Expo.FileSystem.moveAsync({
      from: uri,
      to: Expo.FileSystem.documentDirectory + 'avatar/profile'
    })
  }

  _takePhoto = async () => {
    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: false,
      base64: true,
      quality: 0.4
    });

    if (!result.cancelled) {
      this.setState({ image: result.base64 });
      this.saveAvatar(result.uri)
    }
  }; 

Then I tried checking retrieving it using this:

ensureDirAsync = async () => {
        const props = await FileSystem.getInfoAsync(FileSystem.documentDirectory + 'avatar/');

        if (props.exists && props.isDirectory) {
            return props;
        }

        try {
            await FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + 'avatar/', { intermediates: true });
        }
        catch (e) {
            console.log(e);
        }

        return await this.ensureDirAsync()
    }

    getAvatar = async () => {
        let dir = await this.ensureDirAsync(),
            filename = await FileSystem.readDirectoryAsync(dir.uri),
            data = null;
        const props = await FileSystem.getInfoAsync(dir.uri + filename[0])
        console.log(props)
        try {
            data = await FileSystem.readAsStringAsync(FileSystem.documentDirectory + 'avatar/profile');
        }
        catch (e) {
            console.log(e);
        }
        console.log(data)
        return data;
    }

The weird thing is, const props = await FileSystem.getInfoAsync(dir.uri + filename[0]) is printing this:

Object {
  "exists": 1,
  "isDirectory": false,
  "modificationTime": 1532930978,
  "size": 399861,
  "uri": "file:///var/mobile/Containers/Data/Application/9D3661AF-8EB5-49F5-A178-3ECA0F96BEEC/Documents/ExponentExperienceData/%2540anonymous%252FWAMS-1163fc3b-4484-44a2-9076-b4b71df1e55c/avatar/profile",
} 

Which should indicate that the image was saved successfully, but data = await FileSystem.readAsStringAsync(dir.uri + filename[0]); OR data = await FileSystem.readAsStringAsync(FileSystem.documentDirectory + 'avatar/profile') would give me this error:

File 'file:///var/mobile/Containers/Data/Application/9D3661AF-8EB5-49F5-A178-3ECA0F96BEEC/Documents/ExponentExperienceData/%2540anonymous%252FWAMS-1163fc3b-4484-44a2-9076-b4b71df1e55c/avatar/profile' could not be read.

Any idea how could this happen? can FileSystem.readAsStringAsync() even read the file I moved from ImagePicker? if no, what should I have used instead?

I’m trying this on IOS and here’s my project details:

Environment:
OS: Windows 10
Node: 9.11.1
Yarn: Not Found
npm: 5.8.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.1.0.0 AI-173.4670197

Packages: (wanted => installed)
expo: ^28.0.0 => 28.0.0
react: ^16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz => 0.55.4

Diagnostics report:
https://exp-xde-diagnostics.s3.amazonaws.com/raywinarto-376f1bc3-2ce5-46b0-bd35-451b792c4e2d.tar.gz

Thanks in advance for the help :smiley:

UPDATE:
got it! turns out instead of moving the file I just have to save the base64 representation as string using writeAsStringAsync and it solved the problem for me, thanks for the great lib guys! :D`

3 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.