how to display a .docx file in ckeditor? - asp.net

Question

I am making a website in ASP.NET using C#. I have stored .docx file in database in binary form. I have successfully retrieved it but now my task is that I have to open .docx file from database in ckeditor. And if I make any changes then the file in the database should be updated.
Code for saving .docx file in DB...
private Boolean InsertUpdateData(SqlCommand cmd)
{
String strConnString = System.Configuration.ConfigurationManager
.ConnectionStrings["conString"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
cmd.ExecuteNonQuery();
return true;
}
catch (Exception ex)
{
Response.Write(ex.Message);
return false;
}
finally
{
con.Close();
con.Dispose();
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
// Read the file and convert it to Byte Array
string filePath = FileUpload1.PostedFile.FileName;
string filename = Path.GetFileName(filePath);
string ext = Path.GetExtension(filename);
string contenttype = String.Empty;
//Set the contenttype based on File Extension
switch (ext)
{
case ".doc":
contenttype = "application/vnd.ms-word";
break;
case ".docx":
contenttype = "application/vnd.ms-word";
break;
case ".xls":
contenttype = "application/vnd.ms-excel";
break;
case ".xlsx":
contenttype = "application/vnd.ms-excel";
break;
case ".jpg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
case ".gif":
contenttype = "image/gif";
break;
case ".pdf":
contenttype = "application/pdf";
break;
}
if (contenttype != String.Empty)
{
Stream fs = FileUpload1.PostedFile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
//insert the file into database
string strQuery = "insert into tblFiles(Name, ContentType, Data)" +
" values (#Name, #ContentType, #Data)";
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.Add("#Name", SqlDbType.VarChar).Value = filename;
cmd.Parameters.Add("#ContentType", SqlDbType.VarChar).Value
= contenttype;
cmd.Parameters.Add("#Data", SqlDbType.Binary).Value = bytes;
InsertUpdateData(cmd);
lblMessage.ForeColor = System.Drawing.Color.Green;
lblMessage.Text = "File Uploaded Successfully";
}
else
{
lblMessage.ForeColor = System.Drawing.Color.Red;
lblMessage.Text = "File format not recognised." +
" Upload Image/Word/PDF/Excel formats";
}
}
Retrieving from DB...
private DataTable GetData(SqlCommand cmd)
{
DataTable dt = new DataTable();
String strConnString = System.Configuration.ConfigurationManager
.ConnectionStrings["conString"].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
SqlDataAdapter sda = new SqlDataAdapter();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
try
{
con.Open();
sda.SelectCommand = cmd;
sda.Fill(dt);
return dt;
}
catch
{
return null;
}
finally
{
con.Close();
sda.Dispose();
con.Dispose();
}
}
private void download(DataTable dt)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = dt.Rows[0]["ContentType"].ToString();
Response.AddHeader("content-disposition", "attachment;filename="
+ dt.Rows[0]["Name"].ToString());
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
protected void btnshow_Click(object sender, EventArgs e)
{
string s1 = proclist.SelectedItem.Value;
string str1 = "";
db.con.Open();
try
{
string str = "select Name, ContentType, Data from tblFiles where Name='" + proclist.SelectedItem.Value + "'";
db.com = new SqlCommand(str, db.con);
SqlDataReader dr = db.com.ExecuteReader();
DataTable dt = GetData(db.com);
if (dt != null)
{
download(dt);
}
}
catch (NullReferenceException ex)
{
ex.ToString();
}
db.con.Close();
}

Answer 1

Javascript method:
function button_convertDocxToHTML_DisplayInCKEditor() {
$.ajax({
type: "POST",
async: false,
url: "Page.aspx/GetHTML",
data: "{'pathFile':'UploadFolder/',
'fileName':'docName',
'extensionFile':'.docx'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var resultHtml = result.d;
var objEditor = CKEDITOR.instances["yourID_Description"];
objEditor.setData(resultHtml);
},
error: function (result) {
// Unexpected error...
return false;
}
});
}
In the code-behind Page.aspx.cs, we have a web method in the side server. Maybe you will need some using like these:
using System.Reflection;
using System.Runtime.InteropServices;
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetHTML(string pathFile, string fileName, string extensionFile)
{
string result = string.Empty;
object path_DocsName = HttpContext.Current.Request.MapPath(pathFile + fileName + extensionFile);
object o = Missing.Value;
object oFalse = false;
object oTrue = true;
Microsoft.Office.Interop.Word._Application app = null;
Microsoft.Office.Interop.Word.Documents docs = null;
Microsoft.Office.Interop.Word.Document doc = null;
StreamReader reader = null;
try
{
app = new Microsoft.Office.Interop.Word.Application
{
Visible = false,
DisplayAlerts = Microsoft.Office.Interop.Word.WdAlertLevel.wdAlertsNone
};
docs = app.Documents;
doc = docs.Open(ref path_DocsName, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o, ref o);
doc.Activate();
string newHtmlFile = HttpContext.Current.Request.MapPath("pathHtmlTEMPORAL/" + fileName + ".html");
// Create html file
doc.SaveAs(FileName: newHtmlFile, FileFormat: Microsoft.Office.Interop.Word.WdSaveFormat.wdFormatHTML);
doc.Close(ref o, ref o, ref o);
app.Quit(ref o, ref o, ref o);
using (reader = new StreamReader(newHtmlFile, Encoding.GetEncoding("utf-8")))
{
result += reader.ReadToEnd();
reader.Dispose();
reader.Close();
}
}
catch (Exception ex)
{
result = Resources.WholeSite.Validation_UnexpectedError + ": " + ex.Message;
}
finally
{
if (doc != null) Marshal.FinalReleaseComObject(doc);
if (docs != null) Marshal.FinalReleaseComObject(docs);
if (app != null) Marshal.FinalReleaseComObject(app);
if (reader != null) { reader.Dispose(); reader.Close(); }
}
return result; // this result has all html that you have to display into CKEditor.
}