Upload file using Jquery in MVC

Question

I need to upload file using jquery from my modal popup. But I get the HttpPostedFileBase as null during ajax call. Can anyone help me out on this. Below is the jquery code:

function uploadDocument(contactId, tripId, file) {
if ($('#documentUploadInput').val() == '') {
    alertify.error('Please select a file to upload');
    return;
}
$.ajax({
    url: '/CRMDomain/ContactDetail/UploadDocument',
    data: { contactId: contactId, tripId: tripId, file: file },
    type: 'POST',
    success: function () {
        alertify.success('Uploaded');
        $('#CRMUploadDocumentModal').modal('hide');
    },
    error: function () {
        alertify.error('Not Uploaded');
    }
});

}

And this is the way i call the jquery function:

<input id="btnSave" 
       type="button" 
       value="Upload" 
       class="btn btn-default"  onclick='uploadDocument($("#ContactId").val(), $("#tripId").val(), $("#documentUploadInput")[0].files[0]);' />

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

You can't post file so easy with Ajax.

The best solution that I always use is to use jQuery Form Plugin then you should just change your .ajax to .ajaxForm.

You can check this answer for more details.

edited May 23 '17 at 11:59

Community

1
1

answered Dec 22 '15 at 06:56

teo van kot

12,031
10
37
66

@AnabikThakur no problem. I prefer it over `FormData()` becouse of IE 8 compatibility – teo van kot Dec 22 '15 at 08:56

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You've to use FormData to send the multipart file format to the controller action.

Try the following ajax query to post the file:

$.ajax({
    url: '/CRMDomain/ContactDetail/UploadDocument',
    data: { contactId: contactId, tripId: tripId, file: new FormData($("#documentUploadInput")[0].files[0]) },
    type: 'POST',
    contentType: false,
    processData: false,
    success: function () {
        alertify.success('Uploaded');
        $('#CRMUploadDocumentModal').modal('hide');
    },
    error: function () {
        alertify.error('Not Uploaded');
    }
});

You've to manually set processData: false, otherwise jQuery would convert your file to a string. And you also need to set contentType: false as jQuery would override you content type when submitting the request.

post your controller action in the question as well.

Hope this helps.

Thanks for the help. I used ajaxForm to accomplish it. I will use this code later to see if this also works. It might help others. — MaxPayne999, Dec 22 '15 at 08:56

Anil Panwar · Answer 3 · 2015-12-22T07:28:23.420

$(function () {
$('#btnSave').click(function () {
  var fileUpload = $("#documentUploadInput").get(0);//Upload input box
  var file = fileUpload.files;
  var data= new FormData();

for (var i = 0; i < files.length; i++) {
  data.append('file', file[i]);
}
  data.contactId = $("#ContactId").val();
  data.tripId= $("#tripId").val();
$.ajax({
  url: "/CRMDomain/ContactDetail/UploadDocument",
  type: "POST",
  contentType: false,
  processData: false,
  data: data,
  success: function (result) {
     alert(result);
},
error: function (err) {
    alert(err.statusText);
 }
  });
 });
})

score 0 · Answer 4 · answered Dec 22 '15 at 07:23

You need to change little bit code.

var files = $('#documentUploadInput').get(0).files;
var data = new FormData();
if (files.length > 0) {
    data.append('file', files[0]);
}

$.ajax({
        url: '/CRMDomain/ContactDetail/UploadDocument',
        type: 'POST',
        data: data ,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'JSON',
        success: function (data) {
            alert(data)
        },
        error: function errorAlert(e, errorMsg) {
            alert("Your request was not successful: " + errorMsg);
       }
    });

Upload file using Jquery in MVC

4 Answers4

Linked