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 — user3559349
– user3559349, Commented May 2, 2016 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
– Riz, Commented May 2, 2016 at 22:46
You cannot send files using ajax unless you use FormData. More info here — user3559349
– user3559349, Commented May 2, 2016 at 22:50
@StephenMuecke, thanks I tried that but now I get "unsupported media type" error on the front-end. — Riz
– Riz, Commented May 2, 2016 at 22:53

araad1992 · Accepted Answer · 2016-05-02 22:45:49Z

2

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
});

}

answered May 2, 2016 at 22:45

araad1992

10411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riz Over a year ago

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?

Collectives™ on Stack Overflow

uploading file using jquery ajax - null issue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related