Vue event bus, uploading files handles from file service.

assets/controllers/filedropzone_controller.js

@@ -1,4 +1,4 @@
-// mydropzone_controller.js
+// filedropzone_controller.js
 
 import { Controller } from '@hotwired/stimulus';
 import axios from 'axios';
@@ -19,13 +19,7 @@ export default class extends Controller {
 
     _onConnect(event) {
         // The dropzone was just created
-        // console.info(event);
         console.info('onconnect');
-        //
-        // axios.get('/book/search/modyfikowany+węgiel').then(response => {
-        //     console.info(response.data);
-        // });
-
     }
 
     _onChange(event) {
@@ -36,14 +30,13 @@ export default class extends Controller {
                 'Content-Type': 'multipart/form-data'
             }
         }).then(() => {
-            event.target.querySelector('.dropzone-preview-button').click()
+            event.target.querySelector('.dropzone-preview-button').click();
+            window.EventBus.$emit('fileUploaded');
         })
-
     }
 
     _onClear(event) {
         // The dropzone has just been cleared
-        // console.info(event);
         console.info('onclear');
     }
 }

assets/js/event-bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+window.EventBus = new Vue();
+export const EventBus = window.EventBus;

assets/js/pages/book.vue

@@ -47,7 +47,6 @@ export default {
   },
   methods: {
     search: function () {
-      console.info(this.searchTerm);
       axios.get('/book/search/' + this.searchTerm).then(response => {
         this.books = response.data;
       });

assets/js/pages/files.vue

@@ -21,7 +21,8 @@
           <td class="text-end">{{ formatSize(file.fileSize) }}</td>
           <td>{{ file.extension }}</td>
           <td><a :href="'/file/'+ file.id" class="link-secondary">download</a></td>
-          <td><a :href="'/file/delete/'+file.id" class="link-danger">remove</a></td>
+          <td><a :href="'/file/delete/'+file.id" @click.prevent="deleteFile(file.id)" class="link-danger">remove</a>
+          </td>
         </tr>
         </tbody>
       </table>
@@ -31,9 +32,13 @@
 
 <script>
 import axios from 'axios';
+import {EventBus} from "../event-bus";
 
 export default {
   name: 'Files',
+  components: {
+    EventBus
+  },
   data() {
     return {
       files: []
@@ -42,9 +47,15 @@ export default {
   mounted() {
     this.getFiles();
   },
+  created() {
+    window.EventBus.$on('fileUploaded', this.getFiles);
+  },
   methods: {
+    deleteFile: function (fileId) {
+      axios.get(window.location.origin + '/file/delete/' + fileId).then(() => this.getFiles())
+    },
     formatSize: function (bytes) {
-      if (bytes == 0) {
+      if (bytes === 0) {
         return "0.00 B";
       }
       var e = Math.floor(Math.log(bytes) / Math.log(1024));