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

can you show me the server side code please?

Rehan Manzoor
– Rehan Manzoor

2017-11-03 03:37:08 +00:00
Commented Nov 3, 2017 at 3:37 — Rehan Manzoor
– Rehan Manzoor, Commented Nov 3, 2017 at 3:37
I updated my post :)

Daedelus
– Daedelus

2017-11-03 03:52:28 +00:00
Commented Nov 3, 2017 at 3:52 — Daedelus
– Daedelus, Commented Nov 3, 2017 at 3:52

Rehan Manzoor · Accepted Answer · 2017-11-03 05:19:43Z

1

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

answered Nov 3, 2017 at 5:19

Rehan Manzoor

2,7833 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daedelus Over a year ago

I understand what you mean but $request->file('avatar') return null, I tried to call _toString() and getClientOriginalName() .. Without sucess I take a 500 with : "message": "Call to a member function getClientOriginalName() on null"

Rehan Manzoor Over a year ago

Can you show me the error please, because I've replicated your code on my machine to test and it was working perfectly well.

dariush Over a year ago

saved me the day!

Collectives™ on Stack Overflow

Vue-resource + FormData File Upload with Laravel Backend

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related