Why isn't pdf.js rendering not working and opening the model?

Question

So basicly, i have this webapp where it is supposed to take a user inputted PDF, embed it and allow the user to select text from the embedded pdf and log it to the console. However, the first part of this task, isn't really working for me.

Does anyone know how i can get the modal to load, and check if the pdf is rendering correctly from the user input?

What i tried so far is checking the consoles for any errors, and so far none came, and i tried to see if there was anything interfering with my code on opening the model and rendering the pdf but i didn't really find anything.

Here is my base templated code:

{% extends 'base.html' %}

{% block title %}Get Started{% endblock %}

{% block content %}
<style>
    #get-started-page {
        text-align: center;
        margin-top: 50px; /* Add margin-top for space */
    }
    .get-started-card {
        margin: auto;
        margin-bottom: 50px;
        padding: 20px;
        text-align: left; /* Align text to the left */
    }
    .get-started-btn {
        margin-top: 10px; /* Add margin-top for space below the input */
    }
    .modal-body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90vh; /* Adjust the height of the modal body */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds the modal height */
    }

    #fullPdfContent {
        width: 100%; 
        min-height: 100%;
        border: 1px solid #ddd; 
        padding: 10px; 
    }
</style>

<section id="get-started-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card bg-dark text-white transparent-card get-started-card">
                    <div class="card-body">
                        <h2 class="text-center mb-4">Get Started with IntelliQuest</h2>
                        <div class="mb-3 centerrrrr">
                            <label class="form-label">Upload PDF</label>
                            <div>
                                <input type="file" accept=".pdf" id="pdfInput" />
                            </div>
                            <button type="button" class="btn btn-primary get-started-btn" id="uploadButton">Upload PDF</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Bootstrap Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pdfModalLabel">Full-size PDF</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <canvas id="the-canvas"></canvas>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.js" integrity="sha512-dfMpvQclalfL7nRtHdy4+U2GLYb2XJJOgGLgKibrbcbarI/ZLgCAaBCS6+AuWN0OtLn/zFpu+Cggd8TCBYx9Ag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    // Function to handle PDF upload
    function handleUpload() {
        var fileInput = document.getElementById('pdfInput');
        var uploadButton = document.getElementById('uploadButton');

        uploadButton.addEventListener('click', function () {
            var file = fileInput.files[0];

            if (file) {
                // Create a URL for the uploaded file
                var pdfUrl = URL.createObjectURL(file);

                // Call the function to load the PDF with the new URL
                loadPdf(pdfUrl);
            } else {
                alert('Please select a PDF file for upload.');
            }
        });
    }

    // Function to load PDF with the specified URL and open the modal
    function loadPdf(url) {
        pdfjsLib.getDocument(url)
            .then(function (pdf) {
                return pdf.getPage(1);
            })
            .then(function (page) {
                // Set scale (zoom) level
                var scale = 1.5;

                // Get viewport (dimensions)
                var viewport = page.getViewport({ scale: scale });

                // Get canvas#the-canvas
                var canvas = document.getElementById('the-canvas');

                // Fetch canvas' 2d context
                var context = canvas.getContext('2d');

                // Set dimensions to Canvas
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Prepare object needed by render method
                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                // Render PDF page
                page.render(renderContext);

                // Open the modal
                var pdfModal = new bootstrap.Modal(document.getElementById('pdfModal'));
                pdfModal.show();
            });
    }

    // Call the handleUpload function to set up the event listener
    handleUpload();
</script>

{% endblock %}

Full Code: https://paste.pythondiscord.com/7MSQ

If anyone is interested, could i also get help on how to log the user selected text from the pdf that is being embedded, because i tried searching and found a similar stack post to my 2nd problem, but i don't really understand it.