Skip to content

Expose user avatar URL field in the UI#61

Open
jeena wants to merge 1 commit intoAwesome-Technologies:masterfrom
jeena:avatar
Open

Expose user avatar URL field in the UI#61
jeena wants to merge 1 commit intoAwesome-Technologies:masterfrom
jeena:avatar

Conversation

@jeena
Copy link
Copy Markdown

@jeena jeena commented Aug 4, 2020

To be able to change a avatar the URL field needs to be exposed but changing the URL alone is difficult. This patch adds a image upload field to the edit view of a user. If there is a file detected it uploads it to the servers media repository and sets that new URL as the avatar URL one. This way a admin can change any users avatar which is especially nice for bridged users like in the IRC bridge and bots.

avatar-synapse-admin

Fixes #60

To be able to change a avatar the URL field needs to be exposed but
changing the URL alone is difficult. This patch adds a image upload
field to the edit view of a user. If there is a file detected it
uploads it to the servers media repository and sets that new URL
as the avatar URL one. This way a admin can change any users avatar
which is especially nice for bridged users like in the IRC bridge
and bots.
Copy link
Copy Markdown
Member

@awesome-manuel awesome-manuel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See inline comments.

...u,
id: u.name,
avatar_src: mxcUrlToHttp(u.avatar_url),
avatar_url: u.avatar_url,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is implicitly handled by line 32

Comment on lines +206 to +230

// In case there is a avatar_file object, save it in the media repository
// and update the avatar_url.
const f = params?.data?.avatar_file?.rawFile;
if (f instanceof File) {
const file_endpoint =
homeserver + "/_matrix/media/r0/upload?filename=" + f.name;
const headers = new Headers();
headers.append("Content-Type", f.type);
const options = {
method: "POST",
body: f,
headers: headers,
};
return jsonClient(file_endpoint, options).then(r => {
params.data.avatar_url = r.json.content_uri;

return jsonClient(`${endpoint_url}/${params.data.id}`, {
method: "PUT",
body: JSON.stringify(params.data, filterNullValues),
}).then(({ json }) => ({
data: res.map(json),
}));
});
} else {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes the update function pretty complicated. I suggest to add another function upload to the DataProvider and use it directly in the UserEdit component (https://marmelab.com/react-admin/Actions.html#usedataprovider-hook). Then you can upload the file directly when it's selected and provide appropriate feedback (e.g. file is too large).

@awesome-manuel awesome-manuel added the enhancement New feature or request label Apr 21, 2021
@awesome-manuel awesome-manuel added the help wanted Extra attention is needed label Feb 5, 2024
@wolfspyre
Copy link
Copy Markdown

is this (or something similar likely to be implemented? it's a nice quality-of-life enhancement, imo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request help wanted Extra attention is needed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make it possible to change a users avatar

3 participants