Removed event bus and switched to vuex. Implemented vue dropzone.

assets/js/pages/files.vue

@@ -25,54 +25,63 @@
           <td class="text-end">{{ file.file_size_human }}</td>
           <td>{{ file.extension }}</td>
           <td><a :href="'/file/'+ file.id" class="link-secondary">download</a></td>
-          <td><a :href="'/file/delete/'+file.id" @click.prevent="deleteFile(file.id)" class="link-danger">remove</a>
+          <td><a @click.prevent="deleteFile(file.id)" class="link-danger cursor-pointer">remove</a>
           </td>
         </tr>
         </tbody>
       </table>
     </div>
+    <vue-dropzone v-if="bookId"
+        ref="myVueDropzone"
+        id="dropzone"
+        :options="dropzoneOptions"
+        :useCustomSlot="true"
+        @vdropzone-success="vdropzoneSuccess"
+    >
+      <div class="dropzone-custom-content">
+        <h3 class="dropzone-custom-title">Drag and drop to upload content!</h3>
+        <div class="subtitle">
+          ...or click to select a file from your computer
+        </div>
+      </div>
+    </vue-dropzone>
   </div>
 </template>
 
 <script>
-import axios from 'axios';
-import {EventBus} from "../event-bus";
+import vue2Dropzone from "vue2-dropzone";
+import {mapActions, mapState} from "vuex";
 
 export default {
   name: 'Files',
   components: {
-    EventBus
+    vueDropzone: vue2Dropzone
   },
   data() {
     return {
-      files: []
+      dropzoneOptions: {
+        capture: 'image/',
+        url: '/book/' + this.bookId,
+        thumbnailWidth: 150,
+        maxFilesize: 50.5,
+        acceptedFiles: '.pdf, .epub, .mobi'
+      }
     }
   },
   props: {
     bookId: {type: Number, default: null}
   },
   mounted() {
-    this.getFiles();
+    this.getFiles(this.bookId);
   },
-  created() {
-    window.EventBus.$on('fileUploaded', this.getFiles);
+  computed: {
+    ...mapState('filemodule', ['files'])
   },
   methods: {
-    deleteFile: function (fileId) {
-      axios.get(window.location.origin + '/file/delete/' + fileId).then(() => this.getFiles())
-    },
-    getFiles: function () {
-      axios.get(this.getFilesEndpoint(),  {
-        headers: {
-          'accept': 'application/json'
-        }
-      }).then(response => this.files = response.data)
-    },
-    getFilesEndpoint: function () {
-      if (this.bookId) {
-        return `/api/books/${this.bookId}/files`;
-      }
-      return `/api/files`;
+    ...mapActions('filemodule', ['getFiles', 'deleteFile']),
+    vdropzoneSuccess(file) {
+      this.$refs.myVueDropzone.removeFile(file);
+      this.getFiles(this.bookId);
     }
   }
 }