JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"></script>
<script>
let scaleSlider = null;
let scaleValue = null;
let canvas = null;
let context = null;
let image = null;
const reader = new FileReader();
let fixFileObject = null;
let scale = null;
let messageArea = null;
let pdfFlag = false;
const pdfImageExtention = "png";
const csrf_token_name = "{$csrf_token_name}";
let csrf_hash = "{$csrf_hash}";

document.addEventListener("DOMContentLoaded", function() {
    canvas = document.getElementById("thumbnail");
    context = canvas.getContext("2d");

    scaleSlider = document.getElementById("scale");
    scaleValue = document.getElementById("scale-value");

    messageArea = document.getElementById("message")

    scaleSlider.addEventListener("change", changeScale);

    setFileEventListenner();
});

function changeScale() {
    scaleValue.value = scaleSlider.value;
    drawCanvas();
}

function setFileEventListenner() {
    document.getElementById("file-selecter").addEventListener("change", createPreview);
}

function createPreview(event) {

    fixFileObject = null;

    let fileObject = event.target.files[0];

    if (typeof fileObject === "undefined") {
        return;
    }

    if (fileObject.type.match(/^(image\/jpeg|image\/png|application\/pdf)$/) === null) {
        // jpegとpngとpdf以外の場合はクリアして終了
        let fileArea = document.getElementById("file-input");
        fileArea.innerHTML = fileArea.innerHTML;
        setFileEventListenner();
        return;
    }

    pdfFlag = fileObject.type.match(/^application\/pdf$/) !== null;

    fixFileObject = fileObject;

    image = new Image();

    reader.onload = function(event) {
        if ( ! pdfFlag) {
            image.src = event.target.result;// base64
        } else {
            pdfjsLib.getDocument(new Uint8Array(event.target.result))
                .then(pdf => {
                    return pdf.getPage(1);
          ...