How to open excel file from local disk in Spreadsheet, when the file clicked in ejFileExplorer
Description
This knowledge base explains about how to open the excel file from local disk and view in ejSpreadsheet using ejFileExplorer.
Solution
JavaScript
HTML
<div id="fileExplorer"></div> <div id="SpreadsheetDialog"> <div style="height: 100%;"> <div id="SpredsheetViewer"></div> </div> </div>
JS
$("#fileExplorer").ejFileExplorer({
fileTypes: "*.xls,*.xlsx ",
layout: "tile",
path: "D:/Spreadsheet/", //Physical path.
ajaxAction: "Spreadsheet/FileAccess",
width: "100%",
minWidth: "150px",
isResponsive: true,
beforeOpen: "onBeforeOpen"
});
$("#SpreadsheetDialog").ejDialog({
width: "80%",
showOnInit: false
})
$("#SpredsheetViewer").ejSpreadsheet()
// Triggers before opening the file
function onBeforeOpen(args) {
var ssDialog = $("#SpreadsheetDialog").data("ejDialog"), ssObj = $("#SpredsheetViewer").data("ejSpreadsheet");
if (args.itemType == "File" && (/\.(xls|xlsx)$/i).test(args.selectedItems[0].name)) {
var file = args.model.selectedFolder + args.model.selectedItems[0];
$.ajax({
url: "Spreadsheet/Import",
type: "POST",
dataType: "json",
data: { filePath: file },
success: function (data) {
ssDialog.option("title", args.model.selectedItems[0]);
ssDialog.open();
ssObj.refresh();
ssObj.loadFromJSON(data); // Load the JSON data to the spreadsheet
}
});
args.cancel = true;
}
}
WEBAPI
using Syncfusion.EJ.Export;
using Syncfusion.JavaScript;
using Syncfusion.JavaScript.Models;
// To process the import request.
[AcceptVerbs("Get", "Post")]
public HttpResponseMessage Import()
{
string filePath = HttpContext.Current.Request.Params["filePath"];
ImportRequest importRequest = new ImportRequest();
//If the path from local drive.
Stream fileStream = System.IO.File.Open(filePath, FileMode.Open, System.IO.FileAccess.Read);
importRequest.FileStream = fileStream;
var spreadsheetData = Spreadsheet.Open(importRequest);
fileStream.Close();
fileStream.Dispose();
return new HttpResponseMessage() { Content = new StringContent(spreadsheetData, Encoding.UTF8, "text/plain") }; // Returns the Spreadsheet data
}
// To read the file in file explorer
[AcceptVerbs("Get", "Post")]
public object FileAccess(FileExplorerParams args)
{
FileExplorerOperations operation = new FileExplorerOperations();
if (args.ActionType == "Read")
return operation.Read(args.Path, args.ExtensionsAllow);
else
return string.Empty;
}
MVC
CSHTML
@(Html.EJ().FileExplorer("fileExplorer")
.FileTypes("*.xls,*.xlsx")
.Layout(LayoutType.Tile)
.Path(@Url.Content("D:/Spreadsheet/")) //Physical path.
.AjaxAction(@Url.Action("FileAccess"))
.Width("100%")
.MinWidth("150px")
.IsResponsive(true)
.ClientSideEvents(eve => eve.BeforeOpen("onBeforeOpen"))
)
@{Html.EJ().Dialog("SpreadsheetDialog").ContentTemplate(@<div style="height: 100%;">
@{Html.EJ().Spreadsheet<object>("SpredsheetViewer").Render();}
</div>).Width("80%").ShowOnInit(false).Render();}
<script>
// Triggers before opening the file
function onBeforeOpen(args) {
var ssDialog = $("#SpreadsheetDialog").data("ejDialog"), ssObj = $("#SpredsheetViewer").data("ejSpreadsheet");
if (args.itemType == "File" && (/\.(xls|xlsx)$/i).test(args.model.selectedItems[0])) {
var file = args.model.selectedFolder + args.model.selectedItems[0];
$.ajax({
url: '@Url.Action("Import", "Home")',
type: "POST",
dataType: "json",
data: { filePath: file },
success: function (data) {
ssDialog.option("title", args.model.selectedItems[0]);
ssDialog.open();
ssObj.refresh();
ssObj.loadFromJSON(data); // Load the JSON data to the spreadsheet
}
});
args.cancel = true;
}
}
</script>
Controller
using Syncfusion.EJ.Export;
using Syncfusion.JavaScript;
using Syncfusion.JavaScript.Models;
// To process the import request.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Import(ImportRequest importRequest, string filePath)
{
//If the path from local drive.
Stream fileStream = System.IO.File.Open(filePath, FileMode.Open, System.IO.FileAccess.Read);
importRequest.FileStream = fileStream;
var spreadsheetData = Spreadsheet.Open(importRequest);
fileStream.Close();
fileStream.Dispose();
return Content(spreadsheetData); // Returns the Spreadsheet data
}
// To read the file in file explorer
public ActionResult FileAccess(FileExplorerParams args)
{
FileExplorerOperations operation = new FileExplorerOperations();
if (args.ActionType == "Read")
return Json(operation.Read(args.Path, args.ExtensionsAllow));
else
return Json(string.Empty);
}
ASP .NET
ASPX
<ej:FileExplorer ID="fileExplorer" runat="server" FileTypes="*.xls,*.xlsx" Layout="Tile"
Path="D:/Spreadsheet/" AjaxAction="SpreadsheetFeatures.aspx/FileAccess" IsResponsive="true"
Width="100%" MinWidth="150px" ClientSideOnBeforeOpen="onBeforeOpen">
<AjaxSettings>
<Download Url="downloadFile.ashx{0}" />
<Upload Url="uploadFiles.ashx{0}" />
</AjaxSettings>
</ej:FileExplorer>
<ej:Dialog ID="SpreadsheetDialog" runat="server" Width="80%" ShowOnInit="false">
<DialogContent>
<div style="height: 100%;">
<ej:Spreadsheet ID="SpredsheetViewer" runat="server">
</ej:Spreadsheet>
</div>
</DialogContent>
</ej:Dialog>
<script type="text/javascript">
// Triggers before opening the file
function onBeforeOpen(args) {
var ssDialog = $("#SpreadsheetDialog").data("ejDialog"), ssObj = $("# SpredsheetViewer").data("ejSpreadsheet");
if (args.itemType == "File" && (/\.(xls|xlsx)$/i).test(args.selectedItems[0].name)) {
var file = args.model.selectedFolder + args.model.selectedItems[0];
$.ajax({
url: 'SpreadsheetHandler.ashx/ProcessRequest',
type: "GET",
dataType: "json",
data: { filePath: file },
success: function (data) {
ssDialog.option("title", args.model.selectedItems[0]);
ssDialog.open();
ssObj.refresh();
ssObj.loadFromJSON(data); // Load the JSON data to the spreadsheet
}
});
args.cancel = true;
}
}
</script>
ASPX.CS
// To read the file in file explorer
[WebMethod]
public static object FileAccess(string ActionType, string Path, string ExtensionsAllow)
{
FileExplorerOperations operation = new FileExplorerOperations();
if (ActionType == "Read")
return (operation.Read(Path, ExtensionsAllow));
else
return string.Empty;
}
ASHX
using Syncfusion.EJ.Export;
using Syncfusion.JavaScript;
using Syncfusion.JavaScript.Models;
// To process the import request.
public void ProcessRequest(HttpContext context)
{
var filePath = context.Request.QueryString[0];
ImportRequest importRequest = new ImportRequest();
Stream fileStream = File.Open(filePath, FileMode.Open, System.IO.FileAccess.Read);
importRequest.FileStream = fileStream;
importRequest.File = null;
string str = Spreadsheet.Open(importRequest);
fileStream.Close();
fileStream.Dispose();
context.Response.Write(str); // Returns the Spreadsheet data
}

