multipart/form upload missing in request

Questions / Help
,
1

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 :slight_smile:

2

Did you figure out something here? I have the same issue… no idea what can be wrong.

If client does not set a header (will then default to application/json), the multipart upload works exactly as expected.

3 
        this.fetch(this.resource, {
            method: 'POST',
            headers: new Headers({
                // let the client set the headers
            }),
            body: formData,
        })

I used an empty object when creating the Headers object and it set the headers correctly.

4

Yes, then you are sending “application/json” I reckon, which is what made it work for me ass well.
That does not seem like a “fix” tho :smiley:

5

That’s odd, it sends the correct multipart/form-data for me:

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryxChGbhid34JX97G6

are you creating an empty headers object like I am above or just leaving headers null?