I have an html page which displays a table of pdf files uploaded with columns saying who uploaded it, when it was uploaded, the size etc, plus a thumbnail of the first page of the pdf file. If you want to edit these files you can click on the row of the file you want to edit. This brings you to a second page where the file_id is sent with $_GET and there the complete PDF file needs to be loaded so it can be read in an iframe tag. This works for files smaller than 2MB.

I cannot load bigger files because the encode64 is limited in length so I did some research which says you should create an objectURL for the files to display them. I don't know javascript that well but it seems the only way to do it.

The part in the html which displays the file is the following :

<?php 
    $fileObj = new DatabaseConn();
    $fileId = $_GET["file_id"];
    $fileArray = $fileObj->selectFile($fileId);
?>
<iframe id="image-preview" src="" height="500px" width="500px"></iframe> 

I open the database connection and pass the file_id to the select statement which fills up the fileArray with the data attributes of the file containing also the file as a string.

In the javascript I have

<script>
    const imageFile = "<?= $fileArray['file_content'] ?>";
    const imagePreview = document.getElementById("image-preview");
    const imageUrl = URL.createObjectURL(imageFile);
    imagePreview.src = imageUrl;
</script>

There is no button the second page should open up displaying the file straight away. This doesn't work and just shows an empty iframe because I believe I'm feeding a string into the createOjectURL and it should be a blob so I would need to convert the file to a blob.

My question is, is this the right and only way to display a large pdf file stored in a mysql database or is there another more elegant way? It seems such a clunky solution.