缺少进度侦听器Content-Type标头的FormData文件上传

Question

I am building a client-server application with a java-server (no JSP, just com.sun.net.httpserver.HttpServer; ) and web frontend as client. I use WebSockets for communication and want to upload files with XMLHttpRequests and FormData (i followed this post Track ajax post progress for fileupload using jquery ajax and FormData ). I want to track the upload progress with xhr.upload.onprogress , but as soon as i add a listener such as

xhr.upload.onprogress = function(e) {...};

or

xhr.upload.addEventListener("progress", function (e) {...}, false);

i get an serverside error like this:

org.apache.commons.fileupload.FileUploadBase$InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is null
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:948)
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:310)
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:334)
    at com.awaker.server.HttpUploadServer.handle(HttpUploadServer.java:42)
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:79)
    at sun.net.httpserver.AuthFilter.doFilter(AuthFilter.java:83)
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:82)
    at sun.net.httpserver.ServerImpl$Exchange$LinkHandler.handle(ServerImpl.java:675)
    at com.sun.net.httpserver.Filter$Chain.doFilter(Filter.java:79)
    at sun.net.httpserver.ServerImpl$Exchange.run(ServerImpl.java:647)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)

I use the Apache Commons FileUpload framework for handling upload requests.

This occurs in Firefox and Opera (the only browsers i tested), and while the correct Content-Type headers are listed in Firebug/developer console, the server does not receives this header (same goes for Content-Length header).

It doesn't matter if i use jQuery ajax

$.ajax({
           url: "http://host...",
           type: "POST",
           data: ajaxData,
           cache: false,
           contentType: false,
           processData: false,
           xhr: function () {
               var xhr = jQuery.ajaxSettings.xhr();
               if (xhr.upload) {
                   xhr.upload.addEventListener("progress", function (e) {
                    console.log("hello");
                    }, false);
               }
               return xhr;
           }
       });

or vanilla js

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = uploader.uploadProgress;
xhr.open("POST", "http://host...");
xhr.send(formData);

i always get the same error. As soon as i remove the onprogress-handler, everything works fine. I already tried this FormData boundary missing from content-type in POST request header , but this doesn't work for me, too.

Does anybody know how to solve this? Thank you!

Edit: The ajaxData are generated from an drop event:

    var droppedFiles = e.originalEvent.dataTransfer.files;
    var ajaxData = new FormData();
    ajaxData.append("file", droppedFiles[0]);

The contentType: false option lets jQuery/XHR automatically add the Content-Type header with the neccessary boundary. This option is required, it doesn't work without it.

Edit2: This works fine

$.ajax({
           url: "http://host...",
           type: "POST",
           data: ajaxData,
           cache: false,
           contentType: false,
           processData: false,
           xhr: function () {
               var xhr = jQuery.ajaxSettings.xhr();
               return xhr;
           }
       });

It seems that only adding the progress listener makes a difference.

Edit3: Here is the serverside code that throws the error:

@Override
public void handle(HttpExchange httpExchange) throws IOException {
    DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
    ServletFileUpload fileUpload = new ServletFileUpload(diskFileItemFactory);

    try {
        List<FileItem> result = fileUpload.parseRequest(new HttpHandlerRequestContext(httpExchange));
        (...)
    } catch (FileUploadException e) {
        e.printStackTrace();
    }

}

i followed this answer https://stackoverflow.com/a/33827895/6655315 . The HttpHandlerRequestContext is exactly the same as shown in the linked post.

Edit4: just by adding an empty upload progress handler like this

 xhr.upload.onprogress = function(e) {};

the received headers are changing from this

Accept-encoding: gzip, deflate
Origin: http://localhost:63343
Accept: */*
Referer: http://localhost...
Connection: keep-alive
Host: localhost:4734
Dnt: 1
User-agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Accept-language: de,en-US;q=0.7,en;q=0.3
Content-type: multipart/form-data; boundary=---------------------------63422017421660
Content-length: 333700

to this:

Accept-encoding: gzip, deflate
Access-control-request-method: POST
Origin: http://localhost:63343
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Connection: keep-alive
Host: localhost:4734
Dnt: 1
User-agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Accept-language: de,en-US;q=0.7,en;q=0.3

Answer 1

You have your answer in the exception.

In both examples you didn't set the Content-Type header so it is indeed missing.

Adding request headers to XHR

jQuery ajax API

I would also recommend reading about FormData