title: Multiple file upload using Laravel & Vue JS
body: <p>so I've been trying to upload multiple image file using <strong>Vue JS</strong> with <strong>Laravel</strong> at server side.</p>
  <p><strong>My template vue</strong></p>
  <pre><code>&lt;input type=&quot;file&quot; id = &quot;file&quot; ref=&quot;file&quot; v-on:change=&quot;onImageChange&quot; multiple /&gt;
  </code></pre>
  <p><strong>My Javascript code</strong></p>
  <pre><code>&lt;script&gt;
   export default {
    data(){
      return{
        product: {},
        image: '',
      }
    },
    created() {
      let uri = `/api/product/edit/${this.$route.params.id}`;
      this.axios.get(uri).then((response) =&gt; {
          this.product = response.data;
      }); 
    },
    methods:{
      onImageChange(e){
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length)
         return;
         this.createImage(files[0]);
      },
      createImage(file){
         let reader = new FileReader();
         let vm = this;
         reader.onload = (e) =&gt; {
           vm.image = e.target.result;
         };
         reader.readAsDataURL(file);
      },
      replaceByDefault(e) {
        e.target.src = this.src='/uploads/products/default_image.jpg';
      },
      saveImage(e){
  
          e.preventDefault()
  
          var file = document.getElementById('file').files;
  
          let formData = new FormData;
              formData.append('productId', this.product.id)
              formData.append('file', file[0])
  
          axios.post('/api/product/image/add', formData, {
              headers: {'Content-Type': 'multipart/form-data'}
          }).then((response) =&gt; {
              this.$router.push({name: 'view',params: { id: this.product.id }});
              });
       }
  
      }
     }
    &lt;/script&gt;
  </code></pre>
  <p>I saw somewhere the internet that in vue you can use looping the <strong>formData.append</strong> but how do i catch the data in the server side. Here is my <strong>ProductController</strong></p>
  <pre><code>  $saveImage = new Gallery;
    $saveImage-&gt;product_id = $request-&gt;productId;
  
    $file = request()-&gt;file('file');
    $file_name = time().$file-&gt;getClientOriginalName();
    $path = $imgUpload = Image::make($file)-&gt;save(public_path('/uploads/products/' . $file_name));
  
    $saveImage-&gt;path = '/uploads/products/'.$file_name;
    $saveImage-&gt;status = 1;
  
    $saveImage-&gt;save();
    return &quot;success&quot;;
  </code></pre>
  <p>Thank you very much guys!</p>