title: Vue-resource + FormData File Upload with Laravel Backend
body: <p>I Already asked my question on VueJS Forum : <a href="https://forum.vuejs.org/t/file-upload-with-formdata-vue-resource/20952/3" rel="nofollow noreferrer">https://forum.vuejs.org/t/file-upload-with-formdata-vue-resource/20952/3</a></p>
  
  <p>But ! For duplicate my chances to success I'll ask you about my problem.</p>
  
  <p>Simply I have a input type file (without form parent node) and I'm trying to upload asynchronously a file with FormData and Vue-resource http to my Laravel 5.5 API Backend.. </p>
  
  <p>To test my upload my controller return a JSON response with a dump of my $request.</p>
  
  <p>Well, I have a 200 code and but unfortunetly my response is empty.. </p>
  
  <p>Thank you for your helping :)</p>
  
  <p><a href="https://i.stack.imgur.com/yqHBj.png" rel="nofollow noreferrer">Request payload here</a></p>
  
  <p>Client code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    name: 'profile',
    data () {
      return {
        user: {},
        files: [],
        filepath: false,
        imageData: ''
      }
    },
    mounted () {
      this.user = this.$store.getters.user
    },
    methods: {
      reset: function () {
        this.remove()
      },
      upload: function (e) {
        var data = new FormData()
        var file = this.files[0]
  
        data.append('test', 1234)
        data.append('avatar', file)
  
        this.$http({
          url: this.user.actions.updateAvatar,
          body: data,
          method: 'POST',
          responseType: 'json',
          before: function (request) {
            console.log(request)
          }
        })
        .then((response) =&gt; {
          console.log(response)
        })
        .catch((errorResponse) =&gt; {
          console.log(errorResponse)
        })
      },
      sync: function (e) {
        e.preventDefault()
        this.files = e.target.files || e.dataTransfer.files
        if (!this.files.length) {
          return
        }
        this.createFile(e, this.files[0])
      },
      createFile: function (e, file) {
        this.filepath = URL.createObjectURL(file)
      },
      remove: function () {
        URL.revokeObjectURL(this.filepath)
        this.filepath = false
        this.files = []
        document.getElementById('avatar').value = ''
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;!-- header profile --&gt;
      &lt;div id="profile"&gt;
          &lt;section class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                      &lt;div class="profile"&gt;
                          &lt;input type="hidden" name="_method" value="PUT"/&gt;
                          &lt;header&gt;
                              &lt;label for="avatar" class="avatar" v-if="!filepath"&gt;
                              &lt;img :src="user.avatar || 'http://placehold.it/50x50'" alt="avatar"&gt;
                              &lt;/label&gt;
                              &lt;div class="avatar" @click="reset" v-if="filepath"&gt;
                                  &lt;img :src="filepath" alt="avatar"&gt;
                              &lt;/div&gt;
                              
  &lt;!-- Trigger a preview --&gt;
  &lt;input @change="sync" id="avatar" name="avatar" type="file" accept="image/*;" class="hide"&gt;
                              
                              &lt;div class="info"&gt;
                                  &lt;span class="name"&gt;John Snow 
                                      &lt;router-link :to="{ name: 'UserSettings' }"&gt;
                                          &lt;span class="ico gear"&gt;&lt;/span&gt;
                                      &lt;/router-link&gt;
                                  &lt;/span&gt;
                                  &lt;span class="desc"&gt;Une bio de 40 caractères&lt;/span&gt;
                                  &lt;span class="social"&gt;
                                      &lt;span class="ico fb"&gt;&lt;/span&gt;
                                      &lt;span class="ico tw"&gt;&lt;/span&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/header&gt;
  &lt;!-- Trigger upload --&gt;                     
  &lt;span @click="upload" class="btn-save" v-if="filepath"&gt;
      Enregistrer
  &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;router-link :to="{ name: 'UserPosts' }"&gt;
                              &lt;span for="dechet" class="nb-dechet"&gt;122 déchêts postés&lt;/span&gt;
                          &lt;/router-link&gt;
                          |
                          &lt;router-link :to="{ name: 'UserBookmarks' }"&gt;
                              &lt;span for="dechet" class="nb-dechet"&gt;122 déchêts sauvegardés&lt;/span&gt;
                          &lt;/router-link&gt;
                          |
                          &lt;router-link :to="{ name: 'UserTrophies' }"&gt;
                              &lt;span for="reward" class="nb-dechet"&gt;1 trophé obtenu&lt;/span&gt; 
                          &lt;/router-link&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;    
          &lt;hr&gt;
          &lt;!-- posts --&gt;
          &lt;section class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;router-view&gt;&lt;/router-view&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Server-side code </p>
  
  <p><a href="https://i.stack.imgur.com/9x3dU.png" rel="nofollow noreferrer">Route</a> | <a href="https://i.stack.imgur.com/pyOYQ.png" rel="nofollow noreferrer">Dummy Controller</a></p>