diff --git a/src/component/internal/messages.ts b/src/component/internal/messages.ts
index ff88fde3..b0fe5566 100644
--- a/src/component/internal/messages.ts
+++ b/src/component/internal/messages.ts
@@ -9,6 +9,9 @@ import NekoState from '../types/state'
 export interface NekoEvents {
   ['internal.websocket']: (state: 'connected' | 'connecting' | 'disconnected') => void
   ['internal.webrtc']: (state: 'connected' | 'connecting' | 'disconnected') => void
+  ['upload.drop.started']: () => void
+  ['upload.drop.progress']: (progressEvent: ProgressEvent) => void
+  ['upload.drop.finished']: (error: Error | null) => void
   ['system.disconnect']: (message: string) => void
   ['member.created']: (id: string) => void
   ['member.deleted']: (id: string) => void
diff --git a/src/component/main.vue b/src/component/main.vue
index 8654db16..c45a640a 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -235,8 +235,20 @@
       return this.api.members
     }
 
-    uploadDrop({ x, y, files }: { x: number; y: number; files: Array<Blob> }) {
-      this.api.room.uploadDrop(x, y, files)
+    async uploadDrop({ x, y, files }: { x: number; y: number; files: Array<Blob> }) {
+      try {
+        this.events.emit('upload.drop.started')
+
+        await this.api.room.uploadDrop(x, y, files, {
+          onUploadProgress: (progressEvent: ProgressEvent) => {
+            this.events.emit('upload.drop.progress', progressEvent)
+          },
+        })
+
+        this.events.emit('upload.drop.finished', null)
+      } catch (err) {
+        this.events.emit('upload.drop.finished', err)
+      }
     }
 
     /////////////////////////////