uploading file using jquery ajax - null issue

Question

I have been trying this for a couple of hours now without making any headway. Here is the issue: I am trying to upload a file using jquery ajax. On the client side, it seems fine when I debug: I can see the file object, its name, its size, etc.

On the server side, the HttpPostedFileBase request is always null. Below is the code:

    //client side    
    <input type="file" style="visibility:hidden; height:0; width:0;" id="taskFileUpload"/>

    //triggered by file input change event
    var uploadFile = function (model, e) {
     fileUploadRequest('api/uploadFile',e.target.files[0]);
    }

   //so far seems good when debugging    
    var fileUploadRequest = function (url, file) {
             $.ajax({
                 url: url,
                 type: "POST",
                 data: file,
                 processData: false
             });


 //server side - request is always null!
 [AcceptVerbs("Post")]
 [AllowAnonymous]
 public HttpResponseMessage uploadFile(HttpPostedFileBase request)
 {
    return Request.CreateResponse(HttpStatusCode.OK, request);
 }

EDIT: I figured out the issue. The FormData approach as suggested below wasn't working for me for a different reason: Error 415 Media Type not supported. This had to do with .Net not knowing how to bind to HttpPostedFileBase object. So I did the following and it seems to work:

public HttpResponseMessage uploadFile()
        {
            var file = HttpContext.Current.Request.Files.Count > 0 ?
                HttpContext.Current.Request.Files[0] : null;
            return Request.CreateResponse(HttpStatusCode.OK);
        }

You need to use `FormData`, and you missing some ajax options - refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , May 02 '16 at 22:37
@StephenMuecke I tried the FormData approach, but it didn't work for me: var formData = new FormData(); formData.append(e.target.files[0]);. Can you explain why I would need it anyway? The request seems to be going fine through client side, only the serverside gets a null object. — Riz, May 02 '16 at 22:46
You cannot send files using ajax unless you use `FormData`. More [info here](https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) — , May 02 '16 at 22:50
@StephenMuecke, thanks I tried that but now I get "unsupported media type" error on the front-end. — Riz, May 02 '16 at 22:53

score 2 · Accepted Answer · answered May 02 '16 at 22:45

Show this example

function subirArchivo() {
var data = new FormData();
var files = $("#fuArchivo").get(0).files;
// Si se tiene archivo se va a guardar
if (files.length > 0) {
    data.append("Archivo", files[0]);
}
var ruta = '';
// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
    type: "POST",
    url: "../ServicioValidaciones.asmx/subirArchivo",
    contentType: false,
    processData: false,
    data: data,
    success: function (result) {
        ruta = result;
    },
});
ajaxRequest.done(function (xhr, textStatus) {
// Make Ajax request with the contentType = false, and procesDate = false
});

}

hi @araad1992, I tried the FormData approach, but it didn't work for me. Can you please show me what your form and input file control look like? — Riz, May 02 '16 at 22:49

uploading file using jquery ajax - null issue

1 Answers1