Redactor wysiwyg insert image is not working with mvc
Permalink
I am doing insert image in redactor where we need to tell redactor that on which controller and actionmethod need to go save image file in folder and take the path to retrieve the image on UI. The problem is that when i am inserting image in this, its uploading image correctly but when my controller method return the path of image to UI it insert double quotes, two times under src attribute of image tag on html page.like img src=""../../images/maxresdefault.jpg"" data-image="efzkbwwrx91g" Due to which i am not able to see the iamge.as i remove one double quotes from src attribute on html page then the image is showing.
The code which i have written to achieve this is given below.
Javascript code:
$(document).ready(function () {
$R('#content', {
plugins: ['advanced', 'table', 'imagemanager', 'alignment', 'myplugin'],
imageUpload: '/Home/Images/', imageEditable: true, imageResizable: true, focus: true, imageUploadCallback: function (image, json) {
$(image).attr('id', json.id);
},
imageUploadErrorCallback: function (json) {
alert('error');
}
}); });
MVC controller code:
public ActionResult Images(HttpPostedFileBase filedata)
{
var fileName = "";
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
using (file.InputStream)
{
fileName = Path.GetFileName(file.FileName);
// store the file
var path = Path.Combine(Server.MapPath("/images/"), fileName);
file.SaveAs(path);
}
}
var mainpath = "../../images" + "/" + fileName;
mainpath= HttpUtility.JavaScriptStringEncode(mainpath);
return Json( mainpath);
}
Html text:
<textarea id="content"></textarea>
Please help me what to do.
Thanks in advance
I have attached screenshot to better understanding what i have done to insert image
The code which i have written to achieve this is given below.
Javascript code:
$(document).ready(function () {
$R('#content', {
plugins: ['advanced', 'table', 'imagemanager', 'alignment', 'myplugin'],
imageUpload: '/Home/Images/', imageEditable: true, imageResizable: true, focus: true, imageUploadCallback: function (image, json) {
$(image).attr('id', json.id);
},
imageUploadErrorCallback: function (json) {
alert('error');
}
}); });
MVC controller code:
public ActionResult Images(HttpPostedFileBase filedata)
{
var fileName = "";
for (int i = 0; i < Request.Files.Count; i++)
{
var file = Request.Files[i];
using (file.InputStream)
{
fileName = Path.GetFileName(file.FileName);
// store the file
var path = Path.Combine(Server.MapPath("/images/"), fileName);
file.SaveAs(path);
}
}
var mainpath = "../../images" + "/" + fileName;
mainpath= HttpUtility.JavaScriptStringEncode(mainpath);
return Json( mainpath);
}
Html text:
<textarea id="content"></textarea>
Please help me what to do.
Thanks in advance
I have attached screenshot to better understanding what i have done to insert image