<template>
  <div id="fileUploader">
    <input @change="detectFiles($event)" type="file" multiple id="files">
    <div id="uploadPreview" v-for="file in rawPreviews">
      <img :src="file" height="150" width="150">
    </div>
  </div>
</template>

<script>
export default {
  name: "FileUpload",
  props: [],
  data() {
    return {
      selectedFiles: [],
      totalSelected: 0,
      rawPreviews: []
    };
  },
  methods: {
    detectFiles(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (files[0] !== undefined) {
        Array.from(Array(files.length).keys()).map(x => {
          let reader = new FileReader();
          let file = files[x];
          let that = this;

          reader.onload = function(event) {
            that.rawPreviews.push(event.target.result);
            file.raw = event.target.result;
          };
          reader.readAsDataURL(file);

          this.selectedFiles.push(file);
          console.log(file);
        });
      } else {
        this.selectedFiles = [];
        this.totalSelected = 0;
        this.rawPreviews = [];
      }
    }
    /*     previewFiles() {
      let uploadPreview = document.getElementById("uploadPreview");
      let previews = this.rawPreviews;
      let numFiles = files.length;
      // Determine if image or other file type (PDF, word, txt, etc)
      // Maybe give 1 generic or some specific icons for other file type previews
    } */
  }
};
</script>

<style scoped>
</style>