Currently, I am working on a Laravel page that utilizes Vue for the overall functionality and axios post for form submission. However, I've encountered a complex situation.
Within my page, there is a standard dropzone (using plain JS dropzone code) where I upload images. As I drop an image, the console successfully logs the file name. The challenge arises when I try to transfer that filename into a variable or object in my Vue code.
The dropzone code looks like this:
Dropzone.options.imageWithZones = {
init: function() {
this.on("addedfile",
function(file) {
console.log(file.name);
});
}
};
Here is the relevant part of my Vue code, where I need to assign the file name to ImageZoneName:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
el: "#commonDiv",
data() {
return{
ImageZoneName: [],
}
},
........
I am seeking advice on the most straightforward approach to capture the file name when it's added to the dropzone and set the value of vue's ImageZoneName object with that filename.