broadcast new files to the frontend after file was remotely uploaded

resources/js/store/modules/broadcasting.js

@@ -1,48 +1,56 @@
-import {events} from "../../bus";
+import { events } from '../../bus'
 
 const defaultState = {
-    isRunningConnection: false,
+    isBroadcasting: false,
 }
 
 const actions = {
     runConnection: ({ commit, getters, dispatch }) => {
-
         commit('SET_RUNNING_COMMUNICATION')
 
-		Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
-			.notification((notification) => {
+        Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
+            .listen('.file.created', (event) => {
+                // If user is located in same directory as remote upload was called, then show the files
+                if (
+                    (!getters.currentFolder && !event.file.data.attributes.parent_id) ||
+                    (getters.currentFolder && event.file.data.attributes.parent_id === getters.currentFolder.data.id)
+                ) {
+                    // Add received item into view
+                    commit('ADD_NEW_ITEMS', event.file)
+                }
+            })
+            .notification((notification) => {
+                // Play audio
+                new Audio('/audio/blop.wav').play()
 
-				// Play audio
-				new Audio('/audio/blop.wav').play();
+                // Call toaster notification
+                events.$emit('notification', {
+                    data: {
+                        type: notification.category,
+                        id: notification.id,
+                        attributes: {
+                            action: notification.action,
+                            description: notification.description,
+                            title: notification.title,
+                            category: notification.category,
+                        },
+                    },
+                })
 
-				// Call toaster notification
-				events.$emit('notification', {
-					data: {
-						type: notification.category,
-						id: notification.id,
-						attributes: {
-							action: notification.action,
-							description: notification.description,
-							title: notification.title,
-							category: notification.category,
-						},
-					},
-				})
-
-				// Reload user data to update notifications
-				dispatch('getAppData')
-			});
+                // Reload user data to update notifications
+                dispatch('getAppData')
+            })
     },
 }
 
 const mutations = {
     SET_RUNNING_COMMUNICATION(state) {
-        state.isRunningConnection = true
+        state.isBroadcasting = true
     },
 }
 
 const getters = {
-    isRunningConnection: (state) => state.isRunningConnection,
+    isBroadcasting: (state) => state.isBroadcasting,
 }
 
 export default {

resources/js/store/modules/userAuth.js

@@ -18,7 +18,7 @@ const actions = {
                     commit('RETRIEVE_USER', response.data)
                     commit('UPDATE_NOTIFICATION_COUNT', response.data.data.relationships.unreadNotifications.data.length)
 
-                    if (! getters.isRunningConnection && getters.config.broadcasting === 'pusher') {
+                    if (! getters.isBroadcasting && getters.config.broadcasting === 'pusher') {
                         dispatch('runConnection')
                     }
                 })