title: Uploading files with VueJS, axios and Laravel
body: <p>Hello I am building one project. Where user can send up to 5 images and up to 10 songs with the text. But when I send request to the server, where I handle with Laravel, I can't get those files.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// my data object from VueJS
  data() {
    return {
      formData: new FormData(),
      pikir: {
        body: '',
      },
      isLoading: false,
      images: [],
      songs: [],
    }
  }
  
  // imagePreview method from VuejS
  imagePreview(event) {
    let input = event.target;
    if (input.files[0]) {
      if (input.files.length &lt;= 5) {
        
        for (let i = 0; i &lt; input.files.length; i++) {
          let reader = new FileReader();
  
          reader.onload = e =&gt; {
            this.images.push(e.target.result);
          }
  
          reader.readAsDataURL(input.files[i]);
        }
        
        Array.from(Array(event.target.files.length).keys())
          .map(x =&gt; {
          
            this.formData
              .append('images',
                event.target.files[x], event.target.files[x].name);
            
        });
        
      } else {
        alert('You can upload up to 5 images');
      }
    }
  }
  
  // musicPreview method from VueJS
  musicPreview(event) {
    let input = event.target;
    if (input.files.length &lt;= 5) {
      for (let i = 0; i &lt; input.files.length; i++) {
        this.songs.push(input.files[i].name.replace('.mp3', ''));
      }
       
      Array.from(Array(event.target.files.length).keys())
        .map(x =&gt; {
  
          this.formData
            .append('songs',
              event.target.files[x], event.target.files[x].name);
  
      });
      
    } else {
      alert('You can upload up to 10 songs');
    }
  }
  
  // sharePikir method from VueJS
  sharePikir() {
    this.formData.append('body', this.pikir.body);
    
    axios.put('/api/pikirler', this.formData)
      .then(response =&gt; {
        this.pikir.body = '';
        this.isLoading = false;
      })
      .catch(() =&gt; {
        this.isLoading = false;
      });
  },</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" id="share-pikir"&gt;
    &lt;label for="pikir"&gt;
      Näme paýlaşmak isleýärsiňiz? {{ pikirSymbolLimit }}
    &lt;/label&gt;
    
    &lt;input type="text" name="pikir" id="pikir" maxlength="255"
      v-model="pikir.body"
      @keyup="handleSymbolLimit()"&gt;
  
    &lt;div class="emoji"&gt;
        &lt;a href="#"&gt;&lt;i class="fa fa-smile-o"&gt;&lt;/i&gt; &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="photo-music left"&gt;
      &lt;label for="music-upload"&gt;
        &lt;i class="fa fa-music"&gt;&lt;/i&gt;
      &lt;/label&gt;
        
       &lt;input type="file" name="songs[]" id="music-upload" 
        accept="audio/mp3"
        @change="musicPreview($event)"
        multiple&gt;
        
        &lt;i class="divider"&gt;&lt;/i&gt;
       
        &lt;label for="image-upload"&gt;
          &lt;i class="fa fa-image"&gt;&lt;/i&gt;
        &lt;/label&gt;
        
       &lt;input type="file" name="images[]" id="image-upload" 
        @change="imagePreview($event)"
        multiple&gt;
        
    &lt;/div&gt;
  
    &lt;div class="share right"&gt;
    
      &lt;button
        :class="{ 'btn-medium': true, 'is-loading': isLoading }"
        @click.prevent="sharePikir($event)"&gt;
        Paýlaşmak
      &lt;/button&gt;
      
    &lt;/div&gt;
    
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I put my front end stuff above and in my Laravel side I just return all requests:</p>
  
  <pre><code>public function store(){
      return request()-&gt;all();
  }
  </code></pre>
  
  <p>And these are what I get from request:</p>
  
  <p><a href="https://i.stack.imgur.com/udvmB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/udvmB.png" alt="Image"></a></p>
  
  <p><a href="https://i.stack.imgur.com/BbdV1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BbdV1.png" alt="Image 2"></a></p>
  
  <p><a href="https://i.stack.imgur.com/5uHz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5uHz1.png" alt="Image 3"></a></p>
  
  <p>I couldn't found what is wrong. Thank you in advance.</p>