ScalajsでAjaxを使ってファイルをアップロードするには

Question

私は画像共有Webアプリケーションを構築してScalajsを学んでいます。 フォームでは、古典的なファイル入力タグがあり、AjaxとjQueryを使用してHTTP Postリクエストを使用してリモートサーバーにアップロードしたいと考えています。

これはhtmlです：

<input id="postTitle" class="form-control" placeholder="Title" type="text" aria-describedby="basic-addon1"> 

<input id="file" class="form-control" placeholder="Browse" type="file" aria-describedby="basic-addon1"> 

<input id="tags" class="form-control" placeholder="Tags in format ['tag 1', 'tag 2',...]" type="text"> 

<button id="postButton" class="btn btn-success">Submit</button> 

そしてここでは、基礎となるScalaのコードです：

lazy val submitElement = jQuery("#postButton") 
jQuery(() => { 
    submitElement.click { 
    (_: JQueryEvent) => { 
      dom.ext.Ajax.post(
      url = [server_url], 
      data = ???, // <-- How do I get the file? 
      headers = Map("Content-Type" -> "application/json") 
     ).foreach { xhr => 
      if (xhr.status == 200) { 
      val x = JSON.parse(xhr.responseText) 
      println(x) 
      } 
     } 
    } 
    } 
}) 

すべてのヘルプは非常に私はいるFormData APIを使用

Answer 1

をいただければ幸いです。それはscalajsでPOSTメソッドを実行するためのScalajs Showcase Ajax exampleを参照してくださいscalajs https://github.com/scalajs-io/form-data

lazy val submitElement = jQuery("#postButton") 

jQuery(() => { 
    submitElement.click { 
    (_: JQueryEvent) => { 
     val file_data = jQuery('#file').prop("files")(0); 
     val form_data = FormData();     
      form_data.append('file', file_data); 

      dom.ext.Ajax.post(
      url = [server_url], 
      data = form_data, 
      headers = Map("Content-Type" -> "application/json") 
     ).foreach { xhr => 
      if (xhr.status == 200) { 
      val x = JSON.parse(xhr.responseText) 
      println(x) 
      } 
     } 
    } 
    } 
}) 

Answer 2

ためLIBSでやっています。

上記の例を拡張すると、postAsFormDataメソッドを記述し、アップロードしたファイルをformDataとして渡すことができます。

def postAsFormData(url: String, 
    data: FormData, 
    timeout: Int = 0, 
    headers: Map[String, String] = Map.empty, 
    withCredentials: Boolean = false) = { 
     ajax.post(url, InputData.formdata2ajax(data), timeout,headers, withCredentials, "") 
    } 

val formData= new FormData() 
formData.append("file",$("#fileInput").prop("files").item(0)) 

として、ファイル入力を渡し、その後、アヤックスpostAsFormDataメソッドを呼び出します。