title: This input element accepts a filename, which may only be programmatically set to the empty string
body: <p>I found the following directive to read a file:</p>
  
  <pre><code>.directive('fileSelect', function() {
      var template = '&lt;input type="file" id="files" class="hide"/&gt;';
      return function(scope, elem, attrs) {
          var selector = $(template);
          elem.append(selector);
          selector.bind('change', function(changeEvent) {
              var reader = new FileReader();
              reader.onloadend = function(loadEvent) {
                  scope.$apply(function() {
                      if (loadEvent &amp;&amp; loadEvent.target &amp;&amp; loadEvent.target.result)
                          scope[attrs.fileSelect] = loadEvent.target.result;
                      if (changeEvent &amp;&amp; changeEvent.target &amp;&amp; changeEvent.target.files &amp;&amp; changeEvent.target.files.length &gt; 0)
                          scope[attrs.path] = changeEvent.target.files[0].name;
                  });
              };
              if (changeEvent &amp;&amp; changeEvent.target &amp;&amp;
                  changeEvent.target.files &amp;&amp; changeEvent.target.files.length &gt; 0)
                  reader.readAsText(changeEvent.target.files[0]);
          });
          scope.$watch(attrs.fileSelect, function(file) {
              selector.val(file);
          });
      };
  });
  </code></pre>
  
  <p>I put in the html the following element:</p>
  
  <pre><code>&lt;div file-select="content" path="url" class="hide"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I read a file, I got the following exception from the <code>selector.val(file);</code>:</p>
  
  <pre><code>Error: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
  </code></pre>
  
  <p>Can anyone help me?</p>