Send large data from javascript to code behind

Question

I have multiple base64 strings which I need to send them from javascript to ASP.NET code behind. I use asp:HiddenField now but the strings are so heavy that it takes a long time for these strings to be saved in hidden fields, and sometimes the browser crashes!

I also used this code to send data but it doesn't work and even if it works I cant perform further processes on strings because the method should be static.

Javascript:

$.ajax({
  type: 'POST',
  url: '/pages/panel/addproduct.aspx/UploadImage',
  data: "{'imageData':" + "\"" + mainImage + "\"}",
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  success: function (msg) {
    alert("Done successfully.");
  }
});

Code behind:

[WebMethod()]
public static void UploadImage(string imageData)
{
  byte[] bytes = Convert.FromBase64String(imageData);
  using (MemoryStream ms = new MemoryStream(bytes))
  {
    CroppedMainImage = System.Drawing.Image.FromStream(ms);
  }
}

What is the alternative?

" I cant perform further processes on strings because the method should be static"... whaaa? — spender, Aug 17 '15 at 16:11
@spender I need to save this image for further processes which is going to be server-side processes on image. — Payam Sh, Aug 17 '15 at 16:13
Why are you using base64 strings for binary data? Javascript allows you to send typed arrays/blob data without conversion. — spender, Aug 17 '15 at 16:14
@spender what is that? In my webpage users upload photos, crop them with this tool: http://fengyuanchen.github.io/cropper/ and then i draw the cropped part of image on canvas. i need to save this image on convas to my server, so i think i have to send the base64 string to code behind... — Payam Sh, Aug 17 '15 at 16:17
[HTMLCanvasElement.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) you can use the toBlob method of the canvas element to get a blob object which you can then use to send to the server — Patrick Evans, Aug 17 '15 at 16:20
Sorry didnt notice the support was mostly just firefox, you can look at [this question/answer](http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) to see how to convert a base64 string to a blob (ignore the object url part) — Patrick Evans, Aug 17 '15 at 16:27
@PayamSh : https://github.com/blueimp/JavaScript-Canvas-to-Blob/blob/master/js/canvas-to-blob.js provides a polyfill that keeps everything as binary data. — spender, Aug 17 '15 at 16:28
@EnriqueZavaleta I have a maximum of 7 asp:FileUploads which users can use. — Payam Sh, Aug 17 '15 at 16:30
By the way, do u guys know a better approach than canvas and these stuff? I need to save the user's cropped image in my server. and I use this cropper http://fengyuanchen.github.io/cropper/ — Payam Sh, Aug 17 '15 at 16:33

Send large data from javascript to code behind

0 Answers0