);
diff --git a/src/components/views/settings/ProfileSettings.tsx b/src/components/views/settings/ProfileSettings.tsx
index 9db1d49d83..94d8343999 100644
--- a/src/components/views/settings/ProfileSettings.tsx
+++ b/src/components/views/settings/ProfileSettings.tsx
@@ -29,6 +29,7 @@ import AccessibleButton from '../elements/AccessibleButton';
import AvatarSetting from './AvatarSetting';
import ExternalLink from '../elements/ExternalLink';
import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
+import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
interface IState {
userId?: string;
@@ -188,6 +189,7 @@ export default class ProfileSettings extends React.Component<{}, IState> {
type="file"
ref={this.avatarUpload}
className="mx_ProfileSettings_avatarUpload"
+ onClick={chromeFileInputFix}
onChange={this.onAvatarChanged}
accept="image/*"
/>
diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index b13277e744..3467660ff7 100644
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -31,6 +31,7 @@ import { RoomNotifState } from '../../../../../RoomNotifs';
import defaultDispatcher from "../../../../../dispatcher/dispatcher";
import { Action } from "../../../../../dispatcher/actions";
import { UserTab } from "../../../dialogs/UserTab";
+import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
interface IProps {
roomId: string;
@@ -77,7 +78,7 @@ export default class NotificationsSettingsTab extends React.Component): Promise => {
+ private onSoundUploadChanged = (e: React.ChangeEvent): void => {
if (!e.target.files || !e.target.files.length) {
this.setState({
uploadedFile: null,
@@ -254,7 +255,14 @@ export default class NotificationsSettingsTab extends React.Component{ _t("Set a new custom sound") }
{ currentUploadedFile }
diff --git a/src/components/views/spaces/SpaceBasicSettings.tsx b/src/components/views/spaces/SpaceBasicSettings.tsx
index 4f305edd8b..14e4d5d563 100644
--- a/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/src/components/views/spaces/SpaceBasicSettings.tsx
@@ -19,6 +19,7 @@ import React, { useRef, useState } from "react";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import Field from "../elements/Field";
+import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
interface IProps {
avatarUrl?: string;
@@ -89,6 +90,7 @@ export const SpaceAvatar = ({
{
if (!e.target.files?.length) return;
const file = e.target.files[0];
diff --git a/src/utils/BrowserWorkarounds.ts b/src/utils/BrowserWorkarounds.ts
new file mode 100644
index 0000000000..ea8ea2a04f
--- /dev/null
+++ b/src/utils/BrowserWorkarounds.ts
@@ -0,0 +1,24 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MouseEvent } from "react";
+
+export function chromeFileInputFix(event: MouseEvent): void {
+ // Workaround for Chromium Bug
+ // Chrome does not fire onChange events if the same file is selected twice
+ // Only required on Chromium-based browsers (Electron, Chrome, Edge, Opera, Vivaldi, etc)
+ event.currentTarget.value = '';
+}