Upload file using Ajax and Apache CXF

I'm not so familiar with Ajax and client side application (I'm mainly a server side developer). I need to add to a simple HTML page, a button that uploads a file and sens it to a Apache-CXF service.

I don't succeed to make this "hand shake" between client and server. I get:

java.lang.RuntimeException: org.apache.cxf.interceptor.Fault: Couldn't determine the boundary from the message!

This is the definition of the service in Java:

@Path("/")
@Produces(MediaType.TEXT_PLAIN)
@Getter
@Setter
@CrossOriginResourceSharing(allowAllOrigins = true)
public class NLPRestService {

    @POST
    @Path("/uploadPosRulesFile")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public void uploadFile(@Multipart(value="file", type="text/plain" ) InputStream file) {
        //Here will be the code that handles the file content - I'll know what do with it once I'll succeed to get here
    }
}

This is the HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My-App</title>
        <script type="text/javascript" src="js/jquery/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="js/parseText.js"></script>
        <script type="text/javascript" src="js/uploadPosRules.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div style="padding: 20px;">
            <h1>my-app</h1>
            <form id="uploadPosRulesform" >
                <div style="width: 700px;">
                    Upload new POS Rules File <input id="fileupload" type="file" name="file" /> 
                    <input  id="submit" value="upload POS RULE file" type="button"  onclick="uploadFiles()" />
                </div>
            </form>
            <!-- Here comes another form that do another thing - irrelevant  -->
            <form id="form">
                ...
            </form>
        </div>
    </body>
</html>

And finally the JavaScript code that does the AJAX call:

function uploadFiles() {
    event.stopPropagation(); // Stop stuff happening
    event.preventDefault(); // Totally stop stuff happening

    // START A LOADING SPINNER HERE

    // Create a formdata object and add the files
    $.ajax({
        url : '../services/nlpService/uploadPosRulesFile',
        type : 'POST',
        data: { file: $('#fileupload').val()},
        cache : false,

        dataType : 'text/plain',

        processData : false, // Don't process the files
        contentType: 'multipart/form-data',
        //contentType : false, // Set content type to false as jQuery will tell the server its a query string request
        success : function(data, textStatus, jqXHR) {
            alert(data);
            if (typeof data.error === 'undefined') {

            } else {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            // Handle errors here
            console.log('ERRORS: ', jqXHR, textStatus, errorThrown);
            $('#alert').css('display', 'block');
            $('#alert').html(jqXHR.response);
            // STOP LOADING SPINNER
        }
    });

}

It might be really basic issue (because I'm really not fully understand it...) - I'll appreciate your help!

Thanks a lot

Answers


contentType: false,

Try the above. This will force jQuery to generate the contentType headers and it will include the boundary information. If you sniff the http message that you are sending to the server you will see that now you are sending something like this

Content-Type: multipart/form-data; boundary=???

Need Your Help

App designed for iPhone 5, showing partially cut views on iPhone 4S

ios iphone objective-c xcode5

I started designing an application that would work on both iPad and iPhone. the iPad part is ok, but i am having trouble with making my app look good on both iPhone 4S and iPhone 5. The view is sho...

How can I recognize whether a string is a UDID for an iOS device?

objective-c regex cocoa udid

I'm working on an iOS Cocoa app that has a fallback - if the user doesn't enter a certain piece of data, the device's UDID is used instead, as a default. I need to add a check in our server code (w...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.