java - Play Framework - Ajax web service call image request issue -


i have developed web service using play framework. have created post rest service in play framework below.

in routes file:

post    /imageupload        controllers.application.imageupload() 

in application.java:

public static result imageupload() {     objectnode result = json.newobject();      multipartformdata body = request().body().asmultipartformdata();     filepart file = body.getfile("file");     file trainimg = file.getfile();     file temp = new file("/play_framework/temp.jpg");     trainimg.renameto(temp);// moved image folder check correct image.      .     .     .      return ok(result); } 

in service, have written code save image received request. have called service ajax given below.

in index.html file:

var formdata = new formdata(); var blob = new blob([imagedata], { type: "image/jpg"}); formdata.append("file", blob, "capturedimage.jpg");  $.ajax({        url: 'http://localhost:9000/imageupload',        data: formdata,        crossdomain: true,        processdata: false,        contenttype: false,        async: false,        cache: false,        datatype: "json",        type: 'post',        success: function(data){             alert(data);             var responsestr = json.stringify(data);                 alert("response str -- "+responsestr);        }        }); 

when upload file multipart form data, can receive multipart data in server side. stored "multipartbody7906599875117091855astemporaryfile".

if file's mimitype - "content/unknown".

when debug, got below multipart form data path "/var/folders/f3/r3rfqfl949z5pf2cprwn95dm0000gn/t/multipartbody7906599875117091855astemporaryfile".

how parse "jpg" file? can me this?

the following worked me:

application.java

public class application extends controller {      public static result index() {         return ok(index.render("so answer 30229421"));     }      public static result imageupload() {         objectnode result = json.newobject();          http.multipartformdata body = request().body().asmultipartformdata();         http.multipartformdata.filepart file = body.getfile("file");         file trainimg = file.getfile();         file temp = new file("/tmp/temp.jpg");         trainimg.renameto(temp); // moved image folder check correct image.          result.put("path", temp.getabsolutepath());         return ok(result);     }      public static result imagedownload(string path) {         return ok(new file(path));     } 

index.scala.html

@(message: string)  <html> <body>     <h1>@message</h1>     <input type="file" id="imagedata"/>     <button onclick="send()">send image</button>      <div id="image">     </div>      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>     <script>      function send() {         var imagedata = $('#imagedata')[0].files[0];          var formdata = new formdata();         var blob = new blob([imagedata], { type: "image/jpg"});         formdata.append("file", blob, "capturedimage.jpg");          $.ajax({                url: 'http://localhost:9000/imageupload',                data: formdata,                crossdomain: true,                processdata: false,                contenttype: false,                async: false,                cache: false,                datatype: "json",                type: 'post',                success: function(data){                     $('#image').html('<img src="http://localhost:9000/imagedownload?path=' + data.path + '"/>');                }        });     }     </script>  </body> </html> 

the difference, because didn't include how imagedata value, used version (as per so answer):

var imagedata = $('#imagedata')[0].files[0]; 

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -