Preview local html file in browser

Question

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?

Answer 1

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.