Upload and preview word (.docx or .doc) and PDF file using jQuery

RichardSa
 
on May 26, 2022 11:13 PM
Sample_135674.zip
1753 Views

I have a canvas on my web form which displays a file in .pdf format when the file is uploaded to the page and will be inserted into the database.

My question is, is it possible to upload and preview files in word (.docx, or .doc) format or pdf format on the same control inside web form?

The one I have only accepts pdf format, but I want it to accept both pdf and word formats.

HTML

<div class="form-horizontal">
    <div class="containr-fluid">
        <asp:FileUpload runat="server" ID="showPreviewBill" />
        <br />
    </div>
    <div class="container-fluid shadow-sm p-3 mb5 bg-white rounded" id="card" style="font-family: 'Roboto', sans-serif; width: 100%; margin: 0 auto; border: 1px solid #e4e7e8;">
        <div class="contentt" style="width: 100%;">
            <canvas id="the-canvas" style="border: 1px solid grey;"></canvas>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
    $(function () {
        $("#showPreviewBill").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    showInCanvas(e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
 
        function convertDataURIToBinary(dataURI) {
            var BASE64_MARKER = ';base64,';
            var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
            var base64 = dataURI.substring(base64Index);
            var raw = window.atob(base64);
            var rawLength = raw.length;
            var array = new Uint8Array(new ArrayBuffer(rawLength));
 
            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i);
            }
            return array;
        }
 
        function showInCanvas(url) {
            'use strict';
            var pdfAsArray = convertDataURIToBinary(url);
            pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }
    });
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 27, 2022 02:21 AM

Hi RichardSa,

Refer below example.

HTML

<div>
    <div class="form-horizontal">
        <div class="containr-fluid">
            <asp:FileUpload runat="server" ID="showPreviewBill" />
            <br />
        </div>
        <div class="container-fluid shadow-sm p-3 mb5 bg-white rounded" id="card" style="font-family: 'Roboto', sans-serif; width: 100%; margin: 0 auto; border: 1px solid #e4e7e8;">
            <div class="contentt" style="width: 100%;">
                <canvas id="the-canvas" style="border: 1px solid grey; display: none;"></canvas>
                <div id="docPreview" style="display: none;"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.18/mammoth.browser.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js"></script>
<script type="text/javascript" src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script type="text/javascript">
    $(function () {
        $("#showPreviewBill").change(function (e) {
            if (this.files && this.files[0]) {
                if (this.files[0].name.split('.').pop().toUpperCase() == "DOCX" || this.files[0].name.split('.').pop().toUpperCase() == "DOC") {
                    parseWordDocxFile(e.target.files, '#docPreview');
                }
                if (this.files[0].name.split('.').pop() == "pdf") {
                    $('#the-canvas').show();
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        showInCanvas(e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            }
        });

        function convertDataURIToBinary(dataURI) {
            var BASE64_MARKER = ';base64,';
            var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
            var base64 = dataURI.substring(base64Index);
            var raw = window.atob(base64);
            var rawLength = raw.length;
            var array = new Uint8Array(new ArrayBuffer(rawLength));

            for (i = 0; i < rawLength; i++) {
                array[i] = raw.charCodeAt(i);
            }
            return array;
        }

        function showInCanvas(url) {
            'use strict';
            var pdfAsArray = convertDataURIToBinary(url);
            pdfjsLib.getDocument(pdfAsArray).then(function (pdf) {
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            });
        }

        function parseWordDocxFile(inputElement, showDiv) {
            var files = inputElement || [];
            if (!files.length) {
                return
            };
            var file = files[0];
            var reader = new FileReader();
            reader.onloadend = function (event) {
                var arrayBuffer = reader.result;
                mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        $(showDiv).html(resultObject.value).show();
                    });

                mammoth.extractRawText({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        result2.innerHTML = resultObject.value;
                    });

                mammoth.convertToMarkdown({ arrayBuffer: arrayBuffer })
                    .then(function (resultObject) {
                        result3.innerHTML = resultObject.value;
                    });
            };
            reader.readAsArrayBuffer(file);
        }
    });
</script>

Screenshot

Reference: Preview word document