--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 [//viewerjs.org/instructions/] doesn't seem to work with blob files. This was the closest information I got..//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[`"+
${type}
${files[i].name}"
`];
// Store Preview Links
var blobURL = URL.createObjectURL[files[i]];
MODALJS.fileUploadPreviewLinks.push[blobURL];
// Append Iframe Preview
list.append[``];
// 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[`"+
${type}
${files[i].name}"
`];
// Store Preview Links
var blobURL = URL.createObjectURL[files[i]];
MODALJS.fileUploadPreviewLinks.push[blobURL];
// Append Iframe Preview
list.append[``];
odfElement = document.getElementById["odfCanvas"];
odfcanvas = new odf.OdfCanvas[odfElement];
odfcanvas.load[blobURL];
// Push to upload queue
MODALJS.fileUploadFiles.push[["file", files[i]]];
}
},
This snippet will get the filename from the url. The filename is the last part of the URL from the last trailing slash. For example, if the URL is //www.example.com/dir/file.html then file.html is the file name.
Explanation
var url = window.location.pathname;
This declares the url variable and adds the current pathname as its value.
var filename = url.substring[url.lastIndexOf['/']+1];
alert[filename];
substring [method] - extract characters from start [parameter]. url is the stringObject url.substring[start]
lastIndexOf [method] - position of last occurrence of specified string value, in this case the ‘/’
Add one to lastIndexOf because we do not want to return the ‘/’
Full snippet
var url = window.location.pathname;
var filename = url.substring[url.lastIndexOf['/']+1];
alert[filename];
The The URL lifetime is tied to the To release an object URL, call Note: This feature is available in Web Workers Note: This feature is
not available in Service Workers due to its potential to create memory leaks. A A string containing an object URL that can be used to reference the contents of the specified source URL.createObjectURL[]
static method creates a string containing a URL representing the object given in the parameter. document
in the window on which it was created. The new object URL represents the specified File
object or Blob
object. revokeObjectURL[]
.Syntax
Parameters
object
File
, Blob
, or MediaSource
object
to create an object URL for. Return value
object
.
Examples
Usage notes
Memory management
Each time you call createObjectURL[]
, a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL[]
when you no longer need them.
Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
Using object URLs for media streams
In older versions of the Media Source specification, attaching a stream to a element required creating an object URL for the
MediaStream
. This is no longer necessary, and browsers are removing support for doing this.
Warning: If you still have code that relies on createObjectURL[]
to attach streams to media elements, you need to update your code to set
srcObject
to the MediaStream
directly.
Specifications
File API # dfn-createObjectURL |
Browser compatibility
BCD tables only load in the browser