Ajax file upload in mvc application

Question

in my MVC app i using Ajax upload (Version 3.5 (23.06.2009)) in this part of code:

<div id="userPhotosUpload">
   <span class="tabs_fieldDesc">@Html.Label("txtPhotoDescription", "Desc")</span>
    @Html.TextBox("txtPhotoDescription", "", new { @maxlength = "30", @class = "tabs_fullLength" })              
    <div class="buttonLine">
       <button id="btnAddUserPhoto">Add picture</button>
    </div>
    <input id="txtSelectedPhotoFolderId" type="hidden" value="" />
</div>
<script type="text/javascript">
$(document).ready(function () {
//photo upload
var photoUpload = new AjaxUpload($('#btnAddUserPhoto'), {
    action: '/Profile/ProcessPhoto',
    name: 'uploadfile',
    responseType: 'json',
    autoSubmit: true,
    onSubmit: function (file, ext) {
        showProgressBar();
        photoUpload.setData({
            photoDescription: $('#txtPhotoDescription').val(),
            idPhotoFolder: $('#txtSelectedPhotoFolderId').val()
        });
    },
    onComplete: function (file, response) {
        hideProgressBar();
        $('#txtPhotoDescription').val('');
        var currentSelectedFolderId = getSelectedFolder();
        LoadPhotoFolders();
        SelectPhotoFolder(currentSelectedFolderId);
    }
});
</script>

If I upload bigger file then 1MB, AjaxUpload dont call method in controller:

[Authorize]
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public JsonResult ProcessPhoto(string photoDescription, Int64 idPhotoFolder)
{
    //process request with file
}

and Fiddler2 show me this:

POST /Profile/AddUserPhoto HTTP/1.1 Host: localhost:55538 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Accept-Language: cs,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive Referer: Cookie: AspxAutoDetectCookieSupport=1; .ASPXAUTH=AB45C67E90AD19402C47818CC4BC78504C96F6BB063E07F89E918F22D3A42B441B14B57818448BAAD3ABEEED48C1EA41431C89F149B3BA53D59950694F33C447462EE56AC33CFB54F1ADAC7B7A4F5D69F6ED3855A649F217EDC56B2250E6BFC87052C0640C1C191F212A76B3A9D9973609F6E537992BBADBC1A3F97853A8B90485DE9C11819D54D1F0D0F9838EDAE73E; ASP.NET_SessionId=gflyfmea2ty2gm3i4rea2adx Content-Type: multipart/form-data; boundary=---------------------------481414423196 Content-Length: 6046387

-----------------------------481414423196 Content-Disposition: form-data; name="photoDescription"

-----------------------------481414423196 Content-Disposition: form-data; name="idPhotoFolder"

136 -----------------------------481414423196 Content-Disposition: form-data; name="uploadfile"; filename="sam_1103.jpg" Content-Type: image/jpeg

HTTP/1.1 504 Fiddler - Receive Failure Content-Type: text/html; charset=UTF-8 Connection: close Timestamp: 15:30:34.321

[Fiddler] ReadResponse() failed: The server did not return a response for this request.

Some idea where is problem?

Thanks

Maate Maate · Accepted Answer · 2012-09-08T14:07:26

It seems that the server is not responding (Http 504).

Does the method ProcessPhoto get called at all?

If not then you should probably take a look at your .config settings. You could also check what the server response is in the ajax onComplete method without having fiddler enabled.

If your server ProcessPhoto method does get called, does the error happen both on a local web server and on a remote web server (it would be nice to eliminate any other possible source of the timeout).

Finally, if your method gets called, is it possible that it is your photo processing rather than the web server communication that is actually slow? The last would be my initial guess, but it would be nice with more information :-)

Anyway, just some ideas :-)

Ajax file upload in mvc application

1 Answers