Question

I have 1 question I don’t find an answer to.

(MVC ): On the main View I have loaded a PartialView into a Jquery UI dialog. I create something and I send everything to database on submit.In the form I have an input type=”file” with the “multiple” attribute which helps me to upload some photos

   ( <input type="file" multiple="") 

. I send a list of photos(HttpPostedFileBase) to database . The problem is I always receive a NULL list.

Q: What is the problem? I also have some Ajax code that doesn’t work.

Same code used at another controller which returns a View is working very well. I thinks it’s a problem with the dialog.

dialog code from the main view:

 $('#element').dialog({
        autoOpen: false,           
        modal: true,
        open: function (event, ui) {
            $(this).load('@Url.Action("AddCar", "Cars")', function (html) {                    
                $('form', "#sDiv").submit(function () {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (res) {
                            if (res.success) {
                                $('#element').dialog('close');
                            }
                            window.location.reload();
                        }
                    });
                    return false;
                });
            });
        }

Answer 1

You seem to be using AJAX to submit the form. But that’s not supported. You cannot upload files using jQuery AJAX functions. You may take a look at the jquery.form plugin which supports uploading files as well.

There are 2 camps out there:

1. HTML5 – supported by the modern browsers where you could use the File API to upload files with AJAX.
2. The legacy camp – things like Internet Explorer which do not support the File API and in which you have to fallback to techniques such as hidden iframes and stuff to simulate it. That’s what the jquery.form plugin does – it detects on which camp belongs the browser and uses the appropriate technique

There are also many other file upload components that you might checkout such as Uploadify, Plupload, Blueimp File Upload, Valums AJAX uploader, and other. Just pick one and integrate in your application if you don’t want to be coding all the underlying transport mechanisms.