Not able to set/upload user avatar using Amity Web UIKit

Web
1

Hi there,

I’m using web UIKit for React. i want to upload/set user avatar while registering the user. in the UIKit there is option to set Avatar.

I have tried with web SDK but not able access the current user in React UIKit to update the user information as mentioned in web SDK,

also tried by creating a separate instance in WebUIKit using following code to access currentUser function:

import ASCClient, { ApiEndpoint } from '@amityco/js-sdk'

const client = new ASCClient({ apiKey: 'YOUR_API_KEY', 
                                apiEndpoint: ApiEndpoint.US });

its not work too,
getting error “ASCWebSDK: Only one instance of the SDK Web Client can be created”

Please assist.

Screenshot 2021-12-10 at 3.46.03 PM
Screenshot 2021-12-10 at 3.46.03 PM2352×1426 294 KB

2

Hi @salman - you can use amityClient.updateCurrentUser (https://docs.amity.co/chat/web/users#update-user-information) to update avatarFileId and other user field to update the user’s profile picture.
Please note that to get fileId you’ll need to upload image - see more here Users - Amity Docs

3

Can you tell me how i can access this without declaring and initialised the variable.

4

Hi @salman - you’ll need to store the initialized variable ( client = new ASCClient ) in as your state / global variable so you can access it at anytime from any class.

5

Hello,
is it possible to use a URL instead of uploading files?

6

Hi Elko,

User has a field avatarCustomUrl, you can update it with your url, and uikit will use it to display the avatar.

import { UserRepository } from '@amityco/js-sdk'

UserRepository.updateUser({ userId: 'your user id', avatarCustomUrl: 'your url' });

To keep it in sync, you may consider checking that value on every app startup.

import { UserRepository } from '@amityco/js-sdk';
import { AmityUiKitProvider, useAmityUser } from '@amityco/uikit';
import React, { useEffect } from 'react';

function SyncAvatar({ userId, avatarUrl }) {
  const { user } = useAmityUser(userId); // unfortunately the hook is not yet documented
  
  useEffect(() => {
    if (!user.userId) { // check if user is loaded
	  return;
	}
	
	if (user.avatarCustomUrl !== avatarUrl) {
	  UserRepository.updateUser({ userId, avatarCustomUrl: avatarUrl });
	}
	
  }, [user.userId, avatarUrl]);
  
  
  return null;
}

function() {
  <AmityUiKitProvider ...>
    <SyncAvatar avatarUrl={myAvatarUrl} userId={myUserId} />
    {...}
  </AmityUiKitProvider>
}
7

Hi,
I copy pasted this code and I get the following error when using UserRepository.

UserRepository.updateUser is not a function

8

I also used this, https://api-docs.amity.co/#/UserV3/put_api_v3_users,

I sent an axios put request, and it returns 200, but it made no changes.

9

I apologize, I was wrong. updateUser method which I mentioned is not exported directly out of sdk.

If you were to use sdk without uikit, you could update avatarCustomUrl using ASCClient instance like

ascClient.updateCurrentUser({ avatarCustomUrl });

https://docs.amity.co/chat/web/users#update-user-information

But you are using uikit. I can’t see any way to get the client instance created by uikit without code modifications. As a developer I can say that the fix is pretty simple, but I need to get an approval for that. I’ll try to get it, will return to you on Monday / Tuesday.

Regarding https://api-docs.amity.co/#/UserV3/put_api_v3_users . I can’t say what exactly went wrong on your side. I checked it using only sdk on our dev server using ascClient.updateCurrentUser, it works. It might be that you didn’t add access token to headers. That thing is encapsulated in ascClient.registerSession

10

We took the task into the development. It would be released in the next minor release, which is unfortunately the end of March. If we can release it earlier, I will notify you further.

11

Thank you Malyshev,
In the meantime however we need a solution.

We have tried sending a direct request to the server and it hasn’t worked,
Ive also tried initializing the ascClient next to the UI kit, but I get ASCWebSDK: Only one instance of the SDK Web Client can be created.

What do you think.

12

Any idea what went wrong with the PUT request ?

13

Direct request - it might be you didn’t add authorization token to the request, which is added to all sdk request under the hood.

We added export of useAmitySdk in the latest uikit 2.11.0. Pls try this solution

import { UserRepository } from '@amityco/js-sdk';
import { AmityUiKitProvider, useAmityUser, useAmitySDK } from '@amityco/uikit';
import React, { useEffect } from 'react';

function SyncAvatar({ userId, avatarUrl }) {
  const { client } = useAmitySDK();
  const { user } = useAmityUser(userId); 
  
  useEffect(() => {
    if (!user.userId) { // check if user is loaded
	  return;
	}
	
	if (user.avatarCustomUrl !== avatarUrl) {
          // https://docs.amity.co/chat/web/users#update-user-information
	  client.updateCurrentUser({ avatarCustomUrl: avatarUrl });
	}
	
  }, [client, user, avatarUrl]);
  
  
  return null;
}

function() {
  <AmityUiKitProvider ...>
    <SyncAvatar avatarUrl={myAvatarUrl} userId={myUserId} />
    {...}
  </AmityUiKitProvider>
}