Upload file to server using jQuery request

Question

I have aspx file which having upload file option.

<input type="file" name="Attachment" />

On submit button i am sending request to MVC controller to save file.

self.SaveVPD = function () {
        var emp = { FirstName: 'edfd', SecondName: 'dfdf' };
        var data = new VPDModel(emp, self.EvidenceForm());
        var jsonData = ko.toJSON(data);
        var url = pageUrl + '/Save';

        debugger;
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json; charset=utf-8;",
            //contentType: "multipart/form-data",
            data: JSON.stringify(data),
            //dataType: "json",
            success: function (data) {
                debugger;
                if (data) {
                    //TODO::PP
                }
                else {
                    //TODO::PP
                }
            },
            error: function () {
                debugger;
                //TODO::PP
            }
        });

}

My MVC controller is look like

    [HttpPost]
        public ActionResult Save(VPDModel vpdInfo) //, HttpPostedFileBase Attachment)
        //public ActionResult Save(FormCollection collection)
        {
            if (ModelState.IsValid)
            {
}
}

And my model is

public class VPDModel
{
    public Employee Employee { get; set; }

public EvidenceForm EvidenceForm { get; set; }
}

EvedenceForm class is

public class EvidenceForm
{
    //public string Attachment { get; set; }
    public HttpPostedFileBase Attachment { get; set; }

}

When i send the request back to server VPDModel populate with all valid client side data without File Attachment. Its always null.

I have been to couple of article but cannot resolve it. can anyone help and let me know what am i doing wrong in it?

You need to use `FormData` (and set the correct ajax options) to upload files using ajax (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681)) — , Oct 06 '16 at 01:03
I have created formData using 'var formData = new FormData(); formData.append("VPDModel", data);' and changed $.ajax reques to **'data: formData, processData: false, contentType: false,'**. But getting empty object in controller. — user602291, Oct 06 '16 at 02:04
Edit you question to append the all the code your have tried (and since `data` appears to be an object, not a value, that could not possibly work - you need to append one value at a time) — , Oct 06 '16 at 02:26

Upload file to server using jQuery request

0 Answers0