Upload PDF File and Load it in PDFViewer

Environment

Product	Telerik UI for ASP.NET Core Upload and Telerik UI for ASP.NET Core PDFViewer
Progress Telerik UI for ASP.NET Core version	Created with the 2023.2.718 version

Description

How can I upload a PDF file by using the Telerik UI for ASP.NET Core Upload and display the uploaded file into the Telerik UI for ASP.NET Core PDFViewer?

Solution

1. Define an Upload component in asynchronous mode.
2. Define a PDFViewer component and hide it with CSS.
3. Subscribe to the Success event to access the file information when it is uploaded successfully.
4. Within the handler, get the name of the uploaded PDF file from the event data, get a reference to the PDFViewer, and call the fromFile() to load the file that is uploaded on the server.
5. Call the jQuery show() method to show the hidden PDFViewer.

  <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" style="display: none;">
    @(Html.Kendo().PDFViewer()
        .Name("pdfviewer")
    )
  </div>

  @addTagHelper *, Kendo.Mvc

  <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>

   <kendo-upload name="files" multiple="false" on-success="onSuccess">
      <async auto-upload="true" save-url="@Url.Action("Async_Save", "Home")" remove-url="@Url.Action("Async_Remove", "Home")" />
    </kendo-upload>

  <div class="pdf-viewer-container" style="display: none;">
    <kendo-pdfviewer name="pdfviewer">
    </kendo-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;
              $(".pdf-viewer-container").show();
              viewer.fromFile(filePath);
          }
      }
  </script> 

  using System.Net.Http.Headers;

  public async Task<ActionResult> Async_Save(IFormFile files)
  {
    var fileContent = ContentDispositionHeaderValue.Parse(files.ContentDisposition);
    var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
    var physicalPath = Path.Combine("wwwroot/uploadedFiles", fileName);

    using (var fileStream = new FileStream(physicalPath, FileMode.Create))
    {
        await files.CopyToAsync(fileStream);
    }

    // Return an empty string to signify success.
    return Content("");
  }

  public ActionResult Async_Remove(string fileNames)
  {
      if (fileNames != null)
      {
        var fileName = Path.GetFileName(fileNames);
        var physicalPath = Path.Combine("wwwroot/uploadedFiles", fileName);
        // TODO: Verify user permissions.
        if (System.IO.File.Exists(physicalPath))
        {
            System.IO.File.Delete(physicalPath);
        }
      }
      // Return an empty string to signify success.
      return Content("");
  }

More ASP.NET Core Upload Resources

• ASP.NET Core Upload Documentation

• ASP.NET Core Upload Demos

• ASP.NET Core Upload Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Upload for ASP.NET Core
• Server-Side API Reference of the Upload for ASP.NET Core
• Server-Side TagHelper API Reference of the Upload for ASP.NET Core
• Client-Side API Reference of the PDFViewer for ASP.NET Core
• Server-Side API Reference of the PDFViewer for ASP.NET Core
• Server-Side TagHelper API Reference of the PDFViewer for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base