title: Load multiple picture files with angularjs
body: <p>I found this useful <a href="http://www.tutorialspoint.com/angularjs/angularjs_upload_file.htm" rel="nofollow">link</a> which shows how to load picture from your local pc with a directive (newbie w/angular). But I don't know where to modify it to display also the selected images. How could I achieve this? I found that many examples like this that only lists the filenames.</p>
  
  <p>I found this <a href="http://codepen.io/matt-west/pen/CfilG" rel="nofollow">approach</a> which loads the file and I adapted it to load multiple files. By this doesn't use angular.</p>
  
  <pre><code>window.onload = function() {
  
      var fileInput = document.getElementById('fileInput');
      var fileDisplayArea = document.getElementById('fileDisplayArea');
  
  
      fileInput.addEventListener('change', function(e) {
          var file = fileInput.files[0];
          var imageType = /image.*/;
  
          if (file.type.match(imageType)) {
              var reader = new FileReader();
  
              reader.onload = function(e) {
                  fileDisplayArea.innerHTML = "";
  
                  var img = new Image();
                  img.src = reader.result;
  
                  fileDisplayArea.appendChild(img);
              }
  
              reader.readAsDataURL(file); 
          } else {
              fileDisplayArea.innerHTML = "File not supported!"
          }
      });
  </code></pre>
  
  <p>What would be a better approach. I want to load multiple files, display and finally upload them as byteArray.</p>