mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 22:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show file size exceeds error on upload

Browse source
This commit is contained in:
Ajay Bura 2025-08-04 21:14:41 +05:30
parent 6a27720709
commit 62ce5628f8
2 changed files with 35 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/components/upload-card/CompactUploadCardRenderer.tsx
View file

@ -5,6 +5,7 @@ import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix'; import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common'; import { getFileTypeIcon } from '../../utils/common';
import { useMediaConfig } from '../../hooks/useMediaConfig';
type CompactUploadCardRendererProps = { type CompactUploadCardRendererProps = {
isEncrypted?: boolean; isEncrypted?: boolean;
@ -19,10 +20,16 @@ export function CompactUploadCardRenderer({
onComplete, onComplete,
}: CompactUploadCardRendererProps) { }: CompactUploadCardRendererProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const mediaConfig = useMediaConfig();
const allowSize = mediaConfig['m.upload.size'] || Infinity;
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted); const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
const { file } = upload; const { file } = upload;
const fileSizeExceeded = file.size >= allowSize;
if (upload.status === UploadStatus.Idle) startUpload(); if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
startUpload();
}
const removeUpload = () => { const removeUpload = () => {
cancelUpload(); cancelUpload();
@ -76,7 +83,7 @@ export function CompactUploadCardRenderer({
</> </>
) : ( ) : (
<> <>
{upload.status === UploadStatus.Idle && ( {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
<CompactUploadCardProgress sentBytes={0} totalBytes={file.size} /> <CompactUploadCardProgress sentBytes={0} totalBytes={file.size} />
)} )}
{upload.status === UploadStatus.Loading && ( {upload.status === UploadStatus.Loading && (
@ -87,6 +94,14 @@ export function CompactUploadCardRenderer({
<Text size="T200">{upload.error.message}</Text> <Text size="T200">{upload.error.message}</Text>
</UploadCardError> </UploadCardError>
)} )}
{upload.status === UploadStatus.Idle && fileSizeExceeded && (
<UploadCardError>
<Text size="T200">
The file size exceeds the limit. Maximum allowed size is {bytesToSize(allowSize)},
but the uploaded file is {bytesToSize(file.size)}.
</Text>
</UploadCardError>
)}
</> </>
)} )}
</UploadCard> </UploadCard>

21
src/app/components/upload-card/UploadCardRenderer.tsx
View file

@ -4,13 +4,14 @@ import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload'; import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix'; import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common'; import { bytesToSize, getFileTypeIcon } from '../../utils/common';
import { import {
roomUploadAtomFamily, roomUploadAtomFamily,
TUploadItem, TUploadItem,
TUploadMetadata, TUploadMetadata,
} from '../../state/room/roomInputDrafts'; } from '../../state/room/roomInputDrafts';
import { useObjectURL } from '../../hooks/useObjectURL'; import { useObjectURL } from '../../hooks/useObjectURL';
import { useMediaConfig } from '../../hooks/useMediaConfig';
type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void }; type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) { function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
@ -75,12 +76,18 @@ export function UploadCardRenderer({
onComplete, onComplete,
}: UploadCardRendererProps) { }: UploadCardRendererProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const mediaConfig = useMediaConfig();
const allowSize = mediaConfig['m.upload.size'] || Infinity;
const uploadAtom = roomUploadAtomFamily(fileItem.file); const uploadAtom = roomUploadAtomFamily(fileItem.file);
const { metadata } = fileItem; const { metadata } = fileItem;
const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted); const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
const { file } = upload; const { file } = upload;
const fileSizeExceeded = file.size >= allowSize;
if (upload.status === UploadStatus.Idle) startUpload(); if (upload.status === UploadStatus.Idle && !fileSizeExceeded) {
startUpload();
}
const handleSpoiler = (marked: boolean) => { const handleSpoiler = (marked: boolean) => {
setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked }); setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
@ -131,7 +138,7 @@ export function UploadCardRenderer({
{fileItem.originalFile.type.startsWith('image') && ( {fileItem.originalFile.type.startsWith('image') && (
<ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} /> <ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
)} )}
{upload.status === UploadStatus.Idle && ( {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
<UploadCardProgress sentBytes={0} totalBytes={file.size} /> <UploadCardProgress sentBytes={0} totalBytes={file.size} />
)} )}
{upload.status === UploadStatus.Loading && ( {upload.status === UploadStatus.Loading && (
@ -142,6 +149,14 @@ export function UploadCardRenderer({
<Text size="T200">{upload.error.message}</Text> <Text size="T200">{upload.error.message}</Text>
</UploadCardError> </UploadCardError>
)} )}
{upload.status === UploadStatus.Idle && fileSizeExceeded && (
<UploadCardError>
<Text size="T200">
The file size exceeds the limit. Maximum allowed size is {bytesToSize(allowSize)},
but the uploaded file is {bytesToSize(file.size)}.
</Text>
</UploadCardError>
)}
</> </>
} }
> >