0

I'm having a weird issue I created an app to open PNG and PDF's. The problem is when I try to open PDF files larger than 2,000 Kb it will not display, however PNG's have no problem. I'm confused as too why this is.

    <html lang="en"><head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
</head>

<body>

    <ul>
    </ul>

    <fieldset>
        <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000">
        <div>
            <label for="fileselect">Files to upload:</label>
            <input type="file" id="fileselect" name="file-select[]" multiple="multiple">
            <div id="filedrag" style="display: block;">or drop files here</div>
        </div>

        <div id="submitbutton" style="display: none;">
            <button type="submit">Upload Files</button>
        </div>
        <div id="sortbutton">
            <button type="submit">Submit</button>
        </div>
        <div id="resetbutton">
            <button type="submit">Reset</button>
        </div>
    </fieldset>

</form>

<div id="messages">

</div>

<script src="filedrag.js"></script>


</body></html>



    var files;
    (function() {

    // getElementById
    function $id(id) {
        return document.getElementById(id);
    }


    // output information
    function Output(msg) {
        var m = $id("messages");
        m.innerHTML = msg + m.innerHTML;
    }


    // file drag hover
    function FileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }


    // file selection
    function FileSelectHandler(e) {

        // cancel event and hover styling
        FileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        for (var i = 0, f; f = files[i]; i++) {
            ParseFile(f);

        }

    }



    // output file information
    function ParseFile(file) {
        // display an image
        if (file.type.indexOf("application") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                files.push("<p align=left><strong>" + file.name + ":</strong><br />" +
                    '<object data="' + e.target.result + '"></object></p>');
            }
            reader.readAsDataURL(file);
        } 

        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                files.push("<p align=left><strong>" + file.name + ":</strong><br />" +
                    '<img src="' + e.target.result + '" height="500px" width="500px"></p>');
            }
            reader.readAsDataURL(file);

        }
    }

    function sortFiles() {
        files.sort().reverse();
        for (var i = 0; i < files.length; ++i) {
            Output(files[i]);
        }
    }

    function resetWindow(){
        window.location.reload(true)
    }


    // initialize
    function Init() {

        var fileselect = $id("fileselect"),
            filedrag = $id("filedrag"),
            submitbutton = $id("submitbutton"),
            sortbutton = $id("sortbutton"),
            resetbutton = $id("resetbutton");

        files = new Array();    
        // file select
        fileselect.addEventListener("change", FileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", FileDragHover, false);
            filedrag.addEventListener("dragleave", FileDragHover, false);
            filedrag.addEventListener("drop", FileSelectHandler, false);
            filedrag.style.display = "block";

            // remove submit button
            submitbutton.addEventListener("click", sortFiles , false); //style.display = "none";

            sortbutton.addEventListener("click", sortFiles , false);
            resetbutton.addEventListener("click", resetWindow , false);
        }

    }

    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
        Init();
    }


})();

As I said you try to post a PDF file larger than 2000 Kb it will not display, PNG however will display

K.Dᴀᴠɪs
  • 9,945
  • 11
  • 33
  • 43
Josh Adams
  • 17
  • 5

2 Answers2

0

I fixed it I hardcoded the path to display the Files

Josh Adams
  • 17
  • 5
0

I had the same issue like yours and I resolved in this way:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="height: 100%;">
    <button onclick="getFile(event)">Get File</button>
    <input id="pdfInputFile" type="file" accept="application/pdf" style="display:none" onchange="loadPDF(this);" />
    <object id="pdfViewer" type="application/pdf" style="height:100%; width:100%;border:solid 1px" >
    </object>
</body>

<script>

    function getFile(e) {
        e.preventDefault();
        document.getElementById("pdfInputFile").click();
    }


    function loadPDF(input) {

        if (input.files && input.files[0]) {
            showFile(input.files[0])
        }
    }

    function showFile(blob){

        // It is necessary to create a new blob object with mime-type explicitly set
        // otherwise only Chrome works like it should
        var newBlob = new Blob([blob], {type: "application/pdf"});

        // Create a link pointing to the ObjectURL containing the blob.
        const data = window.URL.createObjectURL(newBlob);        
        document.getElementById("pdfViewer").setAttribute('data', data);
        setTimeout(function(){
            // For Firefox it is necessary to delay revoking the ObjectURL
            window.URL.revokeObjectURL(data);
        }, 100);
    }

</script>
</html>
Canale
  • 21
  • 3