--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 (/) doesn't seem to work with blob files. This was the closest information I got..

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

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]]);
            }

        },

--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/instructions/) doesn't seem to work with blob files. This was the closest information I got..https://github./kogmbh/ViewerJS/issues/230

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

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]]);
            }

        },

• javascript
• html
• filereader

• Possible duplicate stackoverflow./questions/34523227/… – Asons Commented Mar 23, 2017 at 18:09

2 Answers 2

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 ments 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 ment 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

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

Looks like readAsDataUrl is what you want.