Open andrisi opened 7 years ago
This would be also helpful when deleting/changing existing images. For now file.setAttibute calls don't seem to have an effect on the files array when called in the onComplete function, and thus the display, and so if I want to add actions (like rotate/crop/delete) or drag and drop inside the image list, I am in trouble. Or I did not understand the docs. Instead of relying on events like onRemovedFile I could just user watch functions - the vue-way - and act as I wish.
Yo can still do it by listening for an event called onAddedFile
. Which returns the file object that you can store inside the data of the parent component.
Example
<template>
<vue-clip :on-added-file="addedFile">
</vue-clip>
</template>
<script>
export default {
data: function () {
return {
files: []
}
}
methods: {
addedFile (file) {
this.files.push(file)
}
}
}
</script>
Yes, I thought about it - but it does not seem to be the Vue-way. Why rely on custom events, when Vue is all about reactive data? You shall just store data (on additions, and later changing on upload), and let others decide about they way to handle that. Again, watch functions are just for that. This addFile method seems hackish. Then you'd need to devise ways to indentify the file when deleting it.
Nope it is not hackish at all. Vue itself encourage to make use of events to talk between components. Why vue-clip
should try to mutate your data property. That's against the general programming idea.
Also you don't loose any reactivity. This is just one event to get the file instance and all state updates on that file instance are reactive.
For example:- The file upload progress or status change after uploading to server
Now I understood, setAttribute stores data under the customAttributes. And ok, I get reacitvity on that file object, but only inside your component. Using an optional array passed as a props element to store files would just make your component more flexible, and would require less work in some cases - this is your goal after all, isn't it? Otherwise it's a very useful component, and thanks for that.
Nope, you also get reactivity even when your component also makes use of that file object. Just try it once 😃
I see. Then the only point missing is what I asked initially, the props thing. Are you really so much against it? If you have a :files prop, use that, otherwise it's in .data. I added it in my local copy. I do understand the need for event based separation of parent and component, but in some cases - like hen you create a component based on components, you just don't need that. The main component can handle all data, and provide the separation, but doing it inside it is too much. In my opinion.
Would it be possible to move the files array into the parent, so it could use it for other purposes too? Just as the example under "basic usage" gets the options from the parent as a component prop.
Use case: we need to enable drag and drop reordering of already uploaded images, and then save this order along with the images. So vue-clip would store files in an array on the root data, and then we'd create an ordered array (computed), and base the display on that.