multipart/form upload missing in request

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: