title: FileReader and CodeMirror Load File Complication
body: <p>Default CodeMirror HTML Editor with Preview - <a href="http://jsfiddle.net/D9MvH/1/" rel="noreferrer">http://jsfiddle.net/D9MvH/1/</a> - <a href="http://liveweave.com/zSqCfA" rel="noreferrer">http://liveweave.com/zSqCfA</a></p>
  
  <p>Load File in CodeMirror with FileReader API - <a href="http://liveweave.com/VvsXN9" rel="noreferrer">http://liveweave.com/VvsXN9</a></p>
  
  <p>Here's a very simple example of what I'm trying to do. (Save function don't work on these online editors, but the import file function works on this simple editor) - <a href="http://liveweave.com/MrUBfZ" rel="noreferrer">http://liveweave.com/MrUBfZ</a></p>
  
  <p>My problem is when I click my input file form to browse for a file. I choose the HTML document to be opened and it won't open with/in CodeMirror. I tried everything of my knowledge and can't get it to work. Can anyone help with this?</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;input type="file" onchange="loadfile(this)"&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre><code>var delay;
  
  // Initialize CodeMirror editor
  var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
      mode: 'text/html',
      tabMode: 'indent',
      lineNumbers: true,
      lineWrapping: true,
      autoCloseTags: true
  });
  
  // Live preview
  editor.on("change", function() {
      clearTimeout(delay);
      delay = setTimeout(updatePreview, 300);
  });
  
  function updatePreview() {
      var previewFrame = document.getElementById('preview');
      var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
      preview.open();
      preview.write(editor.getValue());
      preview.close();
  }
  setTimeout(updatePreview, 300);
  
  function saveTextAsFile() {
      var textToWrite = document.getElementById("code").value;
      var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
      var fileNameToSaveAs = "myfile.html";
  
      var downloadLink = document.createElement("a");
      downloadLink.download = fileNameToSaveAs;
      downloadLink.innerHTML = "Download File";
      if (window.webkitURL != null)
      {
          // Chrome allows the link to be clicked
          // without actually adding it to the DOM.
          downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
      }
      else
      {
          // Firefox requires the link to be added to the DOM
          // before it can be clicked.
          downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
          downloadLink.onclick = destroyClickedElement;
          downloadLink.style.display = "none";
          document.body.appendChild(downloadLink);
      }
  
      downloadLink.click();}
  
  function destroyClickedElement(event) {
      document.body.removeChild(event.target);}
  
  function loadfile(input){
      var reader = new FileReader()
      reader.onload = function(e) {
          editor.setValue = e.target.result;}
      reader.readAsText(input.files[0]);}
  
      var input = document.getElementById("select");
  
      function selectTheme() {
        var theme = input.options[input.selectedIndex].innerHTML;
        editor.setOption("theme", theme);
      }
  
      var choice = document.location.search &amp;&amp;
                 decodeURIComponent(document.location.search.slice(1));
      if (choice) {
        input.value = choice;
        editor.setOption("theme", choice);
      }
  </code></pre>
  
  <p><strong>Full Code</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;CodeMirror: HTML5 preview&lt;/title&gt;
  &lt;script src='http://codemirror.net/lib/codemirror.js'&gt;&lt;/script&gt;
  &lt;script src='http://codemirror.net/mode/xml/xml.js'&gt;&lt;/script&gt;
  &lt;script src='http://codemirror.net/mode/javascript/javascript.js'&gt;&lt;/script&gt;
  &lt;script src='http://codemirror.net/mode/css/css.js'&gt;&lt;/script&gt;
  &lt;script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'&gt;
  &lt;link rel='stylesheet' href='http://codemirror.net/doc/docs.css'&gt;
  &lt;style type='text/css'&gt;
  .CodeMirror {
      float: left;
      width: 50%;
      border: 1px solid black;}
  
  iframe {
      width: 49%;
      float: left;
      height: 300px;
      border: 1px solid black;
      border-left: 0px;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;textarea id="code" name="code"&gt;&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;title&gt;HTML5 canvas demo&lt;/title&gt;
  &lt;style&gt;p {font-family: monospace;}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Canvas pane goes here:&lt;/p&gt;
      &lt;canvas id=pane width=300 height=200&gt;&lt;/canvas&gt;
  
      &lt;script&gt;
        var canvas = document.getElementById('pane');
        var context = canvas.getContext('2d');
  
        context.fillStyle = 'rgb(250,0,0)';
        context.fillRect(10, 10, 55, 50);
  
        context.fillStyle = 'rgba(0, 0, 250, 0.5)';
        context.fillRect(30, 30, 55, 50);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;&lt;/textarea&gt;
  
      &lt;iframe id="preview"&gt;&lt;/iframe&gt;
  
      &lt;input type="file" onchange="loadfile(this)"&gt;
      &lt;a href="#my-header" onclick='saveTextAsFile()'&gt;Save/Download&lt;/a&gt;
  
  &lt;script&gt;
  var delay;
  
  // Initialize CodeMirror editor
  var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
      mode: 'text/html',
      tabMode: 'indent',
      lineNumbers: true,
      lineWrapping: true,
      autoCloseTags: true
  });
  
  // Live preview
  editor.on("change", function() {
      clearTimeout(delay);
      delay = setTimeout(updatePreview, 300);
  });
  
  function updatePreview() {
      var previewFrame = document.getElementById('preview');
      var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
      preview.open();
      preview.write(editor.getValue());
      preview.close();
  }
  setTimeout(updatePreview, 300);
  
  function saveTextAsFile() {
      var textToWrite = document.getElementById("code").value;
      var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
      var fileNameToSaveAs = "myfile.html";
  
      var downloadLink = document.createElement("a");
      downloadLink.download = fileNameToSaveAs;
      downloadLink.innerHTML = "Download File";
      if (window.webkitURL != null)
      {
          // Chrome allows the link to be clicked
          // without actually adding it to the DOM.
          downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
      }
      else
      {
          // Firefox requires the link to be added to the DOM
          // before it can be clicked.
          downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
          downloadLink.onclick = destroyClickedElement;
          downloadLink.style.display = "none";
          document.body.appendChild(downloadLink);
      }
  
      downloadLink.click();}
  
  function destroyClickedElement(event) {
      document.body.removeChild(event.target);}
  
  function loadfile(input){
      var reader = new FileReader();
      reader.onload = function(e) {
          document.getElementById('code').value = e.target.result;}
      reader.readAsText(input.files[0]);}
  
      var input = document.getElementById("select");
  
      function selectTheme() {
        var theme = input.options[input.selectedIndex].innerHTML;
        editor.setOption("theme", theme);
      }
  
      var choice = document.location.search &amp;&amp;
                 decodeURIComponent(document.location.search.slice(1));
      if (choice) {
        input.value = choice;
        editor.setOption("theme", choice);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>