How to readAsStringAsyc() with lower quality file

Please provide the following:

  1. SDK Version: “expo-file-system”: “~13.1.4”
  2. Platforms(Android/iOS/web/all): Android/iOS
  3. Add the appropriate “Tag” based on what Expo library you have a question on.
    #filesystem

I have an application that selects photos from the MediaLibrary and uploads to a server. Everything works fine except I don’t need to upload the original quality of the selected photos. Is there a way to specify the quality of the photo when I call the FileSystem.readAsStringAsync(uri, {encoding: ‘base64’})? Something similar to ImagePicker.launchImageLibraryAsync({ base64: true, quality: 0.5 }).

Hi ben,
I cannot say for certain that nothing is build in, however, from my experience with image compression it would highly surprise me if FileSystem.readAsStringAsync would offer anything for images. To me that sounds clearly like a method for generic files. Images and their compression is usually an extra topic and therefore an extra library.
The ImagePicker is able to crop images and therefore gives means for compression. I think you have to look for an image compression library and compress the data yourself after you read it. Let me know if you find anything. I have to do that as well :slight_smile: .
Cheers,
Tommy

1 Like

Hi Tommy,
What I ended up doing was uploading the file as multipart/form-data and resizing/compressing the file on the server side before saving it on disc.

Hi @benphung and @tomwaitforitmy

I haven’t tried this myself, but it looks like one of the following should work:

ImageManipulator has a resize action. This should work with EAS Build or the classic build system and also in Expo Go.

Otherwise maybe try react-native-image-resizer, which should work as long as you build with EAS Build. It won’t work in Expo Go, but you can build a dev client to use instead of Expo Go.

I first searched the Expo docs and did not find ImageManipulator :confused:

If I’m looking for something and have trouble finding it in the Expo docs then I normally see if there’s an option that works in React Native and see how to adapt that to an Expo App. In this case I found a Stack Overflow question which pointed to the above options.

1 Like