title: How to get file url of front end uploaded file
body: <p>--UPDATE--</p>
  
  <p>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.</p>
  
  <p><strong>MUST BE ABLE TO PREVIEW ALL OPEN DOCUMENT FILES</strong></p>
  
  <p>My current issue is that <strong>viewer.js</strong> (<a href="http://viewerjs.org/instructions/" rel="nofollow noreferrer">http://viewerjs.org/instructions/</a>) doesn't seem to work with blob files. This was the closest information I got..<a href="https://github.com/kogmbh/ViewerJS/issues/230" rel="nofollow noreferrer">https://github.com/kogmbh/ViewerJS/issues/230</a></p>
  
  <p>Any ideas on a way to have this work with all open document files? Plugin recommendations?</p>
  
  <p>Current Code below..</p>
  
  <pre><code>    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 &lt; files.length; i++) {
                  // Display List
                  list.append(`&lt;div class='hundredWidth'&gt;"+
                                  &lt;label class='autoWidth underline'&gt;${type}&lt;/label&gt;&lt;label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'&gt;&lt;/label&gt;
                                  &lt;label class='oneWide'&gt;${files[i].name}&lt;/label&gt;"
                            &lt;/div&gt;`);
  
                  // Store Preview Links
                  var blobURL = URL.createObjectURL(files[i]);
                  MODALJS.fileUploadPreviewLinks.push(blobURL);
                  // Append Iframe Preview
                  list.append(`&lt;iframe src="${MODALJS.fileUploadPreviewLinks[i]}" allowfullscreen webkitallowfullscreen width="400px" height="400px"&gt;&lt;/iframe&gt;`);
                  // Push to upload queue
                  MODALJS.fileUploadFiles.push(["file", files[i]]);
              }
          },
  </code></pre>
  
  <p>--UPDATE #2--</p>
  
  <p>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. </p>
  
  <pre><code>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 &lt; files.length; i++) {
                  // Display List
                  list.append(`&lt;div class='hundredWidth'&gt;"+
                                  &lt;label class='autoWidth underline'&gt;${type}&lt;/label&gt;&lt;label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'&gt;&lt;/label&gt;
                                  &lt;label class='oneWide'&gt;${files[i].name}&lt;/label&gt;"
                            &lt;/div&gt;`);
  
                  // Store Preview Links
                  var blobURL = URL.createObjectURL(files[i]);
                  MODALJS.fileUploadPreviewLinks.push(blobURL);
                  // Append Iframe Preview
  
                  list.append(`&lt;div id="odfCanvas"&gt;&lt;/div&gt;`);
                  odfElement = document.getElementById("odfCanvas");
                  odfcanvas = new odf.OdfCanvas(odfElement);
                  odfcanvas.load(blobURL);
                  // Push to upload queue
                  MODALJS.fileUploadFiles.push(["file", files[i]]);
              }
  
          },
  </code></pre>