How to Post Binary File From JQuery Client to Java

Question

I'm trying to post a binary file from my client (jQuery) to my server (Java). I'm using Apache CXF and REST. The file is making it to the server, which promptly throws an exception.

Here's the JavaScript on the client side:

  function handleFileUpload() {
     console.log("handleFileUpload called");
     var url = "http://myserver:8181/bootstrap/rest/upload/license";
     var file = $('#file_upload').get(0).files[0];
     $.ajax({
        url: url,
        type: "post",
        data: file,
        processData: false,
        success: function(){
           $("#file_upload_result").html('submitted successfully');
        },
        error:function(){
          $("#file_upload_result").html('there was an error while submitting');
        }   
    }); 
  }

Here is the server-side code:

@POST
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.TEXT_PLAIN)
@Path("/license")
public String uploadLicenseFile(@FormParam("file") InputStream pdfStream) 
{
    try 
    {
        //byte[] pdfByteArray = convertInputStreamToByteArrary(pdfStream);
        //fileLength = pdfByteArray.length;
        fileLength = pdfStream.available();
        response = "Upload successful!";
        // TODO read file and store params in memory
    } 
    catch (Exception ex) 
    {
        response = "Upload failed: " + ex.getMessage();
        fileLength = 0;
    }
    return getFileLength();
}

Answer 1

This is the server-side code I got to work with Musa's client solution.

@POST
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Path("/license")
public void uploadLicenseFile(MultipartBody body) 
{
    try 
    {
        List<Attachment> all = body.getAllAttachments();
        Attachment a = all.get(0);
        InputStream is = a.getDataHandler().getInputStream();
        //byte[] pdfByteArray = convertInputStreamToByteArrary(pdfStream);
        //fileLength = pdfByteArray.length;
        fileLength = is.available();
        response = "Upload successful!";
        // TODO read file and store params in memory
    } 
    catch (Exception ex) 
    {
        response = "Upload failed: " + ex.getMessage();
        fileLength = 0;
    }
}

Answer 2

You are sending the file as the post body, what you want to do is send the file in a multi-part form data body. You can use the FormData object to do this.

  function handleFileUpload() {
     console.log("handleFileUpload called");
     var url = "http://myserver:8181/bootstrap/rest/upload/license";
     var file = $('#file_upload').get(0).files[0];
     var formData = new FormData();
     formData.append('file', file)
     $.ajax({
        url: url,
        type: "post",
        data: formData,
        processData: false,
        contentType: false,
        success: function(){
           $("#file_upload_result").html('submitted successfully');
        },
        error:function(){
          $("#file_upload_result").html('there was an error while submitting');
        }   
    }); 
  }