Upload and preview word(.docx or .doc) OR pdf files

Question

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 control I have only accepts pdf format, but I want it to accept both pdf or word

Here is the one I have which accepts pdf file format

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

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

Answer 1

Hi @Donald Symmons ,
As far as I think, PDF.js is community-driven and supported by Mozilla. And the goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs. If you want to preview word, I suggest you could use OpenXml to open the word document. They are different.

Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for