Create an Axios post to send an uploaded file using Dropzone for a Scala function to handle the respective request

Question

I have the next Scala function:

  def upload = Action(parse.multipartFormData)  { implicit request =>
//grabbing the values from the request
println("Request To Upload File = " + request.toString)
val values = request.body.dataParts
val category:Option[Seq[String]] = values.get("category")
val id:Option[Seq[String]] = values.get("id")


//Grabbing the parts of the file, and adding that into the logic
request.body.file("file").map { file =>
  val fileBytes = FileUtils.readFileToByteArray(new File(file.ref.file.getPath))
  val fileType = file.contentType.getOrElse("None")
  val encodedFile:String = Base64.getEncoder().encodeToString(fileBytes)
  val rowId = getElement(id)
  println(rowId)
  val record:FileRecord = FileRecord(rowId, getElement(userid), file.filename, getElement(category),getElement(project), "1",fileType,encodedFile,0)
  FileRecords.add(record)
  Ok(rowId)
}.getOrElse {
  BadRequest("Dragons won.")
}

}

I want to create an axios post that will use this function. Something like:

           axios.post('/upload', {id: someId, 
                                  category: someCategory,
                                  file: someUploadedFile
                                  })
                                .then((response) => {.... })

The someUploadedFile is coming from:

    var componentConfig = { postUrl: 'no-url' };
var djsConfig = { autoProcessQueue: false }

var eventHandlers = { addedfile: (someUploadedFile) => ... code to upload file with axios.post ..... }

ReactDOM.render(
    <DropzoneComponent config={componentConfig}
                       eventHandlers={eventHandlers}
                       djsConfig={djsConfig} />,
    document.getElementById('content')
);

My big problem is that I do not understand how to build that axios call now that a file is included and also add more info related to that file so the request object in the Scala function will be able to handle that file from the json.

Answer 1

Use FormData to post a file, like this:

var formData = new FormData();
formData.append('file', someUploadedFile);
formData.append('otherAttribute', 'someValue');

axios.post('/upload', formData).then(...)