Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Empty file input elements are not handled correctly in ajaxSubmit #315

Closed
stijnherreman opened this issue Apr 23, 2013 · 1 comment
Closed

Empty file input elements are not handled correctly in ajaxSubmit #315

stijnherreman opened this issue Apr 23, 2013 · 1 comment

Comments

@stijnherreman
Copy link

When you have multiple file input elements, and one or more are empty, those empty elements are not handled correctly.

One could argue that empty file input elements should not be passed to the server (disabling them is one method), but this is a subtle issue that caused us some headaches while trying to find a minimal test case.

At least in one environment this causes an issue: ASP.NET MVC 4.
The files are uploaded (they can be observed with Request.Files) but model binding fails and you end up with an empty IEnumerable<HttpPostedFileBase>.

Below is the test page and Fiddler logs from Chrome 26. Firefox 20 and IE 10 have the same behaviour.
Summarised, the difference is that a regular form submit uses Content-Type: application/octet-stream for the empty element while ajaxSubmit() is missing Content-Type.

test page

<!doctype html>
<title>empty file upload test</title>
<h1>regular</h1>
<form id="regular" method="post" enctype="multipart/form-data">
    <label>album name</label>
    <input name="album_name" type="text">
    <br>
    <input name="pictures" type="file">
    <br>
    <input name="pictures" type="file">
    <br>
    <input name="pictures" type="file">
    <br>
    <input type="submit" value="upload">
</form>
<h1>ajax</h1>
<form id="ajax" method="post" enctype="multipart/form-data">
    <label>album name</label>
    <input name="album_name" type="text">
    <br>
    <input name="pictures" type="file">
    <br>
    <input name="pictures" type="file">
    <br>
    <input name="pictures" type="file">
    <br>
    <input type="submit" value="upload">
</form>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
    $("#ajax").on("submit", function ()
    {
        $(this).ajaxSubmit();
        return false;
    });
</script>

Chrome regular

POST http://localhost/empty_file_upload_test.html HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 815
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryiXiuPH6xjVUsQtTu
Referer: http://localhost/empty_file_upload_test.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

------WebKitFormBoundaryiXiuPH6xjVUsQtTu
Content-Disposition: form-data; name="album_name"

test
------WebKitFormBoundaryiXiuPH6xjVUsQtTu
Content-Disposition: form-data; name="pictures"; filename="black.png"
Content-Type: image/png

?PNG
�
???
IHDR???�???���????wS????�sRGB???�????�gAMA????
?a�???  pHYs??�???�?�?o?d???IDAT�Wc```???�?�\??i????IEND?B`?
------WebKitFormBoundaryiXiuPH6xjVUsQtTu
Content-Disposition: form-data; name="pictures"; filename="white.png"
Content-Type: image/png

?PNG
�
???
IHDR???�???���????wS????�sRGB???�????�gAMA????
?a�???  pHYs??�???�?�?o?d???IDAT�Wc?????�?�??5??????IEND?B`?
------WebKitFormBoundaryiXiuPH6xjVUsQtTu
Content-Disposition: form-data; name="pictures"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundaryiXiuPH6xjVUsQtTu--

Chrome ajaxSubmit()

POST http://localhost/empty_file_upload_test.html HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 762
Accept: */*
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryPWddK0rQAGcCXjLF
Referer: http://localhost/empty_file_upload_test.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

------WebKitFormBoundaryPWddK0rQAGcCXjLF
Content-Disposition: form-data; name="album_name"

test
------WebKitFormBoundaryPWddK0rQAGcCXjLF
Content-Disposition: form-data; name="pictures"; filename="black.png"
Content-Type: image/png

?PNG
�
???
IHDR???�???���????wS????�sRGB???�????�gAMA????
?a�???  pHYs??�???�?�?o?d???IDAT�Wc```???�?�\??i????IEND?B`?
------WebKitFormBoundaryPWddK0rQAGcCXjLF
Content-Disposition: form-data; name="pictures"; filename="white.png"
Content-Type: image/png

?PNG
�
???
IHDR???�???���????wS????�sRGB???�????�gAMA????
?a�???  pHYs??�???�?�?o?d???IDAT�Wc?????�?�??5??????IEND?B`?
------WebKitFormBoundaryPWddK0rQAGcCXjLF
Content-Disposition: form-data; name="pictures"


------WebKitFormBoundaryPWddK0rQAGcCXjLF--
@stijnherreman
Copy link
Author

Seems to be a duplicate of #180

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@stijnherreman