Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Writing server-side handler for jquery file upload

Tags:

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?

like image 658
Jonathan Wood Avatar asked Nov 07 '17 22:11

Jonathan Wood


1 Answers

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!

like image 169
Jonathan Wood Avatar answered Sep 20 '22 13:09

Jonathan Wood