Handling a form with an image and multiple other fields in Play (Scala)

File upload along with other data is a common scenario. This can be handled in Play framework in different ways. 

One case is where Play Forms are used. (refer Play Documentation)
Another case is using custom forms and Play Framework as backend.  (An example function definition)

The file can be accessed using 

request.body.file("fileName")

and in the second case, the fields can be accessed using 

(request.body).asFormUrlEncoded.get("fieldName").get(0)

asFormUrlEncoded returns a Map[ String, Seq [ String ] ] Object. Thus, in order to get the value of a parameter we need to use get(0). 

Note: while using Play Form, it is better to complete the data transactions and handle file upload in its success call

signupForm.bindFromRequest.fold(
  formWithErrors => BadRequest(html.register(formWithErrors)),
  user => {
    request.body.file("picture").map {
      picture =>
        val fileName = user._1
        val path="/path/to/destination/"
        ...

Testing AngularJS app in IntelliJ

Install jsTestDriver plugin for IntelliJ

Ensure that the following files exist within your project

1. jquery-1.8.3.js
2. jasmine-1.1.0.js *
3. JasmineAdapter-1.1.2.js *
4. angular-resource.js
5. angular-mocks.js

Create a .jstd file in your project folder.(eg ‘TestConfig.jstd’).The file should be something like this
           
Create a test file. Write your test cases using Jasmine and run them using JsTestDriver plugin. 

Note: if u add angular-mocks.js before jasmine, on running the tests, you may get a reference error - module/inject not defined

* while writing the test cases, IntelliJ prompts to add JasmineAdapter and jasmine you could add them then as well

Setting up Play-Scala Project in IntelliJ Idea

The easiest way to setup a Play-Scala project is by using the giter8 template.

Setup the project using by giving the following command in the terminal

$ g8 typesafehub/play-scala
# cd into the newly created directory and run with 'sbt run'

In the sbt console
$ idea

Once this is done, the project can be opened from Idea.

Setting up database for the project

1. Add the database driver in project/Build.scala (throws driver not found error on being skipped)
2. In conf/application.conf specify the database configuration(more on database in play)
3. In conf/evolutions/default create a file 1.sql which has the database schema(more on evolutions)

Prerequisites

1. sbt
2. giter8
3. Play and Scala plugin for IntelliJ Idea

Drag and Resize Images using jQuery UI

Just the other day, I wanted to have the functionality to drag and resize an image on a HTML page using jQuery and jQuery UI.

Surprisingly, calling the usual draggable() and resizable() doesn't work as expected when applied on an img element, although it works perfectly for a div element.

After some digging into the jQuery UI code, I found the reason for this flawed functionality. It is because jQuery UI creates a wrapper div for the elements which cannot hold child nodes if resizable() function is applied on them.

The easiest and simplest way to get around this problem is to call the draggable() function on the implicitly created wrapper div.
The wrapper div’s class name is ui-wrapper.

A similiar solution can be used for canvas, textarea, input, select, button elements. The above solution works for multiple images on the page with class as "drag". 

Another common approach is to create a div element which contains the img element. The div and img elements are bound so that on resize of the div element, the img element is scaled up or down.