How to access parent attribute from inside Vue dropzone js component?

594 Views Asked by At

I´m trying to access a parent component attribute inside the Vue dropzone component. I want to access the photo field of the form from inside the Vue dropzone in order to assign the picture to the form photo field. The code follows:

I´m using a v-form with a picture field:

JavaScript:

<script>
import vueDropzone from "vue2-dropzone";
export default {
 data() {

  return {
    form: new Form({
      id: "",
      name: "",
      email: "",
      password: "",
      type: "",
      bio: "",
      photo: ""
  }),


  dropOptions: {
  url: "https://httpbin.org/post",
  maxFilesize: 2, // MB
  maxFiles: 4,
  chunking: true,
  chunkSize: 500, // Bytes
  autoProcessQueue:false,
  addRemoveLinks: true,
  dictDefaultMessage: "<i class='fa fa-cloud-upload'></i>Arraste ou clique aqui!!!!!!!!",
  addRemoveLinks: true,
  duplicateCheck: true,
  init: function () {
    console.log('firstthis ',this)

    this.on("addedfile", function(file) {
       console.log("Added file ", file); 
      //  globalThis.form.photo = file // I want to assign the value of the file to the form field
    });
    // this.vdropzone-duplicate-file(file)
  }
},
  photoChanged: false,
};


},

components: {
  vueDropzone
},

HTML:

<div class="form-group">
    <label for="dropzone" class="col-md-12 control-label">Choose a profile 
    picture:</label>

<div id="dropzonedivid">
    <vue-dropzone id="dropvue" :options="dropOptions"></vue-dropzone>
</div>

</div>
0

There are 0 best solutions below