<template>
  <div>
    <file-pond
      name="bin"
      ref="pond"
      allow-multiple="false"
      accepted-file-types="video/mp4, video/avi"
      max-files="1"
      :server="server"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
      v-on:processfile="onload"
    />
  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

// Create component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
);

export default {
  name: 'app',
  data() {
    return {
      myFiles: [],
      server: {
        url: `${this.$apiRootPath}upload/video`,
        process: {},
      },
    };
  },
  methods: {
    handleFilePondInit() {
      console.log('FilePond has initialized');
      // FilePond instance methods are available on `this.$refs.pond`
    },
    onload(e, r) {
      console.log(r);
      // this.$store.dispatch(r);
    },
  },
  components: {
    FilePond,
  },
};
</script>

<style scoped>
.filepond--item {
  width: calc(50% - 0.5em);
}
.filepond--panel-root {
  background-color: transparent;
  border: 2px solid #2c3340;
}
</style>