[Vuejs]-Global media library returns array VueJS

by

0👍

✅

To make it simple, in your modal manager, listen to the change event on your file input.

<!-- ModalManager.vue -->
<template>
  <div class="modal">
    <input type="file" @change="$emit('selectedFiles', $event.target.files)">
  </div>
</template>

Then from your parent who implemented the modal manager, you can get the file list on the selectedFiles event.

<!-- ArticleImage.vue -->
<template>
  <ModalManager
    @selectedFiles="onSelectedFiles"
    v-if="modalOpen">
</template>

Easy now to deal with a FileList

export default {
  components: {
    ModalManager
  }
  data () {
    return {
      modalOpen: false,
      articleImageData: null,
    }
  },
  methods: {
    onSelectedFiles (fileList) {
      console.log('Received a FileList from ModalManager', fileList)
    }
  }
}

If you need a deeper component management for your modals, you either propagate your events from bottom to top with something like this:

<element @childEvent="$emit('childEvent')">

But the idea stays the same

Leave a comment