How to send a pictur from react-native so the request is the same as phoenix html?

Phoenix Forum Questions / Help
,
1

I am sending images from the phoenix html website and I am processing them with arc.
How could I send my pictures the same way from my react native app? how to attach the picture?

2

:wave:

You’d probably construct a multipart request including your images with JS and then execute it?

3

yes that is what i am trying but on the server it doesnt show up, only shows that it got the reuest but nothing about the struct or any data about the request

4

:+1:

Then you’d need to post more details about what you expect to show up and what shows up instead, what code you are using both in the elixir app and in the js app, etc. for us to be able to help you.

5

well really the problem is that nothing shows up it only shows this: PUT /api/user
[info] Sent 401 in 32ms in the server console where the elixir app is running

6

Then you need to log more data about that request. Try strategically placing several IO.inspect/1 in your controller action for PUT /api/user.

7

Yeah I tried to log out the user_params but that did not show up either

8

Then probably no function clause matches your user params.

Actually, judging by the status code (401), your request is not being authorized.

9

So in elixir this is how it works:
get the picfrom the file picker:

<div class="form-group">
  <%= label f, :avatar, class: "control-label" %>
  <%= file_input f, :avatar, class: "form-control" %>
  <%= error_tag f, :avatar %>
</div>

and using the generated controller

then the schema has this:

field(:avatar, Userteam1Web.Avatar.Type)

|> cast_attachments(attrs, [:avatar])

and I am casting the attachment separately using arc arc-ecto.

same setup for the react native only struggling with the request, checking the auth part that you said:

we tried the request like this:

function uploadAvatar(user, file) {
  data = new FormData()
  data.append('avatar', file)
  console.log(data)
  user.avatar = file[0]
  return {
    types: [
      userConstants.UPLOAD_AVATAR_REQUEST,
      userConstants.UPLOAD_AVATAR_SUCCESS,
      userConstants.UPLOAD_AVATAR_FAILURE,
    ],
    callAPI: () => axios.put(config.API_URL + 'user', { id: user.id, user }, { headers: authHeader() })
      .then(res => res.data)
  }
}