1

I still struggle to find the best solution for uploading a profile image and connecting the image with the user in the database in Expo. This is a followup of this question.

enter image description here

I develop with Expo and having a Profile screen (see image). There I have an Pick Image button, some fields for the usernames and a Submit button for saving everything.

The image upload works and is done with:

let image = await ImagePicker.launchCameraAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  base64: true,
})

That means it is not transferred but available as Base64 in the variable.

So far so good. Now I have trouble in sending the image to the server. I found these options to solve it:

  1. Doing it with an extra Express server. But I don't like the approach overall. That would mean to have an additional server running. Also, when sending the image I cannot see how to safely connect the image with the user in the database.

  2. The other idea was having 2 mutations combined. I did it with this code:

    const UPDATEUSER_MUTATION = gql`
      mutation UpdateUserMutation($email: String!, $firstname: String!, $lastname: String!, $image: Upload!) {
        updateuser(email: $email, firstname: $firstname, lastname: $lastname) {
          firstname,
          lastname
        },
        uploadFile(file: $image)
      }
    `
    

So first send the regular mutation, that inserts the user fields. And after that another mutation is handling only the image itself. That worked but it gave me that error:

HTTP/1.1 413 Payload Too Large

enter image description here

I mean that's correct. The usual upload size is 100 kB and the image is above. But as I do not use an express server, I'm not quite sure how to set that limit in my Expo project. For an express server that would be easy.

So the question is now, is the second approch good? Or should I go even another way. What is the best practice here?

And maybe the direction question: How to set upload file size in Expo to fix 'Payload Too Large'?

kwoxer
  • 3,167
  • 3
  • 35
  • 51

0 Answers0