1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to open file ( pdf excel docx) in the browser with file explorer

How to open file ( pdf excel docx) in the browser with file explorer

Hello,
I've a fil explorer with severals files and I want to open these file into my browser. Can we add a pdf viewer and and editor for excel and word directly in the file explorer ?
Best regards

18 Replies
PR Piramanayagam Ramakrishnan Syncfusion Team May 16, 2018 02:05 PM UTC

Hi Julien, 
 
We have discussed to view the pdf, excel and docx files in FileExplorer component in the below forums, please check and let us know your concerns. 
 
 
 
Regards, 
Piramanayagam R  
  


JB Julien Breton May 17, 2018 07:08 AM UTC

Ok nice but it's possible to edit these documents words or it's only preview ?

JB Julien Breton May 17, 2018 10:21 AM UTC

And how to open Powerpoint files ?
I've made this : 

public object PresentationConvertazerty(string FilePath)
        {

            string HtmlString = string.Empty;
            string path = System.Web.HttpContext.Current.Server.MapPath(FilePath);

            //var path = FilePath;

            if (path != null)
            {
                using (var mStream = new MemoryStream())
                {
                    IPresentation presentation = Presentation.Open(path);
                   
                    presentation.Save(mStream);
                    mStream.Position = 0;

                    HtmlString = new StreamReader(mStream).ReadToEnd();
                };

                HtmlString = ExtractBodyContent(HtmlString);

                foreach (var item in DecodeKeys())
                {
                    HtmlString = HtmlString.Replace(item.Key, item.Value);
                }
            }
            else HttpContext.Response.Write("Select any file to upload.");
            return Json(HtmlString);

        }

But it's show me strange caracters like conversion errors 

Thanks

PR Piramanayagam Ramakrishnan Syncfusion Team May 18, 2018 02:13 PM UTC

Hi Julien, 
 
Query1: it's possible to edit these documents words or it's only preview? 
 
Yes. You can edit the docx and excel files using RTE and Spreadsheet component import and export option. But you are unable to edit the PDF files using PDF Viewer component.  
 
Please refer to below help document and sample to know more about edit and save the document by using RTE and Spreadsheet component. 
 
 
 
Query2: And how to open Powerpoint files? 
 
The Presentation library have support to create, edit and convert(PDF/Image) the ‘.PPTX’ files and at present, we do not have a PowerPoint Viewer control in ASP.NET MVC. But we can display a PowerPoint slide in ASP.NET MVC from the below two ways.  
1.     Converting the PPTX file to PDF document and view it in our PDF Viewer control for ASP.NET MVC. 
2.     Convert the PPTX file to images and view the images in native image control. 
 
Converting the PPTX file to PDF and view it in PDF Viewer control  
We have created a sample for this and updates the sample in below link. In this sample, we have used our Presentation library to convert the PPTX file as PDF document and displayed the PDF document in our PDF Viewer control. The advantage over this approach is the text in the document will be selectable.  
 
 
Convert the PPTX file to images and view the images in native image control:  
We can convert the PowerPoint slides as images and display the images in native image control. Please find the below documentation for converting the PowerPoint slides as images.   
 
Note:  
Our Presentation library, only have support for .PPTX, .PPTM, .POTX, .POTM file formats only. The library does not have support for .PPT file format. Please find the UG documentation from the below link for more details.  
 
Please let us know further assistance on this. 
 
Regards, 
Piramanayagam R 


JB Julien Breton May 22, 2018 09:59 AM UTC

Hello,

Thanks for your answer.
Can you give me a sample for edit word documents when I open them from the file explorer ?


PR Piramanayagam Ramakrishnan Syncfusion Team May 28, 2018 04:20 AM UTC

Hi Julien, 
 
We have prepared demo sample based on your requirement (“to edit word documents when we open them from the file explorer”) and it can be downloaded from the link: Sample 
 
Please let us know further assistance on this. 
 
Regards, 
Piramanayagam R 


