Opening files in File Manager

Question

Hi,If a user right-clicks over a file in File Manager, one of the context menu options available is to "open" said file. However, on all files it seems like the "open" function doesn't seem to do anything? What is the intended purpose of this option?Also, speaking of opening files, is it feasible to open files in File Manager? Given the requirement of when a user double clicks on a file, it will open said file on another browser tab. For instance, uploaded PDF and HTML files can be opened on another browser tab to be viewed by the user. For other files that can't be viewed on the browser, the option of downloading said files will instead be triggered. If proved to be feasible, can you provide some sample code where this requirement is fully displayed?Thanks!

Sowmiya Padmanaban · Answer

Hi DenZel, Greetings from Syncfusion support. Based on your shared details, we identified that your requirement is to open the files (PDF, Docx) in the FileManager component. Currently, we don’t have in-built support to open the files in FileManager. Query - one of the context menu options available is to "open" said file. However, on all files it seems like the "open" function doesn't seem to do anything? What is the intended purpose of this option Open is the default option of context menu on right clicking over any type of files in FileManager, we can write any custom functionality using context menu click event using which we can open PDF file using Syncfusion PDF Viewer, and HTML file in Document Editor. By default, we can be able to see the image preview in File Manager by clicking on open in context menu. Please, refer the below link for corresponding component. PDF Viewer: https://blazor.syncfusion.com/demos/pdf-viewer/default-functionalities?theme=bootstrap4 https://blazor.syncfusion.com/documentation/pdfviewer/opening-pdf-file/ Document Editor https://blazor.syncfusion.com/documentation/document-editor/opening-a-document/ https://blazor.syncfusion.com/demos/document-editor/default-functionalities As per your requirement, we have prepared a simple sample to preview PDF files on double click, you can use the PDF Viewer component. Refer to the below code snippets.

@code { SfFileManager file; public string DocumentPath { get; set; } SfPdfViewerServer PdfViewer; SfDialog dialog; public void fileOpen(Syncfusion.Blazor.FileManager.FileOpenEventArgs args) { if ((args.FileDetails.IsFile == true) && args.FileDetails.Type == ".pdf") { dialog.Show(); DocumentPath = "wwwroot/Files" + args.FileDetails.FilterPath + args.FileDetails.Name; } } } Please check whether the below sample meet your requirement. https://www.syncfusion.com/downloads/support/forum/166666/ze/BlazorSample493891670.zip Please let us know if you need any further assistance. Regards, Sowmiya.P

Roy Sunga · Answer

Hi Sowmiya,Thank you for the response.As much as possible we wanted to open the files on another browser tab, not on the same page as the File Manager component using a PDF viewer or the Document Editor. However, I think this is a good reference to have if our client wants to go on that route. But what we wanted for now, is to open a file normally on the browser if the file can be opened to the browser, for example a PDF file, or an HTML file.You've mentioned that it doesn't have the capability to open the files, but you have provided the custom code to handle the file open event. Can you provide a sample code that we can substitute in that fileOpen method where if we open a PDF/HTML file, it will be displayed on the browser. And if the file can't be opened in a browser, it will download the file instead?Thanks!

Sowmiya Padmanaban · Answer

Hi DenZel, As per our update, we have found that your requirement is to open the files in new browser or download the files on double click. You can download the files using DownloadFilesAsync method by passing file name as a argument of that method. Please, refer the below code snippet.

@code { SfFileManager file; public async Task fileOpen(Syncfusion.Blazor.FileManager.FileOpenEventArgs args) { if ((args.FileDetails.IsFile == true)) { string[] fileName = { args.FileDetails.Name }; await file.DownloadFilesAsync(fileName); } } } Please, refer the sample link. https://www.syncfusion.com/downloads/support/forum/166666/ze/BlazorSample548348090.zip If the above solution does not meet your requirement. Please, let us know the details to proceed further with you requirement. Please let us know, if you need any further assistance. Regards, Sowmiya.P

Wilson · Answer

Hi, sorry to interrupt this thread.

The "fileOpen" is not working in the sample ending 1670. It will hit the function when a folder is onclicked however, "open" in the context menu will not trigger the "fileOpen" function.

Indhumathy Loganathan · Answer

Hi Wilson,

We have validated your reported query. The OnFileOpen event doesn’t trigger for the Context Menu. We understand that you want to open the PDF files while clicking Context Menu “Open” option. In File Manager, we have OnMenuClick event, you can use this event to open the PDF files. Refer to the below code snippet.

<FileManagerAjaxSettings Url="/api/FileManager/FileOperations"

UploadUrl="/api/FileManager/Upload"

DownloadUrl="/api/FileManager/Download"

GetImageUrl="/api/FileManager/GetImage">

</FileManagerAjaxSettings>

</SfFileManager>

...

public void menuClick(MenuClickEventArgs<FileManagerDirectoryContent> args)

{

if (args.Item.Text == "Open" && (args.FileDetails[0].IsFile == true) && args.FileDetails[0].Type == ".pdf")

{

dialog.Show();

DocumentPath = "wwwroot/Files" + args.FileDetails[0].FilterPath + args.FileDetails[0].Name;

}

You can find the sample demonstrating the solution from below link.

https://www.syncfusion.com/downloads/support/forum/166666/ze/BlazorSample-1733115447

Please let us know if you need any further assistance.

Regards,

Indhumathy L

Satadal Chatterjee · Answer

How can this be implemented for angular File manager control ?

Jafar Ali Shahulhameed · Answer

Hi Satadal,We can understand that you are trying to open the PDF files in the File Manager component in Angular platform. We have achieved your requirement by using fileOpen, menuClick events and getFileStream method. We have created a sample aligning with your requirement. Kindly refer the code changes below, [app.component.html]

[app.component.ts] public onFileOpen(args: any) { if ((args.fileDetails.isFile == true) && args.fileDetails.type == ".pdf") { this.dialogObj.show(); this.filePath = args.fileDetails.filterPath.replace(/\/g, "/") + args.fileDetails.name; this.getFileStream(this.filePath) } } public menuClick(args: any) { if (args.item.text == "Open" && (args.fileDetails[0].isFile == true) && args.fileDetails[0].type == ".pdf") { this.dialogObj.show(); this.filePath = args.fileDetails.filterPath.replace(/\/g, "/") + args.fileDetails.name; this.getFileStream(this.filePath) } } getFileStream(filePath: string) { let ajax: XMLHttpRequest = new XMLHttpRequest(); ajax.open("POST", this.hostUrl + "api/FileManager/GetDocument", true); ajax.setRequestHeader("content-type", "application/json"); ajax.onreadystatechange = () => { if (ajax.readyState === 4) { if (ajax.status === 200 || ajax.status === 304) { var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0]; pdfviewer.load(ajax.responseText, null); } } }; ajax.send(JSON.stringify({ "FileName": filePath, "Action": ("LoadPDF") })); } You need to write the corresponding server side in operation on opening the files in server side. [Route("GetDocument")] public string GetDocument([FromBody] CustomParams param) { string path = this.basePath + "\wwwroot\Files" + (param.FileName).Replace("/", "\"); //for PDF Files var docBytes = System.IO.File.ReadAllBytes(path); //we can convert the document stream to bytes then convert to base64 string docBase64 = "data:application/pdf;base64," + Convert.ToBase64String(docBytes); return (docBase64); } Service provider documentation link: https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider#aspnet-core-file-system-provider We have also attached the sample for your reference.Check out the shared details and get back to us if you need further assistance.Regards,JafarAttachment: FileManager_Sample_710a75f.zip