0

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
}
Community
  • 1
  • 1
Ammar Khan
  • 346
  • 1
  • 9
  • 27

1 Answers1

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/

ismatim
  • 166
  • 3
  • 13
  • The method not even get hit if I place a parameter accept type "HttpPostedFileBase" – Ammar Khan Dec 04 '13 at 14:13
  • Do you have on your form an element like this: **** ? – ismatim Dec 04 '13 at 14:36
  • 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? – Ammar Khan Dec 04 '13 at 14:52
  • did you try to put a string in the parameter ? http://stackoverflow.com/questions/6754551/mvc3-posting-byte-array-to-a-controller-database-rowversion – ismatim Dec 04 '13 at 15:45