MVC - Upload document with ajax call

Question

I am using the following code to upload documents. I am using ajax in this scenario.

In the following code i get Request.Files.Count as 0. Therefore the file doesn't get uploaded.

Front-end code:

<input type="file" name="name" id="pd-fileName" />
....
<button class="btn pr-btn" id="pd-addBtn" type="button" onclick="insertDocument()">Add</button>

function insertDocument() {
              ......

        jq.post('/Main/addDocument?Id=' + Id , function (data) {                
                alert('Data saved successfully.!');

              ......
            });

        });
    }

Code in the controller:

[HttpPost]
public JsonResult addDocument(int Id)
{
    string pathPhysical = Server.MapPath("~/Documents/" + Id + "/");
    if (!Directory.Exists(pathPhysical))
    {
        DirectoryInfo di = Directory.CreateDirectory(pathPhysical);
    }

    if (Request.Files.Count > 0)
    {
        var file = Request.Files[0];

        if (file != null && file.ContentLength > 0)
        {
            var documentName = Path.GetFileName(file.FileName);
            pathPhysical = Path.Combine(pathPhysical, documentName);
            file.SaveAs(pathPhysical);
        }
    }

    return Json(JsonRequestBehavior.AllowGet);
}

How do I solve this?

score 1 · Accepted Answer · edited Nov 28 '14 at 05:32

1

Try this:

<input id="pd-fileName" type="file" name="myfiles[]" multiple="multiple" />

var myfiles = document.getElementById("pd-fileName");
        var files = myfiles.files;
        var data = new FormData();

        for (i = 0; i < files.length; i++) {
            data.append('file' + i, files[i]);
        }

$.ajax({
  beforeSend:function(){...},
  type:'post',
  url:'you url here',
  data:data,
  processData:false,  // Tell jquery not to process data into any format
  success:function(){...},
  complete:function(){...}
});

edited Nov 28 '14 at 05:32

Anup

9,396
16
74
138

answered Nov 28 '14 at 04:50

CE ZHANG

527
4
7

How to pass `data` value? – Anup Nov 28 '14 at 04:57
http://stackoverflow.com/questions/24168040/upload-multiple-files-with-php-and-jquery/24168617#24168617 – Anup Nov 28 '14 at 05:33
Just for record, this method does NOT work in IE8 or below. If you really need this, you should do a little 'hacking'. – CE ZHANG Nov 28 '14 at 06:10
@Anup, for passing data value, FormData object works fine. var formData=new FormData(); formData.append('file here'). But this object isn't supported by IE8. – CE ZHANG Nov 28 '14 at 06:20

score 0 · Answer 2 · answered Nov 28 '14 at 04:50

For MVC you need a HttpPostedFileBase object in your controller to catch the file, the following example might help you,

<form action="" method="post" enctype="multipart/form-data">

  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" />

  <input type="submit" />
</form>

Note: for UPload: enctype="multipart/form-data" is a prerequisite.

At Controller

[HttpPost]
public ActionResult Index(HttpPostedFileBase file) {

  if (file.ContentLength > 0) {
    var fileName = Path.GetFileName(file.FileName);
    var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
    file.SaveAs(path);
  }

  return RedirectToAction("Index");
}

Notice that the argument to the action method is an instance of HttpPostedFileBase.

Your code with refresh the page... as i need to use ajax....i cannot use submit button with type submit...! — Anup, Nov 28 '14 at 04:55

MVC - Upload document with ajax call

2 Answers2