0

I am developing SPA using VueJS, Laravel 5.3 and Passport Authentication module.

My Code upto now. and I can get file name selected. Working fine but how to send selected files to make post request to upload the files to the server?

<script>
  import {mapState} from 'vuex'
  export default{
    computed: {
      ...mapState({
        userStore: state => state.userStore
      })
    },
    data () {
      return {
        fax: {
          files: '',
          image: ''
        }
      }
    },
    methods: {
      onFileChange (e) {
        this.fax.files = e.target.files || e.dataTransfer.files
        if (!this.fax.files.length) {
          return
        }
        console.log(this.fax.files)
      }
    },
    created () {
      this.$store.dispatch('setUserDid')
    }
  }
</script>

<template>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple @change="onFileChange">
<input type="text" name="group" >

<ul>
    <li v-for="file in fax.files">
        {{ file.name }}
    </li>
</ul>  
</template>

Upto now, I can get file names displayed on my page using {{fax.files}}. How to make post request so that i can catch the file from my server side (API endpoint)? I tried googling and coding but i could not able to do.

BetaDev
  • 4,516
  • 3
  • 21
  • 47
  • Take a reference from this codepen https://codepen.io/Atinux/pen/qOvawK/ – imrealashu Dec 20 '16 at 19:47
  • 1
    yeah but my question is how can i post these files to server (make POST request) so that i can save files to the server. and if i use your code i got new FileReader not found error. – BetaDev Dec 20 '16 at 19:51
  • i can cosole.log(myFiles) i need to post that files to server. And from server side code i want to save those files. – BetaDev Dec 20 '16 at 19:52
  • Im trying to accomplish the same - seems the only solution is to use the FormData object: http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax – Andrew Mar 17 '17 at 10:16

1 Answers1

0

Ok I managed to get this working. Before the file upload I had an array that I was posting via Ajax as you can see below. I modified it to look like the below in order handle file uploads.

Basically you need to send through a FormData object when uploading files. Uses a FormData object by default when submitting a form - but when only posting a array you need to first append those array values to the FormData object.

You should be able to make sense of the code below...

var formData = new FormData();

                jQuery.each(this.comment.file, function(i, file) {
                    formData.append('file[]', file);
                });
                formData.append('body', this.comment.body);
                formData.append('comments_room_id', this.comment.comments_room_id);
                formData.append('id', this.comment.id);
                formData.append('name', this.comment.name);

                this.$http.post('/api/comment/store', formData).then(function (response) {
Andrew
  • 1,126
  • 11
  • 28