JB Julien Breton May 30, 2018 08:32 AM UTC

Hello,
Thanks for the sample
But when I edit a document and save then reopen the documents it's have a lot of blank space and what I wrote move in the page
Any ideas ?

SK Sujith Kumar Rajkumar Syncfusion Team May 31, 2018 03:35 PM UTC

Hi Julien Breton, 
The mentioned issue can be resolved by replacing the “<br/>” to empty string in the FileExplorer controller. 
Please refer the code block below, 
public IDictionary<string, string> DecodeKeys() 
{ 
    IDictionary<string, string> KeyValuePair = new Dictionary<string, string>() 
    { 
        {"\"", "'"},{"\r", " "},{"\n", " "},{"\r\n", " "},{"( )+", " "},{"&nbsp;", " "},{"&bull;", "*"},{"&lsaquo;", "<"}, 
        {"&rsaquo;", ">"},{"&trade;", "(tm)"},{"&copy;", "(c)"},{"&reg;", "(r)"} 
    }; 
 
    return KeyValuePair; 
} 
 

We have prepared the sample based on this, could you please check this. 

Please let us know if you require any further assistance. 
 
Regards, 
Sujith Kumar R 


JB Julien Breton June 4, 2018 10:25 AM UTC

Thanks it's solved

AB Ashokkumar Balasubramanian Syncfusion Team June 5, 2018 05:00 AM UTC

Hi Julien, 
 
Most welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


JB Julien Breton June 8, 2018 07:47 AM UTC

One more question, is it possible to lock the document when someone else open it ? If I open it , other people can't modify or open it until I close the window ?

AB Ashokkumar Balasubramanian Syncfusion Team June 11, 2018 09:49 AM UTC

Hi Julien, 
 
Yes, possible. 
 
We were able to lock the document when someone else open document by using FileExplorer beforeOpen event handler. Please check the below code block. 
 
[Script] 
 
var file,sourcePath; 
    function OnBeforeOpen(args) { 
        var viewer = $("#dialogAPI").data("ejDialog"); 
        if (args.itemType == "File" && (/\.(docx)$/i).test(this._selectedFile)) { 
            //you can get parent path using "args.model.selectedFolder" 
            //you can get selected file name using "args.model.selectedItems" 
            var file = args.model.selectedFolder + args.model.selectedItems[0]; 
            if (viewer.isOpen()) { 
                alert("Already you are viewing another file"); 
                args.cancel = true; 
                return; 
            } 
            //sending request to controller method to process pdf file and maintain count 
            $.get("/FileExplorer/GetFile", { path: file }) 
            .done(function (data) { 
                //Check if the PDF file is already opened 
                if (data.openedCount < 1) { 
                    sourcePath = data.path; 
                    file = args.model.selectedFolder + args.model.selectedItems[0]; 
                    $.ajax({ 
                        url: '@Url.Action("Importing", "FileExplorer")', 
                        type: "POST", 
                        dataType: "json", 
                        data: { FilePath: file }, 
                        success: function (data) { 
                            var rte = $("#rteSample").ejRTE("instance"); 
                            rte.setHtml(data); 
                            var dialogObj = $("#dialogAPI").ejDialog("instance"); 
                            dialogObj.option("title", args.model.selectedItems[0]); 
                            dialogObj.open(); 
                        } 
                    }); 
                } 
                else { 
                    alert("Already (" + data.path + ") file is viewing by other user"); 
                } 
            }); 
            args.cancel = true;             
        } 
    } 
 
function onDialogClose(args) { 
   $.get("/FileExplorer/CloseFile", { path: sourcePath }); 
 } 
 
[Controller] 
 
