First pass

src/components/users.js

@@ -46,6 +46,7 @@ import {
   TopToolbar,
   sanitizeListRestProps,
   NumberField,
+  ImageField
 } from "react-admin";
 import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
@@ -315,6 +316,7 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
+
 export const UserEdit = props => {
   const classes = useStyles();
   const translate = useTranslate();
@@ -449,7 +451,10 @@ export const UserEdit = props => {
             perPage={50}
             sort={{ field: "created_ts", order: "DESC" }}
           >
-            <Datagrid style={{ width: "100%" }}>
+            <Datagrid style={{ width: "100%" }} 
+              expand={ <ImageField source="url" /> }
+              isRowExpandable={row => row.is_image }
+            >
               <DateField source="created_ts" showTime options={date_format} />
               <DateField
                 source="last_access_ts"

src/synapse/dataProvider.js

@@ -25,6 +25,16 @@ const mxcUrlToHttp = mxcUrl => {
   return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
+async function isImage(url) {
+  const resp = await fetch(url, {
+    method: "HEAD"
+  });
+
+  const type = resp.headers.get("Content-Type");
+
+  return type === "image/png" || type === "image/jpeg";
+}
+
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
@@ -157,9 +167,11 @@ const resourceMap = {
     },
   },
   users_media: {
-    map: um => ({
+    map: async um => ({
       ...um,
       id: um.media_id,
+      url: `${localStorage.getItem("base_url")}/_matrix/media/v3/download/${localStorage.getItem("home_server")}/${um.media_id}`,
+      is_image: await isImage(`${localStorage.getItem("base_url")}/_matrix/media/v3/download/${localStorage.getItem("home_server")}/${um.media_id}`)
     }),
     reference: id => ({
       endpoint: `/_synapse/admin/v1/users/${id}/media`,
@@ -395,10 +407,17 @@ const dataProvider = {
     const ref = res["reference"](params.id);
     const endpoint_url = `${homeserver}${ref.endpoint}?${stringify(query)}`;
 
-    return jsonClient(endpoint_url).then(({ headers, json }) => ({
-      data: json[res.data].map(res.map),
+    return jsonClient(endpoint_url).then(async ({ headers, json }) => {
+      const data = [];
+      const arr = json[res.data];
+      for (const obj of arr) {
+        data.push(await res.map(obj));
+      }
+      return {
+        data: data,
         total: res.total(json, from, perPage),
-    }));
+      }
+    });
   },
 
   update: (resource, params) => {