CODEWITHSUNDEEP
asp.net-mvc-3
Hary
Hary

Reputation: 5818

MVC3 Passing Image to Controller

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)
{
}

Upvotes: 0

Views: 4514

Answers (2)

Hary
Hary

Reputation: 5818

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);
    }

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

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.

Upvotes: 1

Related Questions