try a different approach to #277

src/components/media.tsx

@@ -35,6 +35,7 @@ import { useMutation } from "@tanstack/react-query";
 import { dateParser } from "../utils/date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -481,7 +482,7 @@ export const MediaIDField = ({ source }) => {
 
   let uploadName = mediaID;
   if (get(record, "upload_name")) {
-    uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+    uploadName = decodeURLComponent(get(record, "upload_name")?.toString());
   }
 
   let mxcURL = mediaID;
@@ -506,7 +507,7 @@ export const ReportMediaContent = ({ source }) => {
 
   let uploadName = "";
   if (get(record, "event_json.content.body")) {
-    uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
+    uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
   }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;

src/resources/users.tsx

@@ -83,6 +83,7 @@ import UserRateLimits from "../components/UserRateLimits";
 import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
 import { MakeAdminBtn } from "./rooms";
 import UserAccountData from "../components/UserAccountData";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -505,7 +506,7 @@ export const UserEdit = (props: EditProps) => {
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
               <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURIComponent(record.upload_name) : ""} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />

src/synapse/authProvider.ts

@@ -3,6 +3,7 @@ import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 import { MatrixError, displayError } from "../utils/error";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 import { FetchConfig, ClearConfig } from "../utils/config";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -57,7 +58,7 @@ const authProvider: AuthProvider = {
     base_url = base_url.replace(/\/+$/g, "");
     localStorage.setItem("base_url", base_url);
 
-    const decoded_base_url = window.decodeURIComponent(base_url);
+    const decoded_base_url = decodeURLComponent(base_url);
     let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;

src/utils/decodeURLComponent.ts

@@ -0,0 +1,15 @@
+/**
+ * Decode a URI component, and if it fails, return the original string.
+ * @param str The string to decode.
+ * @returns The decoded string, or the original string if decoding fails.
+ * @example decodeURIComponent("Hello%20World") // "Hello World"
+ */
+const decodeURLComponent = (str: any): any => {
+  try {
+    return decodeURIComponent(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+export default decodeURLComponent;