How to work with ajax in play framework 2.1.*

Question

I am working with play framework 2.1.2 . I want to work with Ajax in play framework .

What am i doing? i am uploading multiple files and i want that if user didn't choose file for upload then i want some message come like 'u didn't choose any file' for uploading and if user choose files for upload and click on upload that time i want that some message come like file has been uploaded

my view part is:

@form(action = routes.upload.up, 'enctype -> "multipart/form-data",'_id->"he") {
            <input type="file" name="file" accept="application/pdf" multiple="multiple"><br/> 
            <input type="submit" id="if" value="upload and extract"> 

            }

and getting data.

now when user click on upload button that time if user chooses file for upload that time after file upload i want to print message file has been uploaded and if user didn't choose file that time i want to show message select a file .

i want to send message data that i will send after file processing in controller part. what message will i get after that controller part that message i want to send to that Ajax.

Controller part is:

Http.MultipartFormData body = request().body().asMultipartFormData();
        List<FilePart> resourceFiles = body.getFiles();


        if (!resourceFiles.isEmpty()) {

            for (FilePart upload : resourceFiles) {

                String targetPath = "/home/rahul/Documents/upload/"
                        + upload.getFilename();
                upload.getFile().renameTo(new File(targetPath));
            }
            return ok("File uploaded ");  //i want to print this result as a message 
        } else {
            return forbidden(); 
        }
    }

i went through some codes but i didn't getting enough solution.

Give me some idea to go through ajax.

Answer 1

Few weeks ago I implemented uploading files with ajax with usage of jquery-file-upload . I might post my solution and I hope you will be satisfied. This example is for simple 1 file upload but it can be extended.

Scripts

<script src="@routes.Assets.at("javascripts/jquery-file-upload/jquery.iframe-transport.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-file-upload/vendor/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery-file-upload/jquery.fileupload.js")" type="text/javascript"></script>

View

<input type="file" id="@d" name="@d" data-url="@code.routes.Ext.upload()"  />
<script type="text/javascript">
    $(document).ready(function () {
        $('#@d').fileupload({
            replaceFileInput: true,
            done: function (e, data) {
                //Here you got server response.
                console.log(data);
                var d = data.result;
                alert(d);
                $('#img1').attr("src",d);
            }
        });
    });
</script>

Where @d is your view param.

Controller

In your code you can use return ok("File uploaded ") to response for client.

Full source code can be found here (Scala) , here , here and here