Блог

Я хочу отправить файл с Scalajs-react и Ajax. Отправляющая часть проста с Ajax.send(requestBody: js.Any) onSubmit помощью метода в моем form методе (с помощью которого я позаботился о том, чтобы остановить распространение события preventDefault ). Для создания тела запроса я использую 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")
        )
 

Выглядит хорошо, но по какой-то причине тело запроса ничего не содержит (например: ------WebKitFormBoundaryAnYzDUdxWxA8hrJR-- ), как будто FormData не удалось извлечь данные из формы.
Вот распечатка двух дочерних элементов, из e.target которой мы видим, что оба входа имеют непустую value :

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

Примечание: Когда я вручную append добавляю элементы FormData , они присутствуют в теле запроса.

Что я делаю не так?

Не знаю, почему new FormData(formElement) это не работает, но создание данных формы вручную работает. Экс:

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

Если нужно отправить только один файл, его даже не нужно использовать FormData вообще. Достаточно просто полагаться на файловый API. Экс:

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