Uploading File using Axios via Multipart

interop

#1

I’m attempting to upload a file using axios. Right now I’m encoding the file as a Js object as such:

  let file = Belt.Array.getExn(files, 0);
  let headers =
    Js.Dict.(
      {
        let dict = empty();
        dict->set("Content-type", "multipart/form-data");
        dict;
      }
    );
  let headers = Axios.Headers.fromDict(headers);
  Js.Promise.(
    Axios.postDatac(Utils.apiUrl ++ "/media", file, Axios.makeConfig(~headers, ()))
    |> then_(response => resolve(Js.log(response##data)))
    |> catch(err => resolve(Js.log(err)))
    |> ignore
  );
  ();

I’m using an explicit headers because Axios doesn’t infer that this should be a multipart, but instead labels it as application/x-www-form-urlencoded. However, I also need a boundary header, but I can’t manually add that. How can I get Axios to figure out the boundary properly?

Sidenote, I was originally using bs-webapi, but I don’t think bs-webapi’s bindings for the File API plays well with bs-axios. Is there a way to get them to work together?

Thanks,
Nicholas


#2

Couldn’t you try something like this?

dict->set("Content-type", "multipart/form-data; boundary=--yourBoundaryValue");

I had implemented file upload using bs-axios before Js.Dict was introduced like so:

let instance =
                  Axios.Instance.create(
                    Axios.makeConfig(
                      ~baseURL="/api",
                      ~headers={
                        "Content-Type": "multipart/form-data; boundary=--salamalaykum",
                      },
                      (),
                    ),
                  );

#3

I’m trying to avoid setting my own boundary, since I don’t actually know if it’s valid.


#4

Is this a language-specific question or library-specific question?

In other words, are you asking how to do this in Reason, or how to do it in general in Axios?