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>