Preview PDF files before uploading with RadAsyncUpload
Environment
| Product Version | 2019.3.1023 |
| Product | RadAsyncUpload for ASP.NET AJAX |
Description
In the OnClientFileSelected and OnClientFileDropped events of RadAsyncUpload, a reference to the File can be accessed. That means we can convert it to base64 string and pass it to the PDF.js library and preview it.
Solution
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
<canvas id="the-canvas" style="border: 1px solid black"></canvas>
<script id="script">
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.worker.js';
</script>
<script>
//https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html
function previewPdfFile(file) {
var fileReader = new FileReader();
var base64;
// Onload of file read the file content
fileReader.onload = function (fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
// atob() is used to convert base64 encoded PDF to binary-like data.
// (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/
// Base64_encoding_and_decoding.)
var loadingTask = pdfjsLib.getDocument({ data: atob(base64.substring("data:application/pdf;base64,".length)) });
loadingTask.promise.then(function (pdf) {
// Fetch the first page.
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
// Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context.
var renderContext = {
canvasContext: context,
viewport: viewport,
};
page.render(renderContext);
});
});
};
// Convert data to base64
// https://stackoverflow.com/a/37699333
fileReader.readAsDataURL(file);
}
function OnClientFileSelected(sender, args) {
var file = args.get_fileInputField().files[0]
if (file.type == "application/pdf") {
previewPdfFile(file)
}
}
function OnClientFileDropped(sender, args) {
var file = args.get_file();
if (file.type == "application/pdf") {
previewPdfFile(file)
}
}
</script>
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic"
OnClientFileSelected="OnClientFileSelected" OnClientFileDropped="OnClientFileDropped">
</telerik:RadAsyncUpload>