Vue-resource + FormData File Upload with Laravel Backend

Question

I Already asked my question on VueJS Forum : https://forum.vuejs.org/t/file-upload-with-formdata-vue-resource/20952/3

But ! For duplicate my chances to success I'll ask you about my problem.

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..

To test my upload my controller return a JSON response with a dump of my $request.

Well, I have a 200 code and but unfortunetly my response is empty..

Thank you for your helping :)

Request payload here

Client 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) => {
        console.log(response)
      })
      .catch((errorResponse) => {
        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 = ''
    }
  }
}

<template>
    <!-- header profile -->
    <div id="profile">
        <section class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="profile">
                        <input type="hidden" name="_method" value="PUT"/>
                        <header>
                            <label for="avatar" class="avatar" v-if="!filepath">
                            <img :src="user.avatar || 'http://placehold.it/50x50'" alt="avatar">
                            </label>
                            <div class="avatar" @click="reset" v-if="filepath">
                                <img :src="filepath" alt="avatar">
                            </div>
                            
<!-- Trigger a preview -->
<input @change="sync" id="avatar" name="avatar" type="file" accept="image/*;" class="hide">
                            
                            <div class="info">
                                <span class="name">John Snow 
                                    <router-link :to="{ name: 'UserSettings' }">
                                        <span class="ico gear"></span>
                                    </router-link>
                                </span>
                                <span class="desc">Une bio de 40 caractères</span>
                                <span class="social">
                                    <span class="ico fb"></span>
                                    <span class="ico tw"></span>
                                </span>
                            </div>
                        </header>
<!-- Trigger upload -->                     
<span @click="upload" class="btn-save" v-if="filepath">
    Enregistrer
</span>
                    </div>
                </div>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="col-lg-12">
                        <router-link :to="{ name: 'UserPosts' }">
                            <span for="dechet" class="nb-dechet">122 déchêts postés</span>
                        </router-link>
                        |
                        <router-link :to="{ name: 'UserBookmarks' }">
                            <span for="dechet" class="nb-dechet">122 déchêts sauvegardés</span>
                        </router-link>
                        |
                        <router-link :to="{ name: 'UserTrophies' }">
                            <span for="reward" class="nb-dechet">1 trophé obtenu</span> 
                        </router-link>
                    </div>
                </div>
            </div>
        </section>    
        <hr>
        <!-- posts -->
        <section class="container">
            <div class="row">
                <router-view></router-view>
            </div>
        </section>
    </div>
</template>

Server-side code

Route | Dummy Controller

rummykhan rummykhan · Accepted Answer · 2017-11-03T05:19:43

Well there is nothing wrong with your code, its just that response()->json() is not able to convert Illuminate\Http\UploadedFile to json.

Your file is being uploaded, try to check it like

return response()->json([
   'avatar' => $request->file('avatar')->getClientOriginalName()
]);

and you'll get the name of the file in response.

Reason Reason for why it is unable to convert Illuminate\Http\UploadedFile to JSON response is it doesn't implements Illuminate\Contracts\Support\Jsonable

Vue-resource + FormData File Upload with Laravel Backend

1 Answers