1

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>
halfer
  • 19,824
  • 17
  • 99
  • 186
Adriel Werlich
  • 1,982
  • 5
  • 15
  • 30
  • I am not sure I understood what you want to achieve. Props doesn't do the trick? – Adam Orłowski Dec 01 '18 at 18:37
  • `this.$parent` ? Although that's generally considered a code smell. – Stephen Thomas Dec 01 '18 at 23:08
  • @StephenThomas ...this.$parent is returning null.. – Adriel Werlich Dec 02 '18 at 02:00
  • @AdamOrlov... I´m still don´t have experience working with props... I´m still trying to figure it out actually... vue-dropzone have some built-ins props like the dropOptions... but I´m still not sure how I could send the image back to the parent component that has the form with the user profile – Adriel Werlich Dec 02 '18 at 02:00
  • If `this.$parent` is `null`, then the component doesn't have a parent component. So you can't access a parent component's attributes. – Stephen Thomas Dec 02 '18 at 21:52
  • @StephenThomas... yes... I found the answer. I´m using a custom image uploader-- found a very nice tutorial here (https://www.youtube.com/watch?v=YmyAEyGL33U&list=PLJpBh2VJhy5w6NPWuY8wz6LV1k-zLw5r5) ... now I´m being able to use the this.$parent notation and it´s working... because with the vue dropzone I wasn´t being able to get the parent, but now I´m not using vue uploader and it´s working... thanks anyway... – Adriel Werlich Dec 02 '18 at 23:02

0 Answers0