Question

SOLUTION

Refer to my answer below: issues with form/iframe based file upload in Opera

---

I’m using the form/iframe technique to send files to the server whenever a browser does not support XMLHttpRequest upload (Opera). On a high level, here’s the setup…

1. create an iframe <iframe src="javascript:false;" name="file-iframe"></iframe>
2. create a form <form enctype="multipart/form-data" method="POST">
   • set target = iframe’s name, target="file-iframe"
   • set action = url, action="/upload"
3. add the file input to the form
4. submit form

When the form is submitted, the server spits out an exception:

org.apache.commons.fileupload.MultipartStream$MalformedStreamException: Stream ended unexpectedly
    at org.apache.commons.fileupload.MultipartStream.readHeaders(MultipartStream.java:538)
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.findNextItem(FileUploadBase.java:999)
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:965)
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
    at org.apache.commons.fileupload.servlet.ServletFileUpload.getItemIterator(ServletFileUpload.java:148)
    at com.beamit.jetty.UploadServlet.doPost(UploadServlet.java:28)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:727)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:820)
    ...
    ...

Here is a code snippet in the UploadServlet.java file, where the failure happens in the last line of the snippet:

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) {

    ServletFileUpload up = new ServletFileUpload();
    try {
        FileItemIterator iter = up.getItemIterator(request); // <------ ERROR
        ...
    } catch (IOException e) {
        e.printStackTrace();
    }
    ...

I’ve been trying to debug this for hours and I’m getting nowhere. Any ideas as to why this might be happening?

I can provide the HTTP requests for working/non-working file uploads using a different browser, as well as some more source code if needed.

MORE INFO

HTTP request for a simple “hello world” text file in Chrome.

POST /upload/0145c HTTP/1.1
Host: beamit:8080
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Referer: http://beamit:8080/
Content-Length: 44
Origin: http://beamit:8080
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryQes3eWoFE2iw6kGE

HTTP request for a simple “hello world” text file in Opera.

POST /upload/f889b HTTP/1.1
User-Agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.7.2; U; en) Presto/2.9.168 Version/11.52
Host: beamit:8080
Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Accept-Language: en,en-US;q=0.9,ja;q=0.8,fr;q=0.7,de;q=0.6,es;q=0.5,it;q=0.4,pt;q=0.3,pt-PT;q=0.2,nl;q=0.1,sv;q=0.1,nb;q=0.1,da;q=0.1,fi;q=0.1,ru;q=0.1,pl;q=0.1,zh-CN;q=0.1,zh-TW;q=0.1,ko;q=0.1,ar;q=0.1,cs;q=0.1,hu;q=0.1,tr;q=0.1
Accept-Encoding: gzip, deflate
Referer: http://beamit:8080/
Cookie: __utma=248039316.1622718495.1317335167.1319648741.1319655028.19; __utmb=248039316.4.10.1319655028; __utmc=248039316; __utmz=248039316.1317335167.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Connection: Keep-Alive
Content-Length: 76
Content-Type: multipart/form-data; boundary=----------cah2BDOhbumylzxVY398ZJ

Answer 1

I figured out what the issue was. After stripping off all unnecessary code and markup, I was left with a bare-bones form/iframe file upload page.

When I am building the form dynamically, I insert the file input element as a child:

<input type="file" id="file-select-input" />

… and I had something like this:

<form enctype="multipart/form-data" id="file-select-form" target="select-file-iframe" method="POST" action="/upload/">
    <div id="file-select-button" class="">
        <input type="file" id="file-select-input" />
    </div>
</form>
<iframe style="display: none" id="select-file-iframe" src="javascript:false;" name="select-file-iframe"></iframe>

This setup was giving me the issues. After some investigation, it turns out that when I submit the above form, the input file information was not being sent. The reason for this, it turns out, is that I didn’t have the name attribute specified on the file input element. So when I changed it to this:

<input type="file" id="file-select-input" name="file" />

… things worked.