user5869984
user5869984

Reputation: 91

convert image to base64 in expo react-native(only in the frontend): PayloadTooLargeError: request entity too large

I'm trying to convert the image to base64 in expo react-native app by using the next code:

import * as FileSystem from 'expo-file-system';
......

const base64 = await FileSystem.readAsStringAsync(result.uri, { encoding: 'base64' });

but I get this error:

PayloadTooLargeError: request entity too large
    at readStream (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\raw-body\index.js:155:17)
    at getRawBody (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\raw-body\index.js:108:12)
    at read (C:\Users\rapha\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@expo\dev-server\node_modules\body-parser\lib\read.js:77:3)
....
    at Server.app (C:\Users\rapha\university\MA\third year\finalProject\argon-react-native-master\oneWay\node_modules\connect\index.js:51:37)
    at Server.emit (events.js:315:20)
    at Server.EventEmitter.emit (domain.js:483:12)
    at parserOnIncoming (_http_server.js:790:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)
I'm looking for a solution only in the frontend, in this step the app not using the backend.

how can I fix it? thanks

Upvotes: 3

Views: 9942

Answers (2)

Szabolcs N
Szabolcs N

Reputation: 31

The problem is not this line, it works properly. It is the fetch API or the server file size limit.

Upvotes: 1

user5869984
user5869984

Reputation: 91

I tried many solutions but nothing for me then I decided to resize the image to quality 0.5 and it work to me

let result = await  ImagePicker.launchImageLibraryAsync({
    mediaTypes:await ImagePicker.MediaTypeOptions.All,
    allowsEditing:true,
    aspect:[4,3],
    quality:0.5

})

  ....       
const base64 = await FileSystem.readAsStringAsync(result.uri, { encoding: 'base64' });

Upvotes: 5

Related Questions