How to Upload and Display File Using Play Framework and jQuery?

Question

I have one scenario: I am uploading one file at some server location using: https://www.playframework.com/documentation/2.0/JavaFileUpload ,

//Uploading file:

<input type="file" name="fileUpload">
<input type="submit" value="Upload">

And from the below code, I am uploading the above uploaded file and getting/displaying it on my view page like(After clicking the Submit button):

<input type="file" id="inputfile">
<input type="button" value="Submit" id="submitfile">

jQuery:

$("#submitfile").click(function(){
    var path1 =$('input[type=file]').val().replace(/C:\\fakepath\\/i, '');//uploaded file names 
    //adding the Play framework server path for Application to get the image(s) file(s) path
    var filespath = '/files/images/'+path1;//giving my uploaded files path here

    });

But my requirement is that: I need only one type which does both: accepts/uploads the file at server location and returns/displays the same file path from server location on my view page ? I am struggling for it. Please help me.

Community · Accepted Answer · 2017-05-23 12:30:52Z

This looks like a similar issue to 33163555. That question has the following example:

Edit: Reference 2320069 for support on ajax file uploads & alternatives:

FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form enctype="multipart/form-data">
  <input type="file" id="file" name="file" />
  <input type="submit" id="submit" name="" value="Upload" />
</form>

<script>
$('#submit').click(function (event) {
   event.preventDefault();
   var file = $('#file').get(0).files[0];
   var formData = new FormData();
   formData.append('file', file);
   $.ajax({
       url: 'upload',
       data: formData,
       type: 'POST',
       contentType: false,
       processData: false,
       beforeSend: function (data) {
         alert('Are you sure you want to upload document?');
       },
       success: function (data) {
         //call your jQuery action here
         alert('Upload completed: ' + data);
       },
       error: function (jqXHR, textStatus, errorThrown) {
         alert(textStatus + ': ' + errorThrown);
       }
    });
    return false;
});
</script>

In your routes you have:

POST /upload controllers.Application.upload()

Where your controller method returns the filepath:

public static Result upload() {
  MultipartFormData body = request().body().asMultipartFormData();
  FilePart fileP = body.getFile("file");
  if (fileP != null) {
    File file = fileP.getFile();
    //If we want to move from temp
    //FileUtils.moveFile(file.getCanonicalPath(), "FileB"); 
    return ok(file.getCanonicalPath());
  } else {
    return badRequest("Upload Error");    
  }
}

And you can perform your custom jQuery action in the ajax success callback

Can we implement it above like : stackoverflow.com/questions/33209460/…
Oh sorry haha. I didn't realize you posted my referenced question. Editing my answer based on 2320069 , 20452853, 6974684 which say that you need to store your file into an ajax formData object before sending, or take another approach
Excellent, It's working great !! Hat's off !! You saved me !!

Collectives™ on Stack Overflow

How to Upload and Display File Using Play Framework and jQuery?

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related