How to pass multipart/form-data to c# method via Ajax

Question

I am using html2canvs.js for taking screen shots of the page which is described here: How to take screen shot of current webpage using javascript/jquery

The above process works fine, but now I want to pass the Base64 data to a c# method via ajax. My code looks like:

$('#gbox_Basic').html2canvas({
    onrendered: function (canvas) {
        var imgString = canvas.toDataURL("image/png");
        $.ajax({
            type: "POST",
            url: "/Home/SentEmail2",
            data: //how to pass base64 data 'imgString' ,
            contentType: "multipart/form-data",
            success: function () {

            }
        });
    }
});

And here is my c# method

public void SentEmail2(what type of param it would accept?) {
    //process incoming params
}

ismatim · Accepted Answer · 2013-12-04 13:56:18Z

1

Give a try to this:

Controller.cs

 [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");

}

Form

The object FormData will hold the file element to be send.

var formData = new FormData($('form')[0]);
$.ajax({
    url: '/Home/SentEmail2',  //Server script to process data
    type: 'POST',
    xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
          if(myXhr.upload){ // Check if upload property exists
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false);         // For handling the progress of the upload
        }
        return myXhr;
    },
    //Ajax events
    beforeSend: beforeSendHandler,
    success: completeHandler,
    error: errorHandler,
    // Form data
    data: formData,
    //Options to tell jQuery not to process data or worry about content-type.
    cache: false,
    contentType: false,
    processData: false
});

References:

http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3

http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx/

answered Dec 4, 2013 at 13:56

ismatim

1961 gold badge5 silver badges14 bronze badges

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

4 Comments

Ammar Khan Over a year ago

The method not even get hit if I place a parameter accept type "HttpPostedFileBase"

ismatim Over a year ago

Do you have on your form an element like this: <input type="file" name="file" /> ?

Ammar Khan Over a year ago

I don't need to have input file type, as I already told in my above post that I am using plugin which give me the base64 data, and I want to pass it to the c# method. Is there anyway to directly pass the base64 data via ajax?

ismatim Over a year ago

did you try to put a string in the parameter ? stackoverflow.com/questions/6754551/…

Collectives™ on Stack Overflow

How to pass multipart/form-data to c# method via Ajax

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related