3

--UPDATE--

So I am attempting to create a file previewer that allows someone to upload files with on the front end, access the browser files as a blob, and preview them in an iframe.

MUST BE ABLE TO PREVIEW ALL OPEN DOCUMENT FILES

My current issue is that viewer.js (http://viewerjs.org/instructions/) doesn't seem to work with blob files. This was the closest information I got..https://github.com/kogmbh/ViewerJS/issues/230

Any ideas on a way to have this work with all open document files? Plugin recommendations?

Current Code below..

    fileUploadProcessFiles: function(fileInput){
            console.log("MODALJS.fileUploadProcessFiles");
            var m = $(document).find("#modal"),
                list = $("#uploadList"),
                files = fileInput.files,
                type = m.find("option:selected").text();

            for (var i = 0; i < files.length; i++) {
                // Display List
                list.append(`<div class='hundredWidth'>"+
                                <label class='autoWidth underline'>${type}</label><label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'></label>
                                <label class='oneWide'>${files[i].name}</label>"
                          </div>`);

                // Store Preview Links
                var blobURL = URL.createObjectURL(files[i]);
                MODALJS.fileUploadPreviewLinks.push(blobURL);
                // Append Iframe Preview
                list.append(`<iframe src="${MODALJS.fileUploadPreviewLinks[i]}" allowfullscreen webkitallowfullscreen width="400px" height="400px"></iframe>`);
                // Push to upload queue
                MODALJS.fileUploadFiles.push(["file", files[i]]);
            }
        },

--UPDATE #2--

So I got it figured out. I had to use a different plugin. webODF instead... I should be able to cobble together a decent enough solution now. 

fileUploadProcessFiles: function(fileInput){
            console.log("MODALJS.fileUploadProcessFiles");
            var m = $(document).find("#modal"),
                list = $("#uploadList"),
                files = fileInput.files,
                type = m.find("option:selected").text();

            for (var i = 0; i < files.length; i++) {
                // Display List
                list.append(`<div class='hundredWidth'>"+
                                <label class='autoWidth underline'>${type}</label><label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'></label>
                                <label class='oneWide'>${files[i].name}</label>"
                          </div>`);

                // Store Preview Links
                var blobURL = URL.createObjectURL(files[i]);
                MODALJS.fileUploadPreviewLinks.push(blobURL);
                // Append Iframe Preview

                list.append(`<div id="odfCanvas"></div>`);
                odfElement = document.getElementById("odfCanvas");
                odfcanvas = new odf.OdfCanvas(odfElement);
                odfcanvas.load(blobURL);
                // Push to upload queue
                MODALJS.fileUploadFiles.push(["file", files[i]]);
            }

        },
Michael Paccione
  • 2,467
  • 6
  • 39
  • 74
  • Possible duplicate http://stackoverflow.com/questions/34523227/how-to-make-preview-for-each-file-input-with-filereader – Asons Mar 23 '17 at 18:09

2 Answers2

4

There is no URL for an uploaded file. At least not in the traditional "resource locator" sense. You can access the file via the FileReader.result property.

This snippet is more or less directly from MDN. Added a few comments to clarify (hopefully) what's happening where.

function previewFile() {
  const preview = document.getElementById('preview');
  const file = document.getElementById('upload').files[0];
  const reader = new FileReader();

  // listen for 'load' events on the FileReader
  reader.addEventListener("load", function () {
    // change the preview's src to be the "result" of reading the uploaded file (below)
    preview.src = reader.result;
  }, false);

  // if there's a file, tell the reader to read the data
  // which triggers the load event above
  if (file) {
    reader.readAsDataURL(file);
  }
}
<input id="upload" type="file" onchange="previewFile()"><br>
<img id="preview" src="" height="200" alt="Image preview...">

Update for comment question: PDFs are tricky. Well, anything that isn't natively rendered in the browser is going to be tricky or impossible. You might try URL.createObjectURL(file) and then making that the source of an iframe to trigger the browser's not-quite-native-per-se PDF rendering. You could also try Mozilla's pdf.js

Kia Faraji
  • 17
  • 4
Will
  • 4,075
  • 1
  • 17
  • 28
  • So you're saying that if I wanted to preview a non image file, like a pdf I will always have to store it on a server... because there is no resource locator. – Michael Paccione Mar 23 '17 at 18:19
  • @MichaelPaccione Updated the answer – Will Mar 23 '17 at 18:33
  • 1
    I'm not familiar with viewer.js but a search for 'filereader' at their github repo only turned up a single unanswered ticket. :( https://github.com/kogmbh/ViewerJS/issues/179. You might try using `URL.createObjectURL(file)` to create a URL and stuffing it into (and re-initializing) a viewer.js link. – Will Mar 23 '17 at 18:40
  • Thanks, Will I think creating the object url is getting warmer. I'm just not sure if it will work with a blob url.. so far no luck. This viewer is the best though because it does all open document formats instead of just a pdf. I need to ultimately preview a variety of files, then convert to pdf with timestamp and save in DB after submission. I'm going with the viewer trying to avoid a db hit ahead of time. I will keep investigating and will update if I find the solution. – Michael Paccione Mar 23 '17 at 19:01
1

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Looks like readAsDataUrl is what you want.

Robert Carter Mills
  • 793
  • 1
  • 9
  • 19