Send Form with FormData

[ari gold]

Hello again,

I'm about to dig deep in order to start using FormData and thought I'd check in to see if anyone had any recent success.

I say "recent" because I've noticed that FormData has come up in the past in this mailing list :) 

At first, I thought that FormData was too new to be in Lift but then noticed it's use in a comment in lift.js. That's part of window.liftJQuery which is only used once, in LiftJavaScript.scala. Not sure if that requires jQuery -- again just starting to dig in -- but I'd like to avoid dependencies if possible. Still I'll poke around in there.

Anyhoo, anyone use FormData recently? Got any idea of where to start?

Ideally I'd like to be able to send binary data, like a jpg or something.

Thanks a pile ahead of time & I'll update if/when I figure it out.

Ari

[ari gold]

Greeting,

I thought I'd post a little update here.

As per the lovely MDN document, creating and sending a FormData object ain't that nuts. First the document shows how to create it and then shows how to send it:

var request = new XMLHttpRequest();

request.open("POST", "http://foo.com/submitform.php");

request.send(formData);

What's the best way to do a request.open in Lift? I'm guessing that GUIDs have to line up or something. To that end I've started reading through the code -- both the Scala and the JS for liftVanilla. I've also tried request.open("POST", "http://localhost:8080/etc/etc") and but no dice (didn't expect it to work). By "no dice" I mean that I didn't see anything in the sbt console. Along those lines, how should I handle this in the scala?

I could very well be missing something "simple" here. I've been digging deep into request pipelines and the different way forms can be sent (GET, POST, Ajax, NonAjax) and have recently circled back to the main goal -- sending a FormData with a file in it.

Thanks,

Ari

[Tim Nelson]

Hi Ari,

This is how I used to use FormData.

First, you'll need to create a function with a guid on the Scala side. I used this:

object JsonCallbackFuncName {

  def apply(callback: JValue => JsCmd): String = {

    S.fmapFunc(S.SFuncHolder(s => LiftExtras.parseJsonFunc.vend(s, callback)))(name =>

      name

    )

  }

}

val callBack = SnippetHelpers.JsonCallbackFuncName(getUsers)

You'll need to pass that guid to the client so it's accessible in JavaScript.

Then, on the JavaScript side:

const form = new FormData()

const myJson = {

  x: 'x'

}

form.append("$callBack", JSON.stringify(myJson))

window.lift.ajax(form, null, null, null)

See the appendToQueue function in lift.js to see what those arguments are.

This version uses JSON in one of the form fields, which you may or may not want, but this should get you headed in the right direction.

Tim

[ari gold]

Hi Tim,

Thanks for the response & suggestion!

As is, I don't think I can use the snippet -- I looked around online for LiftExtras.parseJsonFunc but no dice. (Although I think I found your OG post for this snippet :)).

Also, as per this MDN doc, while you could serialize FormData into JSON,  as is "It uses the same format a form would use if the encoding type were set to "multipart/form-data". Furthermore, I'm sending a binary file which I think makes serializing to JSON even trickier (I cooooould convert to an ASCII format like base64).

My idea behind wanting to get this FormData pipeline working is that it seems like it could be way simpler. In a FP style, there'd be no vars to hold the form's fields, no css sel transforms to attach handlers to each field, just one method to process the FormData. 

Back to digging.. thanks again!

Ari

[Tim Nelson]

That function is part of the LiftExtras module here: https://github.com/eltimn/lift-extras/blob/master/src/main/scala/net/liftmodules/extras/LiftExtras.scala#L26