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.

Reply to

Use Markdown with GitHub-flavored code blocks.