Writing server-side handler for jquery file upload

Question

I'm trying to get the blueimp jQuery-File-Upload component working in my MVC application.

Here's my code so far.

JavaScript:

$('#fileupload').fileupload({
    url: '@Url.Action("AddAttachment", "File")',
    dataType: 'json',
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(progress);
    },
    add: function(e, data) {
        data.submit();
    },
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

Controller:

[HttpPost]
public JsonResult AddAttachment()
{
    var files = new List<FileAttachmentFileModel>();

    try
    {
        if (Request.Files.Count > 0)
        {
            using (var dbContext = new vegaEntities())
            using (var transaction = dbContext.Database.BeginTransaction())
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    HttpPostedFileBase file = Request.Files[i];

                    if (file.ContentLength > 0)
                    {
                        FileAttachment fileAttachment = new FileAttachment
                        {
                            Id = Guid.NewGuid(),
                            FileName = file.FileName,
                            ContentType = file.ContentType,
                            DateAdded = DateTime.UtcNow
                        };
                        // Load content
                        fileAttachment.Content = new byte[file.ContentLength];
                        file.InputStream.Read(fileAttachment.Content, 0, file.ContentLength);
                        // Add to database
                        dbContext.FileAttachments.Add(fileAttachment);
                        // Add to results
                        files.Add(new FileAttachmentFileModel
                        {
                            id = fileAttachment.Id.ToString(),
                            name = file.FileName,
                            size = file.ContentLength.FormatAsFileSize(),
                            //action = FileAttachmentFileModel.AddAction
                        });
                    }
                }
                dbContext.SaveChanges();
                transaction.Commit();
            }
        }
    }
    catch (Exception ex)
    {
        // TODO:
        return Json(new { message = ex.Message });
    }
    return Json(new { files = files });
}

This code is working with smaller files. My C# method gets called, the file is retrieved, and the progressall handler is called showing 100%.

The problem is when I attempt to upload a large file (where the progressall handler gets called more than once). In that case, the handler gets called with incrementing progress values up to 100%, as expected. But my C# method never gets called and the browser reports the following error.

POST http://localhost:1290/File/AddAttachment 404 (Not Found)

I'm confused by this error because the C# method is the same in both cases. Why is it found in one and not found in the other. I assume the issue is that my controller method is expecting a complete file and that I must instead write code to handle the upload in chunks. Is this right? Can anyone point me to documentation on how to write an upload handler using C#/MVC?

@MasterYoda: Right now, I'm using the ones that came with Visual Studio 2015, but could upgrade if there was a reason to. Would that make a difference? — Jonathan Wood
– Jonathan Wood, Commented Nov 7, 2017 at 22:26
probably not a massive difference, i reckon you are probably using .net 4.5 - 4.6 based on your version of VS. I have done this before using asp.net by serializing the entire file using a Stream, BinaryReader and Byte array. Check out my question here: stackoverflow.com/questions/17233884/…. I also did something similar with multiple file types using a similar file upload control except i was reading the file row by row and exporting each row to a mapping in the DB. Give me a little time and i will see if i can dig that out :) — Master Yoda
– Master Yoda, Commented Nov 7, 2017 at 22:32
@MasterYoda: It seems like you are doing something quite different. For example, you appear to be using WebForms instead of MVC. Second, you don't appear go be using AJAX that I can tell. And perhaps the biggest difference is that you don't appear to be using the jQuery file upload component that I'm trying to get working. — Jonathan Wood
– Jonathan Wood, Commented Nov 7, 2017 at 22:35
Yes thats true, but im not suggesting that you copy the entire example line by line, im just suggesting that you serialize your file into a stream and go from there. You cant use my example anyway as it uses a Telerik AJAX control to upload the document. I dont think there is an issue with the file upload control you are using, i think its probably more to do with how its handled server side — Master Yoda
– Master Yoda, Commented Nov 7, 2017 at 22:37

Jonathan Wood · Accepted Answer · 2017-11-10 13:17:45Z

3

Dang it! It was an issue with the maximum file size being exceeded. I know this. I've dealt with it before. But I got confused by the 404 error! D'oh!

edited Nov 10, 2017 at 13:17

answered Nov 10, 2017 at 2:13

Jonathan Wood

68.1k86 gold badges311 silver badges542 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Evk Over a year ago

So why it returns 404 and not something more meaningful?

Jonathan Wood Over a year ago

Yeah, that's what I wanted to know.

Evk Over a year ago

Here is similar question: stackoverflow.com/q/4731295/5311735. There you can see IIS returns 404.13 when request size exceeds maxAllowedContentLength. And if you list answers quite a bit you can find one that describes how to redirect this specific error (404 with subcode 13) to your mvc controller which can provide more meaningful description.

mdora7 · Accepted Answer · 2017-11-15 17:56:09Z

1

In fact, there is a trigger that depends on the incorrect opening of the high file which is not downloaded on its base.

The 404 error depends on the IIS security protocol

If you are going to examine the details of Request and Response, you can see it yourself

I do not recommend resolving it by the IIS administrator.

If you will set it at the application level

an example in web.config;

<System.webServer>
    <Security>
      <RequestFiltering>
        <requestLimits maxAllowedContentLength = "30000000" />
      </ requestFiltering>
    </ security>
  </system.webServer>

answered Nov 15, 2017 at 17:56

mdora7

411 silver badge5 bronze badges

2 Comments

Jonathan Wood Over a year ago

I don't understand what you're saying. What do you mean by a trigger?

mdora7 Over a year ago

@JonathanWood the file is not downloaded in its actual size, then this file is trying to open.IIS is putting the security protocol into effect in this case

Collectives™ on Stack Overflow

Writing server-side handler for jquery file upload

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related