How to send a picture in json as from web to elixir

Questions / Help
1

Hey from my web version when I upload an image this is the struct that is created:

 "user" => %{
      "avatar" => %Plug.Upload{
        content_type: "image/jpeg",
        filename: "ConceptArt_SneakySneaky_011 (2).jpg",
        path: "/tmp/plug-1536/multipart-1536590148-521595600991125-4"
      },

how could i send a picture in similar fashion from a react native app?
with form-field? or is is doable in json? in postman it works with json, but i cannot send the picture there

2

You can encode/decode the file in Base64 before sending/receiving pictures from RN.

3

Do note that for large pictures, this will be quite a large string, since base64 makes everything roughly 33% larger IIRC.

1 Like
4

This thread seems to be a duplicate of the following threads from that all contain mostly the same problem:

Please check if any of them contain an answer for you. Really not sure why there are so many threads about this, with the same filenames even. (In fact this is a verbatim copy of the last thread in that list.)

3 Likes
5

Have you tried FormData?

export function uploadImage(file) { // so uri, type, name are required properties
  const formData = new FormData();
  formData.append('image', file);

  return fetch(`${imagePathPrefix}/upload`, { // give something like https://xx.yy.zz/upload/whatever
    method: 'POST',
    body: formData,
  }
  ).then(
    response => response.json()
  ).then(data => ({
    uri: data.uri,
    filename: data.filename,
  })
  ).catch(
    error => console.log('uploadImage error:', error)
  );
}

https://github.com/facebook/react-native/blob/master/Libraries/Network/FormData.js

1 Like