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

Define an Upload component in asynchronous mode.
Define a PDFViewer component and hide it with CSS.
Subscribe to the Success event to access the file information when it is uploaded successfully.
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.
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("");
    }

Upload PDF File and Load it in PDFViewer

Environment

Description

Solution

More ASP.NET MVC Upload Resources

See Also

Getting Started

Support Resources

Community