Unable to upload image/images to node js server with expo and react native

Question

Whenever I try to send form data or files to the server from my native code I am not getting the assets[0].fileSize and assets[0].fileName in native console. My React Native Code is:

const { status } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY);
if (status !== "granted") {
  // Handle permission denied
  return;
}

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
console.log(result);

/**
I am getting this output from result:
 {
  assets: [
    {
      assetId: "1610",
      base64: null,
      duration: null,
      exif: null,
      height: 1840,
      rotation: null,
      type: "image",
      uri: "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fhelo-c554b96a-1355-4a71-8550-01d96488539b/ImagePicker/21bc87ec-4534-40d8-a86d-bd676ad9cbb2.jpeg",
      width: 3264,
    },
  ],
  canceled: false,
  cancelled: false,
};

**/

I am using expo-image-picker for selecting images. And in server side I am using multer().any() for handling files coming to server.

I have have tried some more packages: xhr for file upload but didn't work.

Answer 1

The URI returned by Expo is a reference to image data on device memory, you should either upload base64 or binary data depending on the data type supported by your backend.

I recommend enabling base64 for expo-image-picker for sake of simplicity - https://docs.expo.dev/versions/latest/sdk/imagepicker/#imagepickerasset