How to upload a file with scalajs-react and AJAX

Question

I want to send a file with Scalajs-react and Ajax. The sending part is easy with Ajax.send(requestBody: js.Any) method in the onSubmit method of my form (which I took care to stop the event propagation with preventDefault). To build the request body I use FormData(event.target).

def f(e: ReactFormEvent) = {
          Ajax
            .post("http://localhost:9000/rpc/v1/test/update-dataset")
            .setRequestHeader("X-Requested-With", "XMLHttpRequest")
            .send({
              new FormData(
                e.target
                  .asInstanceOf[dom.raw.HTMLFormElement]
              )
            })
            .validateStatusIs(200)(Callback.throwException)
            .asCallback
        }
Form(onSubmit = e => f(e) >> e.preventDefaultCB)(
          FormGroup("groupInput")(
            FormFile(label = "Input")(),
            UncontrolledFormControl(ref = ref, defaultValue = "abc")()
          ),
          Button(`type` = "submit")("Submit")
        )

Looks good, but for some reason the request body does not contain anything (ex: ------WebKitFormBoundaryAnYzDUdxWxA8hrJR--) as if FormData did not manage to retrieve the data from the form. Here is a printout of the two children of e.target where we can see that both inputs have a non-empty value:

__reactFiber$ipxb5pt9wbi,[object Object],__reactProps$ipxb5pt9wbi,[object Object],_wrapperState,[object Object],__reactEvents$ipxb5pt9wbi,[object Set],value,C:\fakepath\artifacts.zip,_valueTracker,[object Object]
__reactFiber$ipxb5pt9wbi,[object Object],__reactProps$ipxb5pt9wbi,[object Object],_wrapperState,[object Object],__reactEvents$ipxb5pt9wbi,[object Set],value,abc,_valueTracker,[object Object]

Note: When I manually append items to the FormData, there are present in the body request.

What am I doing wrong?

Answer 1

Not sure why new FormData(formElement) isn't working, but building manually the FormData works. Ex:

send{
  val fd = new FormData()
  val elem = dom.document
                .getElementById("form-inputf")
                .asInstanceOf[HTMLInputElement]
  fd.append("file", elem.files(0))
  fd
}

If only one file needs to be send, one doesn't even need to use FormData at all. Simply relying on the File API is enough. Ex:

send{
val elem = dom.document
                .getElementById("form-inputf")
                .asInstanceOf[HTMLInputElement]
elem.files(0)
}