Vue.js file upload

Posted 2 years ago by Lars-Janssen

Hi,

I'm trying to upload a file with vue.js 1.0 like this:

<template>
<div>
    <form class="NewMessage__core" @submit.prevent="store" role="form" enctype="multipart/form-data">
        <input
                type="text"
                name="name"
                class="Form-group-item"
                v-model="message.subject"
                placeholder="Onderwerp" required>
    
        <input type="file" name="attachment[]" id="attachment" v-model="message.attachment" v-on:change="onFileChange" multiple>
        <button type="submit" method="post" class="Btn Btn-main" :disabled="storingMessage">
            Post
        </button>
    </form>
</div>    
</template>

<script>
import MessageService   from '../../Services/Message/MessageService';

export default {

    components: {Bar},

    data () {
        return {
            storingMessage: false,
            message: {attachment: ''},
            topic: {}
        }
    },

    methods: {
        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);
            form.append('attachment', this.message.attachment);

            MessageService.store(this, form);
        },

        onFileChange(event) {
            this.message.attachment = event.target.files || event.dataTransfer.files;
        }
    }
}
</script>

But when I try this in my controller:

$attachments = Input::file('attachment');
dd($attachments);

Result is null!

But when I dd($request->all()) result is:

So how is it possible that I do not receive the image?

Source(https://dericcain.com/blog/multiple-file-uploads-with-vue-js-and-laravel)

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.