Upload multiple images using laravel and Vue.js

I'm using vue.js and laravel to upload multiple images using vue.js

JS fiddle:

https://jsfiddle.net/jfwv04mu/

Vue.js

new Vue({
  el: "#app",
  data() {
    return {
      option: {
        maxFileCount: 3
      },
      files:[],
      rawData: [],
    }
  },
  methods: {
    loaddropfile: function(e) {
        e.preventDefault()
      e.stopPropagation()
        alert('ok')
        console.log(e)
    },
    openinput: function() {
        document.getElementById("vue-file-upload-input").click();
    },
    addImage: function(e) {
        const tmpFiles = e.target.files
      if (tmpFiles.length === 0) {
        return false;
      }
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
        const reader = new FileReader()
      reader.onload = function(e) {
        self.rawData.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    removeFile: function(index) {
        this.files.splice(index, 1)
      this.rawData.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    },
    upload: function() {
        alert('Check console to see uploads')
        console.log(this.files)
    }
  },
  mounted(){
  dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;
  evt.preventDefault();
};
  }
})

now getting it in controller like this:

foreach($request->input('files') as $file)
      {   dd($file);
         
      }

Now when i print the count of files it shows files count correctly but cannot get images it contains blank array. Please give suggestions to solve this issue.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3jbMiGZ
via IFTTT