ASP.net core pdf viewer

[Anjali]

Hello,

I am letting users to upload a pdf file on the browser. Once the user upload the file, I want to give them the option to view the uploaded file. In order to upload the file, I am using ASP.NET Core Upload Asynchronous Upload control and it works fine, but I am not sure how can I have the user view the pdf file as soon as it uploads. The files exists on server. Below is my entire code:

 

@using Kendo.Mvc.UI
<div style="margin-top:60px">
    <div>
        <span style="font-size:20px; font-weight:bold">Upload File</span>

    </div>
    <br />  <br />  
        <div class="block-section">
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Async_Save", "Block")
                .Remove("Async_Remove", "Block")
                .AutoUpload(true)
            )
        )
    </div>

below is my controller code:

 public async Task<IActionResult> Async_Save(IEnumerable<IFormFile> files)
        {


            foreach (var file in files)
            {
                var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);


                var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
                var physicalPath = Path.Combine(_webHostEnvironment.WebRootPath, "UploadedFiles", fileName);
                using (var fileStream = new FileStream(physicalPath, FileMode.Create))
                {
                    await file.CopyToAsync(fileStream);
                }

               
            }
            return Content("");
        }

The file that is uploaded by the user using the above control, I want the user to see that file. I know Telerik has pdfViewer, but I am not sure how the pdfViewer can show the file that exists on the server. The files is uploaded and saved on a folder in wwwRoot. i dont know the name of the file. Below is what I am trying to use:

 

 <div>
        @(Html.Kendo().PDFViewer().Name("pdfviewer")
            .PdfjsProcessing(pdf => pdf.File(Url.Content("~/wwwroot/UploadedFiles/2020-0598857.pdf")))
            .Height(1200)
            )

    </div>

but I  dont have the file name. User can name the file and upload it and I want the user to preview the file.

[Mihaela]

Hello Nitu,

Since you have submitted the same query as a support ticket, and I have already answered you in the support thread, I will post the same answer here in case someone else has the same question:

• Handle the Success event of the Upload that triggers when the upload or the remove operationvis successfully completed. You can access the name of the uploaded/removed file through the event data.
• Get a reference to the defined PDFViewer and pass the file path to the fromFile() method.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>

@(Html.Kendo().Upload()
    .Name("files")
    .Multiple(false)
    .Async(a => a
        .Save("Async_Save", "Home")
        .Remove("Async_Remove", "Home")
        .AutoUpload(true)
    )
    .Events(e => e.Success("onSuccess"))
)

<div class="pdf-viewer-container">
    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
  )
</div>

<script>
    function onSuccess(e) {
        if (e.operation == "upload") {
            var viewer = $("#pdfviewer").data("kendoPDFViewer");
            var appRootDirectory = "@Url.Content("~")";
            var filePath = appRootDirectory + '/UploadedFiles/' + e.files[0].name;
            viewer.fromFile(filePath);
        }
    }
</script>

I hope this example will be helpful to your scenario.

 

Regards,
Mihaela
Progress Telerik