Upload PDF File and Load it in PDFViewer

Environment

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

Description

How can I upload a PDF file by using the Telerik UI for ASP.NET MVC Upload and display the uploaded file into the Telerik UI for ASP.NET MVC 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>

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

    public ActionResult Async_Save(HttpPostedFileBase files)
    {
        if (files != null)
        {
            var fileName = Path.GetFileName(files.FileName.Trim('"'));
            var physicalPath = Path.Combine(Server.MapPath("~/wwwroot/uploadedFiles"), fileName);
            file.SaveAs(physicalPath);
        }

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

    public ActionResult RemoveFile(string fileNames)
    {
        // The parameter of the Remove action must be called "fileNames"
        if (fileNames != null)
        {
            var fileName = Path.GetFileName(fileNames);
            var physicalPath = Path.Combine(Server.MapPath("~/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 MVC Upload Resources

• ASP.NET MVC Upload Documentation

• ASP.NET MVC Upload Demos

• ASP.NET MVC Upload Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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