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]);' />

Community · Accepted Answer · 2017-05-23 11:59:08Z

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Dec 22, 2015 at 6:56

teo van kot

12.5k10 gold badges40 silver badges73 bronze badges

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

1 Comment

teo van kot Over a year ago

@AnabikThakur no problem. I prefer it over FormData() becouse of IE 8 compatibility

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Bhavik Jani · Accepted Answer · 2015-12-22 07:23:23Z

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

Anil Panwar · Accepted Answer · 2015-12-22 07:28:23Z

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

Collectives™ on Stack Overflow

Upload file using Jquery in MVC

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Linked

Related