How to preview a file in different pages with one selection in JS

Question

I am making a PDF Viewer. I am using ADOBE View SDK. I have a File input but the problem is that I want to show the file in different views - Full Screen, Half Screen and In-Line. But when the user selects a file and selects a different view the whole page reloads and then the user has to select the file again. I don't want the user to select the file again.

File Input:

<input type='file' onchange="listenForFileUpload(this);" id="file-picker" accept="application/pdf">

listenForFileUpload function:

    var fileToRead = document.getElementById("file-picker");
    fileToRead.addEventListener("change", function (event) {
        var files = fileToRead.files;
        var input = document.getElementById('file-data').value
        input = files
        console.log(files)
        document.getElementById('file-form').submit()
        if (files.length > 0 && isValidPDF(files[0])) {
            var fileName = files[0].name;
            var reader = new FileReader();
            reader.onloadend = function (e) {
                var filePromise = Promise.resolve(e.target.result);
                previewFile(filePromise, fileName);
            };
            reader.readAsArrayBuffer(files[0]);
        }
    }, false);
}

Please help me to change the view without reloading.

Answer 1

It's this line here:

document.getElementById('file-form').submit()

You are submitting the form there. I'd just remove it.