I’m attempting to upload a file to phoenix using JavaScript’s Fetch. The request looks as expected in the Chrome console, but I do not see any form data when I inspect the params or conn.body_params.
My client code looks like this:
const formData = new FormData();
formData.append('file', file);
formData.append('fileName', file.name);
this.fetch(this.resource, {
method: 'POST',
headers: new Headers({
'Content-Type': 'multipart/form-data',
}),
body: formData,
})
The request payload in the chrome console:
------WebKitFormBoundarymsLCm9Lk39Yxssd0
Content-Disposition: form-data; name="file"; filename="inventory.csv"
Content-Type: text/csv
------WebKitFormBoundarymsLCm9Lk39Yxssd0
Content-Disposition: form-data; name="fileName"
inventory.csv
------WebKitFormBoundarymsLCm9Lk39Yxssd0--
Phoenix Controller (just trying to inspect the request)
def upload(conn, params) do
IO.inspect params
IO.inspect conn.body_params
json(conn, %{success: true})
end
I get an empty map for both inspect methods above.
In my controller, I have
plug Plug.Parsers,
parsers: [:urlencoded, :multipart, :json],
pass: ["*/*"],
json_decoder: Jason
config.exs
config :mime, :types, %{
"text/csv" => ["csv", "CSV", "Csv"],
"text/tab-separated-values" => ["tsv", "TSV"],
"multipart/form-data" => ["multipart"]
}
I feel like i’ve exhausted every forum I could find on the topic. I know it’s something simple but it’s eluding me