diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index 949f5d64..5df68f2a 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -1,30 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
-import { TUploadAtom, UploadStatus, useBindUploadAtom } from '../../state/upload';
+import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
 import { getFileTypeIcon } from '../../utils/common';
 
 type UploadCardRendererProps = {
-  file: TUploadContent;
   isEncrypted?: boolean;
   uploadAtom: TUploadAtom;
   onRemove: (file: TUploadContent) => void;
+  onComplete?: (upload: UploadSuccess) => void;
 };
 export function UploadCardRenderer({
-  file,
   isEncrypted,
   uploadAtom,
   onRemove,
+  onComplete,
 }: UploadCardRendererProps) {
   const mx = useMatrixClient();
-  const { upload, startUpload, cancelUpload } = useBindUploadAtom(
-    mx,
-    file,
-    uploadAtom,
-    isEncrypted
-  );
+  const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
+  const { file } = upload;
 
   if (upload.status === UploadStatus.Idle) startUpload();
 
@@ -33,6 +29,12 @@ export function UploadCardRenderer({
     onRemove(file);
   };
 
+  useEffect(() => {
+    if (upload.status === UploadStatus.Success) {
+      onComplete?.(upload);
+    }
+  }, [upload, onComplete]);
+
   return (
     <UploadCard
       radii="300"
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 8fcfbc97..32a3ba9c 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -56,7 +56,13 @@ import {
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import {
+  TUploadContent,
+  encryptFile,
+  getImageInfo,
+  getMxIdLocalPart,
+  mxcUrlToHttp,
+} from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
@@ -407,7 +413,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                       <UploadCardRenderer
                         // eslint-disable-next-line react/no-array-index-key
                         key={index}
-                        file={fileItem.file}
                         isEncrypted={!!fileItem.encInfo}
                         uploadAtom={roomUploadAtomFamily(fileItem.file)}
                         onRemove={handleRemoveUpload}
diff --git a/src/app/state/upload.ts b/src/app/state/upload.ts
index 13869afb..810c0d2e 100644
--- a/src/app/state/upload.ts
+++ b/src/app/state/upload.ts
@@ -99,11 +99,11 @@ export type TUploadAtom = ReturnType<typeof createUploadAtom>;
 
 export const useBindUploadAtom = (
   mx: MatrixClient,
-  file: TUploadContent,
   uploadAtom: TUploadAtom,
   hideFilename?: boolean
 ) => {
   const [upload, setUpload] = useAtom(uploadAtom);
+  const { file } = upload;
 
   const handleProgress = useThrottle(
     useCallback((progress: UploadProgress) => setUpload({ progress }), [setUpload]),