CODEWITHSUNDEEP
javascriptphplaravelvue.jsform-data
Jamie
Jamie

Reputation: 10886

Laravel + vue.js file upload put

I've successful uploaded files with vue.js 1.0 like this (post request):

store () {
            this.storingMessage = true;
            var form = new FormData();
            form.append('subject', this.message.subject);
            form.append('message', this.message.message);
            form.append('topic_id', this.message.topic_id);

            for(var key in this.message.attachment) {
                form.append('attachment[' + key + ']', this.message.attachment[key]);
            }

            MessageService.store(this, form);
        }

But when I try to update files like this (put request):

update () {
            this.updatingMessage = true;
            var form = new FormData();
            form.append('subject', this.message.subject);
            form.append('message', this.message.message);
            form.append('slug', this.message.slug);

            for(var key in this.message.attachment) {
                form.append('attachment[' + key + ']', this.message.attachment[key]);
            }

            MessageService.update(this, form);
        }

And in my controller I dd($request->all()) result is [].

So why is it not working with put????!?!?!?

Services:

store (context, form) {
        return Vue.http.post('/api/message', form)
            .then(({data}) => {
                context.success();
            }, (error) => {
                context.error(error.data);
            });
    },

    update (context, form) {
        return Vue.http.put('/api/message/' + form.get('slug'), form)
            .then(({data}) => {
                context.success();
            }, (error) => {
                context.error(error.data);
            });
    }

Upvotes: 1

Views: 1162

Answers (1)

WebKenth
WebKenth

Reputation: 136

According to a Laracast Discussion it would seem there is a problem when using the put method and a formData object a way to avoid this is with method spoofing.

Try this instead, in your update method

let data = { _method : 'PATCH' , form : form}

return Vue.http.post('/api/message/' + form.get('slug'), data)
    .then(({data}) => {
        context.success();
    }, (error) => {
        context.error(error.data);
    });

your data in your controller will be available as form in this case

$request->form

Upvotes: 1

Related Questions