public ActionResult GetFile(string path) 
        { 
            FileExplorerOperations operation = new FileExplorerOperations(); 
            if (dictionary.ContainsKey(path) && dictionary[path] >= 0) 
            { 
                dictionary[path] = 1; 
            } 
            else 
            { 
                dictionary[path] = 0; 
            } 
            FileData result = new FileData(); 
            result.path = path; 
            result.openedCount = dictionary[path]; 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 
 
public ActionResult CloseFile(string path) 
        { 
            FileExplorerOperations operation = new FileExplorerOperations(); 
            if (dictionary.ContainsKey(path)) 
            { 
                dictionary[path] = -1; 
            } 
            return null; 
        } 
 
We have prepared a demo sample based on this requirement and you can find the sample under the following location. 
 
 
Please let us know, if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 


JB Julien Breton June 11, 2018 01:15 PM UTC

Is it possible to do the same thing with the excel file . My action is ViewInSpreadsheet and open a new window

AB Ashokkumar Balasubramanian Syncfusion Team June 12, 2018 10:38 AM UTC

Hi Julien, 
 
Yes. We have modified the provided sample in our last update to demonstrate the reported requirement “To view, edit and save the excel file from FileExplorer” and the same can be downloaded from the below sample link.  
  
  
Modified code example  
View  
 
  
@*Spreadsheet Dialog*@  
@{Html.EJ().Dialog("SpreadsheetDialog").ContentTemplate(@<div style="height: 100%;">  
        <button onclick="saveSpreadsheet()">Save</button>  
        @{Html.EJ().Spreadsheet<object>("SpredsheetViewer")  
          .ScrollSettings(setting => setting.Height(500))  
          .Render();}  
    </div>).Width(900).ShowOnInit(false).IsResponsive(true).EnableResize(true).ClientSideEvents(evt => evt.Close("onDialogClose").Resize("onResize")).Render();}  
  
//...  
  
var file, sourcePath;  
function OnBeforeOpen(args) {  
    var viewer = $("#dialogAPI").data("ejDialog"), ssDialog = $("#SpreadsheetDialog").data("ejDialog");  
    if (args.itemType == "File" && (/\.(docx|xls|xlsx)$/i).test(this._selectedFile)) {  
        file = args.model.selectedFolder + args.model.selectedItems[0];  
        if (viewer.isOpen() || ssDialog.isOpen()) {  
            alert("Already you are viewing another file");  
            args.cancel = true;  
            return;  
        }  
  
        $.get("/FileExplorer/GetFile", { path: file })  
        .done(function (data) {  
            if (data.openedCount < 1) {  
                sourcePath = data.path;  
                file = args.model.selectedFolder + args.model.selectedItems[0];  
                if ((/\.(docx)$/i).test(sourcePath)) {  
                  //...  
                }  
                else {  
                    $.ajax({  
                        url: '@Url.Action("ViewInSpreadsheet", "FileExplorer")',  
                        type: "POST",  
                        dataType: "json",  
                        data: { filePath: file },  
                        success: function (data) {  
                            var ssObj = $("#SpredsheetViewer").data("ejSpreadsheet");  
                            ssDialog.option("title", args.model.selectedItems[0]);  
                            ssDialog.open();  
                            ssObj.loadFromJSON(data);  
                        }  
                    });  
                }  
            }  
            else {  
                alert("Already (" + data.path + ") file is viewing by other user");  
            }  
        });  
        args.cancel = true;  
    }  
}  
  
function saveSpreadsheet() {  
    var ssObj = $("#SpredsheetViewer").data("ejSpreadsheet"),  
    filePath = file, exportProps = ssObj.XLExport.getExportProps();  
  
    $.ajax({  
        type: "POST",  
        data: { sheetModel: exportProps.model, sheetData: exportProps.data, filePath: filePath },  
        url: '@Url.Action("ExcelExportOnBtnClick", "FileExplorer")',  
        success: function (message) {  
            alert(message);  
        }  
    });  
  
}  
  
function onResize(args) {  
    $("#SpredsheetViewer").ejSpreadsheet("refreshSpreadsheet");  
}  
  
  
Controller  
  
[AcceptVerbs(HttpVerbs.Post)]  
public ActionResult ViewInSpreadsheet(string filePath)  
{  
    string path = Server.MapPath(filePath);  
    var fileStream = System.IO.File.Open(path, FileMode.Open, FileAccess.Read);  
    ImportRequest importRequest = new ImportRequest();  
    importRequest.FileStream = fileStream;  
    var spreadsheetData = Spreadsheet.Open(importRequest);  
    fileStream.Close();  
    return Content(spreadsheetData);  
}  
  
[AcceptVerbs(HttpVerbs.Post)]  
public ActionResult ExcelExportOnBtnClick(string sheetModel, string sheetData, string filePath)  
{  
    try  
    {  
        Stream fileStream = Spreadsheet.Save(sheetModel, sheetData, ExportFormat.XLSX, ExcelVersion.Excel2013);  
        filePath = Server.MapPath(filePath);  
  
        ExcelEngine excelEngine = new ExcelEngine();  
        IApplication application = excelEngine.Excel;  
        fileStream.Position = 0;  
        IWorkbook workbook = application.Workbooks.Open(fileStream);  
        workbook.SaveAs(filePath);  
        return Content("Success");  
    }  
    catch (Exception ex)  
    {  
        return Content(ex.Message);  
    }  
}  
  
  
Could you please check the above sample and get back to us if you need further assistance?  
 
Regards, 
Ashokkumar B. 


JB Julien Breton June 12, 2018 01:00 PM UTC

Hello,

Thanks the control works but now I can't save excel 
This error appear in the console when I click on a cell on Excel and if I write something and click save, the save don't work

Thanks a lot 

(Image in the Zip)




Attachment: ErrorSyncfusion_f08840da.rar

VK Vinoth Kumar Sundara Moorthy Syncfusion Team June 14, 2018 12:53 AM UTC

Hi Julien, 

Thanks for your update. 

We have checked your reported issue (“Can’t save back the loaded excel & script error throws on cell editing”) with the last provided sample and it’s working fine in our end without script errors. For your convenience, we have prepared a sample & video to demonstrate this and the same can be downloaded from the below link, 

 
 
Could you please check the above sample and get back to us with below information to replicate this issue in our end if possible please provide issue reproducible sample so that we can analyze based on that and provide you a better solution?  The information provided would be great help for us to resolve this issue. 

1. Could you please share the excel file that you have faced this issue while save back from Spreadsheet or please share the details about that file such as what features are used in that, no of rows & columns, more information about its sheet content to replicate this issue in our end? 

2. Could you please explain in which scenario do you faced that script error while on cell save such as used cell value? Do you face any error message while save back spreadsheet using ‘save’ button click? 

3. Please confirm that you are currently using Essential Studio product version ‘16.1.0.24’. If not, please share your current product version. 

4. Please share the Spreadsheet rendering code snippet or the details if you did any customization. 

Regards, 
Silambarasan 


JB Julien Breton June 14, 2018 08:20 AM UTC

Hello it's work a little bit better but i need to re-open the file two time like in the videos

Many thanks for help

Attachment: FileExplorer_1cb3c6dc.rar

VK Vinoth Kumar Sundara Moorthy Syncfusion Team June 15, 2018 03:08 PM UTC

 
Thank you for your update. 
 
Based on the provided files, we have checked the reported issue in ‘v16.1.0.24’ and we cannot able to reproduce it in our end. Please check the below sample video. 
 
 
Before we proceed further, please provide the below information. 
 
1.       Could you please specify your machine details and its resolution? 
2.       Could you please specify the browser details in which you’re getting issue? 
3.       Could you please check the browser console and share us if you’re getting any errors? 
4.       Please confirm that you are currently using Essential Studio product version ‘16.1.0.24’. If not, please share your current product version. 
 
Could you please get back to us with below information to replicate this issue in our end so that we can analyze based on that and provide you a better solution?  The information provided would be great help for us to resolve this issue. 
 
Regards, 
Vinoth Kumar S 


Loader.
Up arrow icon