imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Check that the file the user chose has a MIME type of image/* (#28467)

Browse source 
* Check that the file the user chose has a MIME type of `image/*`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Optional

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* DRY

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update src/components/views/settings/AvatarSetting.tsx

Co-authored-by: Florian Duros <florianduros@element.io>

* prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
Michael Telatynski 2024-11-18 10:30:31 +00:00 • committed by GitHub
parent 72a2773629
commit 9b316e8e7f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 110 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/elements/MiniAvatarUploader.tsx
View file

@ -17,6 +17,7 @@ import { useTimeout } from "../../../hooks/useTimeout";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner";
import { getFileChanged } from "../settings/AvatarSetting.tsx";
export const AVATAR_SIZE = "52px";
@ -72,11 +73,12 @@ const MiniAvatarUploader: React.FC<IProps> = ({
onClick?.(ev);
}}
onChange={async (ev): Promise<void> => {
if (!ev.target.files?.length) return;
setBusy(true);
const file = ev.target.files[0];
const { content_uri: uri } = await cli.uploadContent(file);
await setAvatarUrl(uri);
const file = getFileChanged(ev);
if (file) {
const { content_uri: uri } = await cli.uploadContent(file);
await setAvatarUrl(uri);
}
setBusy(false);
}}
accept="image/*"

19
src/components/views/settings/AvatarSetting.tsx
View file

@ -19,6 +19,8 @@ import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import { useId } from "../../../utils/useId";
import AccessibleButton from "../elements/AccessibleButton";
import BaseAvatar from "../avatars/BaseAvatar";
import Modal from "../../../Modal.tsx";
import ErrorDialog from "../dialogs/ErrorDialog.tsx";
interface MenuProps {
trigger: ReactNode;
@ -103,6 +105,18 @@ interface IProps {
placeholderName: string;
}
export function getFileChanged(e: React.ChangeEvent<HTMLInputElement>): File | null {
if (!e.target.files?.length) return null;
const file = e.target.files[0];
if (file.type.startsWith("image/")) return file;
Modal.createDialog(ErrorDialog, {
title: _t("upload_failed_title"),
description: _t("upload_file|not_image"),
});
return null;
}
/**
* Component for setting or removing an avatar on something (eg. a user or a room)
*/
@ -139,7 +153,10 @@ const AvatarSetting: React.FC<IProps> = ({
const onFileChanged = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) onChange?.(e.target.files[0]);
const file = getFileChanged(e);
if (file) {
onChange?.(file);
}
},
[onChange],
);