MVC3 Passing Image to Controller

Question

I am creating image in javascript and assigning that to a img element in javascript. How to pass that image to controller on ActionButton click in MVC3?

Javascript

var picture = jqplotToImg($('#ChartContent')); //method to change chart as picture, no needed here
var img = document.getElementById("img1");
img.src = picture;

View

@using (Html.BeginForm())
{
  <img id="img1" name="img1" />
 @Html.ActionButton("Export","ExportData","Report")
}

Controller

public void ExportReport(FormCollection fc)
{
}

Do you want to post image as file to controller or what? img tag is not input tag, so it is not posted through Form post — Kirill Bestemyanov, Nov 01 '12 at 10:35
yes i want to post image as file. The exact need is that i want to add image to excel. But the image is created here from client side. So thought of posting the image to the server first and then adding it to excel. — Hary, Nov 01 '12 at 10:44

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You could use the HTML5 File API which allows you to upload the image asynchronously to the server.

And here's another example of how to convert the image to Base64 string which could then be sent to the server using any means such as AJAX for example.

edited May 23 '17 at 10:25

Community

1
1

answered Nov 01 '12 at 10:47

Darin Dimitrov

1,023,142
271
3,287
2,928

When i try to pass this to ImageUrl in asp.net, the image is not displayed – Hary Nov 01 '12 at 12:38
When i try to pass the below url to ImageUrl in asp.net, the image is not displayed `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABG4AAAH0CAYAAABsCGvoAAAgAElEcABCEAAAhAIKAHETUAnhrAgAAEIQAACEIAABCAAAQhAAAIQgADihjUAAQhAAAIQgAAEIAABCEAAAhCAAAQCSgBxE9CJISwIQAACEIAABCAAAQhAAAIQgAAEIIC4YQ1AAAIQgAAEIAABCEAAAhCAAAQgAIGAEkDcBHRiCAsCEIAABCAAAQhAAAIQgAAEIAABCCBuWAMQgAAEIAABCEAAAhCAAAQgAAEIQCCgBBA3AZ0YwoIABCAAAQhAAAIQgAAEIAABCEAAAogb1gAEIAABCEAAAhCAAAQgAAEIQAACEAgoAcRNQCeGsCAAAQhAAAIQgAAEIAABCEAAAhCAAOKGNQABCEAAAhCAAAQgAAEIQAACEIAABAJKAHET0IkhLAhAAAIQgAAEI=` – Hary Nov 01 '12 at 12:40
Does your browser support the [Data URI Scheme](http://en.wikipedia.org/wiki/Data_URI_scheme)? How does the `src` attribute of the image look like in the generated markup? – Darin Dimitrov Nov 01 '12 at 17:07

score 1 · Accepted Answer · answered Nov 02 '12 at 04:02

I prompted the base64 string and then copied and used that to test and so it fails. I used ajax method for this and it works

    function ExportData() {
    var picture = jqplotToImg($('#ChartContent'));
    //prompt("", picture);

    $.ajax({ type: 'POST',
        url: '../Report/Base64ToImage',
        async: false,
        data: { source: picture },
        success: function (data) {
            //alert(data);
        }
    });
    window.location.href = "../Report/ExportChart";
}

[HttpPost]
    public void Base64ToImage(string source)
    {
        string base64 = source.Substring(source.IndexOf(',') + 1);
        base64 = base64.Trim('\0');
        byte[] data = Convert.FromBase64String(base64);
        string path = System.Configuration.ConfigurationManager.AppSettings["UploadFolder"].ToString();

        var file = Server.MapPath(path + "Chart.jpg");
        System.IO.File.WriteAllBytes(file, data);
    }

MVC3 Passing Image to Controller

2 Answers2