benonymus
What plug do i need to accept FormData ("multipart/form-data") type of post request?
Hey besically the title says it,
I am trying to send a file to my elixir api and, i just noticed that in the router it has this plug: plug(:accepts, ["json"]), but since i am trying to send a file i am sending a multipart request not json.
Thoughts?
Most Liked
gregvaughn
Are you using nginx in front of Phoenix? I had this problem once and found out nginx had a maximum size for post data and was rejecting them before they got to Phoenix. I had to google to find out how to raise that maximum limit in nginx but it fixed my situation.
benonymus
For me the issue was on the js side, the elixir side was fine as it turned out, your form data might be incorrect.
What we did was that we appended everything to the formdata and only sent that like this for example:
function uploadAvatar(user, file, token) {
let fd = new FormData();
fd.append("user[avatar]", {
uri: file.path,
name: "test.jpg",
type: file.mime
});
fd.append("id", user.id);
return {
types: [
userConstants.UPLOAD_AVATAR_REQUEST,
userConstants.UPLOAD_AVATAR_SUCCESS,
userConstants.UPLOAD_AVATAR_FAILURE
],
callAPI: () =>
axios
.put(config.API_URL + "user", fd, {
headers: { Authorization: "Bearer " + token }
})
.then(res => res.data)
};
}
and you see where you append you need to set the key like it is in the example like “id” and if it is a param then you do like “user[avatar]” so your controller can use it to do what yo want to do
NeutronStein
According to axios’ documentation JS part should be like this:
let data = new FormData();
data.append("recording[file]", rec);
data.append("recording[challenge_id]", 1);
data.append("recording[user_id]", 1);
data.append("recording[mod_score]", 3);
console.log(data);
axios.post(
config.API_URL + "recordings",
data,
{
headers: {
Authorization: "Bearer " + this.props.auth.token,
"Content-Type": "multipart/form-data"
}
}
);
To match your controller.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









