1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Pdf preview in filemanager

Pdf preview in filemanager

Hi,

I have two questions:

1. How can to add a preview functionality for pdf files?
2. I have added a custom button and I would like to show the path and name of the selected file when I click on the custom button.

Thanks

6 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team July 14, 2020 02:57 PM UTC

Hi Dawo,  
 
Greetings from Syncfusion support. 
 
Query 1- Preview the files on FileManager component. 
 
We have checked your requirement with FileManager component. We have only provided option to preview image type files in FileManager component. We can open and preview the files in PDF viewer component. Currently, we are preparing a sample to meet your requirement. We will update the sample within two business days on 16th July 2020. 
 
Query 2- I have added a custom button and I would like to show the path and name of the selected file when I click on the custom button. 
 
You have add the custom button using ToolbarSettings of FileManager component. Refer the below document link. 
 
 
We can fetch the path and selected file details in ToolbarClick event. Refer the below code snippet. 
 
function toolbarClick(args) { 
        if (args.item.text == "Custom") { 
            // Get the selected Files details. 
            var selectedFiles = fileManager.getSelectedFiles()[0]; 
            // Get the path of FileManager component. 
            var path = selectedFiles.filterPath + selectedFiles.name; 
        } 
    } 
 
To know more about the FileManager component, refer the below link. 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


SP Sowmiya Padmanaban Syncfusion Team July 16, 2020 04:45 PM UTC

Hi Dawo,  
  
Thanks for the patience. 
  
As promised, we have prepared a sample for preview the PDF files in PDF Viewer component. Refer the below sample link. 
  
  
Please let us know, if you need any further assistance. 
  
Regards,  
Sowmiya.P 
  


DA Dawo July 17, 2020 02:36 AM UTC

Hi Sowmiya,

Thanks for the help.

I added your code in my project but I getting this message:


<div class="control-section">
        @Html.EJS().FileManager("filemanager").CssClass("myfilemanger").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings
   {
       Url = "FileOperations",
       GetImageUrl = "GetImage",
       UploadUrl = "Upload",
       DownloadUrl = "Download"
   }).ToolbarSettings(new FileManagerToolbarSettings()
   {
       Items = items
   }).ContextMenuSettings(new FileManagerContextMenuSettings()
   {
       File = files,
       Folder = folder,
       Layout = layout
   }).NavigationPaneSettings(ls => ls.Visible(false)).Path("/" + ViewBag.Code).ToolbarClick("toolbarClick").ToolbarCreate("onCreate").View(Syncfusion.EJ2.FileManager.ViewType.Details).FileOpen("fileOpened").Render()
        <!-- end of filemanager element -->
    </div>
    <script>
        function fileOpened(args) {
            var fileManager = document.getElementById("filemanager").ej2_instances[0];
            if (args.fileDetails.isFile) {
                var path = (fileManager.path + args.fileDetails.name);

                var jsonData = new Object();
                jsonData["documentName"] = path;

                $.ajax({
                    url: '/FileManager/GetDocument',
                    type: 'POST',
                    dataType: 'text',
                    crossDomain: true,
                    traditional: true,
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(jsonData),
                    success: function (data) {
                        //Open Window in new tab
                        if ((/\.(pdf)$/i).test(args.fileDetails.name)) {
                            var ws = window.open("", '_blank', "width=800,height=600,location=no,menubar=no,status=no,titilebar=no,resizable=no")
                            //Adding script and CSS files
                            ws.document.write('<!DOCTYPE html><html><head><title>PdfViewer</title><link rel='nofollow' href = "https://cdn.syncfusion.com/ej2/18.2.45/material.css" rel = "stylesheet"><script src="https://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"><\/script><script src="https://cdn.syncfusion.com/ej2/18.2.45/dist/ej2.min.js"><\/script><\/head><body>');
                            //Div to render PDF Viewer
                            ws.document.write('<div style="width:100%;min-height:570px"><div id="PdfViewer"></div><\/div>')
                            //Initializes the PDF Viewer
                            ws.document.write("<script> var pdfviewer = new ej.pdfviewer.PdfViewer({documentPath:'" + data + "',serviceUrl: '/FileManager'});pdfviewer.appendTo('#PdfViewer');<\/script>")
                            ws.document.write('<\/body><\/html>');
                            ws.document.close();
                        }
                    },
                    error: function (msg, textStatus, errorThrown) {
                        alert('Exception' + msg.responseText);
                    }
                });
            }
        }

Regards,

SP Sowmiya Padmanaban Syncfusion Team July 17, 2020 04:52 PM UTC

Hi Dawo,  
   
Based on the provided details we found that the serviceUrl property of the PDF Viewer is not provided. So kindly include the PDF Viewer code in you project and map the same properly.  
 
Our PDF Viewer control is both server and the client side oriented. PDF viewer control processes the PDF document in the server side(developed with .NET environment) and send the processed PDF data to the client using the Web service to render the PDF document and for further operations in PDF viewer.   
 
Ensure the below case in your application. 
 
1.     Server side code for above shared application [Home.controlle.cs] is added in your application. 
2.     Ensure the same version used for both client and server side. [CDN version and NuGet package version] 
3.     If possible, replicate the issue in attached sample and share it to us. 
 
 
Please let us know, if you need any further assistance. 
 
   
Regards,  
Sowmiya.P 


DA Dawo June 2, 2021 02:47 AM UTC

Hi team,

One week ago I began to receive the message below


I have the following implementation:


Thanks,


VS Vasugi Sivajothi Syncfusion Team June 3, 2021 12:43 PM UTC

Hi Dawo, 
 
We suspect that reported issue is due to the write access permission is denied in the environment. We will create the pdfium.dll based on the operating system during the runtime of the control. So, can you please try copying the below provided x64 and x86 folder and paste inside the folder into your project to resolve the issue or enable the write permission for that folder?     
 
 
Note: 
·       Kindly use both the client and server-side of the same version in your project  
·       Ensure whether the Pdfium dll will be created in your project during runtime. Else we can also place the pdfium assemblies in any of the production environment locations and refer to the path by using the ReferencePath API.  
 
 
For example:  
   
If the Pdfium assembly is available in this path C:\Pdfium\x64 or D:\Pdfium\x86, the reference path should be PdfRenderer.ReferencePath = "C:/";  
   
The parent folder has to be provided as the path in the ReferencePath API.  
   
Note: Provide this path in the Load method of the PDFViewerController.cs  
  
PdfRenderer PdfRenderer = new PdfRenderer();  
 PdfRenderer.ReferencePath = @"C:/";  
  
 
Kindly try this and revert to us with more details, if you still have concerns about this. Meantime, if you face any console error, could you please share the details about the console error and load request response details in the network tab. This will be helpful to investigate further and provide the solution at the earliest. 
 
 
Regards, 
Vasugi 


Marked as answer
Loader.
Up arrow icon