I usually base64 encode the image. The result is just a string. There is a little overhead due to encoding.

On the server side, I use something like this to convert the base64 string to file.

  # decode base64 string to binary
  defp sanitize_params(%{"base64" => base64} = params) do
    params
    |> Map.put("document_source", Base.decode64!(base64))
    |> Map.delete("base64")
  end

The sidenote is I needed to update endpoint like this, to increase the allowed size. This was needed when sending hires pictures from Iphone to backend.

  plug(
    Plug.Parsers,
    parsers: [:urlencoded, :multipart, :json],
    pass: ["*/*"],
    json_decoder: Poison,
    #
    # Increase the size for file uploads
    # https://chodounsky.net/2015/06/05/increase-request-length-in-phoenix-to-upload-large-files/
    # https://hexdocs.pm/plug/Plug.Parsers.html
    #
    length: 100_000_000
  )

PS. This is old code… still using Poison instead of Jason…

On the frontend (React Native) I just prepare data like this before sending to backend.

    const body = {
      document_type: documentType,
      base64: documentSource.base64,
    }