Upload PDF and display on same page

Question

I have very limited knowledge of HTML/JS. I have a requirnemt to Upload a File make some modifications and display file on same page.

My Code looks something like this.

<form class="form-inline" method="POST" enctype="multipart/form-data" action="getFilledPdf">
    <div class="form-group">
    <input type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="pdfFile">
    </div>
    <input type="submit" class="btn btn-primary active" value="Upload Pdf">
</form>

<div class="row" style="height: 450px;">
    <object data="getFilledPdfFromResource" type="application/pdf" width="700" height="450" id="filledPdfContentArea"/>
</div>

My Form submit seems to be working and displays proper processed file but navigates to new page, but I need to be on same page and display pdf in tag.

My Server also returns byte[], so the response works for tag I have verified. I just need a way to link two functionalities upload and display in tag.

Can some one help me with this.

Answer 1

I think this should help with displaying the file on the page

    <form class="form-inline" method="POST" enctype="multipart/form-data" action="getFilledPdf">
        <div class="form-group">
        <input type="file" class="form-control" id="pdfile" placeholder="file" accept="application/pdf" name="pdfFile">
        </div>
        <input type="submit" class="btn btn-primary active" value="Upload Pdf">
    </form>

<div class="row" style="height: 450px;">
    <object data="getFilledPdfFromResource" type="application/pdf" width="700" height="450" id="filledPdfContentArea"/>
</div>

window.addEventListener('load', function() {
                document.querySelector('input[type="file"]').addEventListener('change', function() {
                if (this.files && this.files[0]) {
                var object= document.querySelector('object'); // $('object')[0]
                object.src = URL.createObjectURL(this.files[0]); // set src to file url
                }
            });
        });