Preview local html file in browser

file-upload, html, java, javascript, jsf

Solution

Here is a simple JSFiddle that shows a preview of `html` files. I created it from the tutorial found here.

The most useful part of the code for you is the following

var f = // uploaded file.
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
    return function(e) {
         // Render the file.
         $("#preview").html(e.target.result);
    };
})(f);

// Read in the html file as text.
reader.readAsText(f);

This uses HTML5 `FileReader` to read and display the contents of the `html` file.

Problem

I have web page where a user can upload files. He can select which file to upload with `<t:inputFileUpload>` `jsf` tag.(This tag is like standard HTML input tag with `type="file"`). I want to add a preview feature. when a user select a file (example:`html` file), he could preview his html local file. I know that there is a "problem" with the security restriction reasons of the browsers. my first solution is to loading the file from the user local machine to the server, then making a link to that file on the server. The problem is that there is a risk on my server, Maybe this file is corrupted... Anybody have an idea and solution to this future?

Original source