broadcast new files to the frontend after file was remotely uploaded

resources/js/components/RemoteUpload/RemoteUploadPopup.vue

@@ -93,15 +93,21 @@ export default {
 					parent_id: parentId,
 				})
 				.then(() => {
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('remote_download_processed'),
-					})
+					// If broadcasting
+					if (this.$store.getters.isBroadcasting) {
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('remote_download_processed'),
+						})
+					}
+
+					// If broadcasting is not set
+					if (!this.$store.getters.isBroadcasting) {
+						// Reload data
+						this.$getDataByLocation()
+					}
 
 					events.$emit('popup:close')
-
-					// Reload data
-					this.$getDataByLocation()
 				})
 				.catch((error) => {
 					if (error.response.status === 422) {
@@ -129,6 +135,8 @@ export default {
             this.$nextTick(() => {
 				setTimeout(() => this.$refs.textarea.focus(), 100)
             })
+
+			console.log(this.$store.getters.isBroadcasting);
         })
     },
 }

resources/js/components/UI/Popover/PopoverItem.vue

@@ -3,7 +3,7 @@
         <!--Overlay component-->
         <div
             @click.capture="hidePopover"
-            class="absolute top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground"
+            class="absolute top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground select-none"
             :class="{ 'right-0': side === 'left', 'left-0': side === 'right' }"
         >
             <slot />

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')
                     }
                 })