[RESOLVED]JQuery Ajax return FileContentResult

Hi,

I have Ajax function like this to export file image

    $.ajax({
          type: 'POST',
          url: uploadUrl,
          data: '{ "imageData" : "' + image + '" }',
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function (data) {
          $(location).attr('href', url);
     }});
               

The uploadUrl from that code will go to this action controller and return Json when success

       public JsonResult UploadImage(string imageData)
        {
            try
            {
                var base64string = imageData.Substring(22);
                byte[] data = Convert.FromBase64String(base64string);
                Session["data"] = data;
            }
            catch (Exception ex)
            {

                var msg = ex.Message;
            }
            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
        }

If success this will again to the server to get the Image data as you can see in this line code

       $(location).attr('href', url);

and above url actually go to this below action controller to get image data

        public FileContentResult ExportPng()
        {
            byte[] contents = (byte[])Session["data"];
            return File(contents, "image/png", "networkplan" + ".png");
        }

The problem from this solution is, there are 2 times round trip to the server:

1. UploadImage controller -> to indicate ajax call success

2. ExportPng -> to get the file Image.

And I dont really satisfy with this solution because it too much round trip to the server. Is there any possibility to get File Image using Ajax only with 1 times round trip to the server?

Thanks and Regards

It is not clear to me what you are really trying to do.  It looks like you are uploading a data uri of an image to the server but you only persist it to session.  Then you make a get request to the server for another page which only returns the image.  If
you want to display the image in a browser page with no other content then do not make the ajax call to the UploadImage action.  Make a form post to the UploadImage action and return the FileContentResult.

If I have misunderstood your requirements, please elaborate.

Hi,

I am sorry for not being clear. Actually what I am trying to do is that I have an HTML 5 canvas image and I want to let user later download this image as JPEG, PNG, etc. Because HTML Canvas Image is base64 url encoded string then I need first to convert
it to JPEG,PNG using server side code etc. Thatsway first I send this HTML Canvas Image to server using Ajax, convert it to associated image (jpeg,png,etc), save it to session and then send back a client a Json while success is. After client know it is success,
I come again to the server and asking for the converted image and the server gives the converted image from the session and return it to client. So there will be 2 round trip from client to server.

It would be nice, if I only have 1 round trip to the server. For example by first request to the server, instead of returning a Json I prefer direct returning the converted image. The problem, I dont have idea how to do that. Is that possible?

Please let me know if something not clear :)

Thanks and Regards

Hi wapt49,

Why not send the image url as the data for your first ajax request.

If the image url can be shown ,that mean the the job which convert the html5 image into the jpg file  has been done successfully in the server side.

you can get the image url in the server side,and set the url for your image src.

Best Regards,

Kevin Shen.

Ah Ok. I got the Idea. Thanks :)

Leave a Reply