How to Post Binary File From JQuery Client to Java Server using REST

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();
}

Alexis Wilke · Accepted Answer · 2014-05-22 00:13:03Z

6

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');
        }   
    }); 
  }

edited May 22, 2014 at 0:13

Alexis Wilke

21.2k11 gold badges111 silver badges183 bronze badges

answered Oct 2, 2013 at 22:52

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul D. Over a year ago

This fixed the client-side. My solution for the server-side is in my answer below.

Paul D. · Accepted Answer · 2013-10-03 16:18:48Z

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;
    }
}

Collectives™ on Stack Overflow

How to Post Binary File From JQuery Client to Java Server using REST

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related