let form = document.querySelector('.fileupload');
let fileSelect = document.getElementById('photos');
let uploadButton = document.getElementById('upload-btn');

document.getElementById('photos').addEventListener('change', function (event) {
   let files = event.target.files; // FileList
   for (let i = 0, f; f = files[i]; i++) {
      if (!f.type.match('image.*')) {
         continue;
      }
      let reader = new FileReader();
      reader.onload = (function(theFile) {
         return function(e) {
            let span = document.createElement('span');
            span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
            document.querySelector ('.filelist').insertBefore(span, null);
         };
      })(f);
      reader.readAsDataURL(f);
    }
    document.querySelector ('.filelist').innerHTML = '';
});


form.addEventListener ("submit", function (event) {
   event.preventDefault();
   document.querySelector("#result").innerHTML = "";
   document.querySelector('progress').style = "display: block";

   uploadButton.innerHTML = 'werden geladen …';

   let files = fileSelect.files;
   
   let formData = new FormData();

   for (let i = 0; i < files.length; i++) {
      let file = files[i];
      
      if (!file.type.match('image.*')) {
         continue;
      }

      formData.append('photos[]', file, file.name);
   }
   
   let xhr = new XMLHttpRequest();

   xhr.upload.onprogress = function (e) {
      console.log (e.total);
      let percentUpload = Math.floor(100*e.loaded / e.total);
      progress.value = percentUpload;
      document.querySelector(".msg").innerHTML = percentUpload + '% geladen';
   }
   
   xhr.open('POST', 'upload.php', true);

   xhr.onload = function () {
      if (xhr.status === 200) {         
         document.querySelector("#result").innerHTML = xhr.responseText;
         uploadButton.innerHTML = 'Upload';
         document.querySelector('progress').style = "display: none";
      } else {
         document.querySelector("#result").innerHTML = "Fehler beim Upload " + xhr.responseText;
      }
   };

   xhr.send(formData);
});