thetutlage / vue-clip

Simple and hackable file uploader for VueJs. Supports Vue >= 2.1
http://vueclip.adonisjs.com/
219 stars 40 forks source link

Store files as data in parent through props #4

Open andrisi opened 7 years ago

andrisi commented 7 years ago

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.

andrisi commented 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.

thetutlage commented 7 years ago

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>
andrisi commented 7 years ago

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.

thetutlage commented 7 years ago

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.

thetutlage commented 7 years ago

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

andrisi commented 7 years ago

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.

thetutlage commented 7 years ago

Nope, you also get reactivity even when your component also makes use of that file object. Just try it once 😃

andrisi commented 7 years ago

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.