Show image preview in upload window (#2231)

* memoize metadata callback properly

* add image preview on upload

* show spoiler image button inside image preview
This commit is contained in:
Ajay Bura 2025-02-26 21:43:43 +11:00 committed by GitHub
parent ccfe30cd68
commit 5c94471956
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 71 additions and 38 deletions

View file

@ -70,6 +70,7 @@ import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
import { useFileDropZone } from '../../hooks/useFileDrop';
import {
TUploadItem,
TUploadMetadata,
roomIdToMsgDraftAtomFamily,
roomIdToReplyDraftAtomFamily,
roomIdToUploadItemsAtomFamily,
@ -220,6 +221,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
[roomId, editor, setMsgDraft]
);
const handleFileMetadata = useCallback(
(fileItem: TUploadItem, metadata: TUploadMetadata) => {
setSelectedFiles({
type: 'REPLACE',
item: fileItem,
replacement: { ...fileItem, metadata },
});
},
[setSelectedFiles]
);
const handleRemoveUpload = useCallback(
(upload: TUploadContent | TUploadContent[]) => {
const uploads = Array.isArray(upload) ? upload : [upload];
@ -433,13 +445,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
key={index}
isEncrypted={!!fileItem.encInfo}
fileItem={fileItem}
setMetadata={(metadata) =>
setSelectedFiles({
type: 'REPLACE',
item: fileItem,
replacement: { ...fileItem, metadata },
})
}
setMetadata={handleFileMetadata}
onRemove={handleRemoveUpload}
/>
))}