[Vuejs]-Uncaught typeerror Illegal Invocation when trying to upload image in vue js?

by

0👍

I didn’t try with event but you can achieve with normal function, call without event v-on:submit="imgSubmit", imgSubmit: function() {

And get file by id, Also change in ajax

var imagefile = document.querySelector('#wizard-picture');
if (imagefile.files && imagefile.files[0]) {
    data.append("file", imagefile.files[0]);
}
$.ajax({
processData: false,  // tell jQuery not to process the data
contentType: false,  // tell jQuery not to set contentType
........
........

Although You had variable(for e) collision for function imgSubmit and ajax

Adding your code snippet 

var app = new Vue({
el: "#submitBox",
  data: {
  pid: '',
  image: '',
  },
  methods: {
    imgSubmit: function(e) {
      var vm = this;
      let data = new FormData();
      data.append('name', 'image');
      data.append('file', e.target.files[0]);
      console.log(data.get('file'));
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="submitBox">
<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="imgSubmit($event);">                                
        <h4 class="info-text">Give us somme images and videos ? </h4>
        <div class="row">  
             <div class="col-sm-6">
                <div class="form-group">
                    <label for="property-images">Chose Images :</label>
                   <input type="file" id="wizard-picture"  @change="imgSubmit($event)" multiple>
                    <p class="help-block">Select multipel images for your property .</p>
                </div>
            </div>
            <div class="col-sm-6"> 

            </div>
            <div class="wizard-footer">
             <div class="pull-right">
         <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
     </div>


</div>
</div></form> 
</div>
👤Niklesh Raut

Leave a comment