0

We are trying to send our Audio file from the UI side using following code 

var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = document.getElementById("save");
link.href = url;
link.download = filename || 'output.wav';

var fd = new FormData();
  fd.append('fname', 'sample1.wav');
  fd.append('data', blob);
  $.ajax({
      type: 'POST',
      url: 'AudioToText',
      data: fd,
      processData: false,
      contentType: "audio/wav"
  });

But we are unable to process that in servlet. Can anybody help me with Javascript code to send audio file to servet and servlet code to save that audio fie in the servlet. Thanks in advance.

user3398439
  • 21
  • 5

2 Answers2

1

Good day

You can use a plugin fileupload

https://github.com/blueimp/jQuery-File-Upload

There is quite full instruction how to use it with spring and ajax:

http://krams915.blogspot.ru/2012/06/file-upload-with-spring-and-jquery-part_2793.html (from wiki of this plugin)

Quick tutorial (don't forget to include the plugin)
Html code: 

<label>Name</label>
    <form name="fileupload" method="POST" class="newSongUpload" action="upload.new.song" id="uploadNewFile">
    <!--in action - your url --!>
                    <input type="text" name="songName">
                        <i class="glyphicon glyphicon-plus"></i>
                            <input type="file" name="files" id="upload-new-document" accept="your accept here">


         </form>
</div>

JS code:

$(function () {
            $('.newSongUpload').fileupload({
                multipart: true,
                dataType: 'json'//actually this enough to get plugin works
                //You can write what will happen after loading in done:yourcode and what you accept in accept:your types
            })
        });

Java spring code:

  @RequestMapping(value = {"/upload.new.song"}, method = RequestMethod.POST)
public @ResponseBody HashMap<String, String> uploadNewSong(HttpServletResponse response,
                                 @RequestParam("file") MultipartFile file){
//Your code with file here you can save it to the database or to file system with file.getBytes() function
}

I hope it'll help you

Dmitry Nazarenko
  • 336
  • 1
  • 8
  • Thank you all for your help. Now I can send the file from HTML and can save it in the server. But I have a new query, I don't have any form, I need to call this servlet using java script code. I have the blob file available there only. I am adding the js function where the blob is available, can you please let me know how to send it to the servlet? – user3398439 Feb 05 '16 at 18:38
  • Recorder.setupDownload = function(blob, filename){ //code to save the file at UI var url = (window.URL || window.webkitURL).createObjectURL(blob); var link = document.getElementById("save"); link.href = url; link.download = filename || 'output.wav'; link.click(); – user3398439 Feb 05 '16 at 18:38
  • http://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob instead of using upload.php use the servlet It seems like they convert blob to base64 and at server side it converts back – Dmitry Nazarenko Feb 05 '16 at 20:57
0

If you want to process the uploaded files in Servlet, files should be sent as request attribute of "multipart/form-data" and it should be POST method

Please refer the example provided by Oracle.

Reference : http://docs.oracle.com/javaee/6/tutorial/doc/glraq.html

Harisudan Kuppusami
  • 303
  • 1
  • 6
  • So, I must have to use this HTML form code to send a file to servlet?? .. there is noway to use javascript code to send file to servlet? – user3398439 Feb 05 '16 at 19:17