4

--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]]); } },
Improve this question
1

2 Answers 2

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
@MichaelPaccione Updated the answer
I'm not familiar with viewer.js but a search for 'filereader' at their github repo only turned up a single unanswered ticket. :( 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.
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.
1

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

Looks like readAsDataUrl is what you want.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.