Oct 22, 2016

Level 33

Vue.js file upload

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)

zachleigh

9 years ago

Best Answer

Level 47

This is my onChange method:

onImageChange (ele) {
            this.errors = {};
            
            let files = ele.target.files || ele.dataTransfer.files;

            let prop = this.makeTempPropName(ele.target.name);

            if (!files.length) {
                return;
            }

            let formData = new FormData();

            formData.append('_token', this.token);

            formData.append('image', files[0]);

            this.form.append(ele.target.name, files[0]);

            this.$http.post('/tempimages', formData).then((response) => {
                this[prop] = response.data;
            }, (response) => {
                this.setErrors({ [ele.target.name]: response.data['image']});
            });
        },

2 likes

Lars-Janssen

9 years ago

Level 33

@zachleigh thanks that really helps me a lot. With one file it works now but how could I do this with multiple files?

bashy

9 years ago

Level 65

@lars64 Do a foreach on $attachments

1 like

Lars-Janssen

9 years ago

Level 33

@bashy not possible because I only receive on if I do it like that ^ :

UploadedFile {#392
  -test: false
  -originalName: "207811.pdf"
  -mimeType: "application/pdf"
  -size: 17179
  -error: 0
  path: "/tmp"
  filename: "phpwVNagI"
  basename: "phpwVNagI"
  pathname: "/tmp/phpwVNagI"
  extension: ""
  realPath: "/tmp/phpwVNagI"
  aTime: 2016-10-22 13:12:00
  mTime: 2016-10-22 13:12:00
  cTime: 2016-10-22 13:12:00
  inode: 1439094
  size: 17179
  perms: 0100600
  owner: 900
  group: 900
  type: "file"
  writable: true
  readable: true
  executable: false
  file: true
  dir: false
  link: false
}

(I've uploaded multiple files)

Lars-Janssen

9 years ago

Level 33

@bashy never mind working now. Did it like this:

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

Thanks for helping

muhammadrza

9 years ago

Level 1

Hello, this.makeTempPropName is not a function where is missing this fuction?

shabany

8 years ago

Level 5

Here is another great article on how to do upload multiple files with vue js 2 https://medium.com/@adnanxteam/how-to-upload-multiple-files-via-ajax-vuejs-and-laravel-5-5-file-management-d218c3bbb71c

eddieace

8 years ago

Level 11

Here is my solution.

imgUpload(e) {
    if (!e.target.files.length)
        return;
    var data = new FormData();
    data.append('image', e.target.files[0]);
    axios.post('/image', data)
    .then(response => { this.ad.image = response.data.path })
    .catch(error => { console.log(error) });
},

<input type="file" @change="imgUpload">

1 like

Please or to participate in this conversation.