If you’ve just came to this tutorial before going through the other ones, consider reading them (or copy the code):
In WordPress, the avatar is returned from a function
get_avatar which returns the HTML for it. Also, when we retrieve the data, the avatar_urls are from the service gravatar. We could filter them out, but let’s learn more about using the user meta with REST API.
Check the video in this tweet on how this will look like.
Registering User Meta
To store our newly uploaded avatar images, we will use the meta key
avatar. This will contain the URL to it. To be able to update such meta, we need to register them so it can be used with the REST API.
Create a new file under
wp-content/plugins and call it whatever you like. Then add this:
Activate the plugin and you will now have this meta registered so it can be returned by REST API and also updated with REST API.
The avatar ID can be used for some other cases if we need to know which attachment ID it is.
Displaying the User Image
Let’s now create a function that will be used to display the image of the user. Create a new file under the folder
functions in our React app and name it
Since the meta that is returned from the REST API is always shown as an array, we will check if we have the
avatar meta. If it is there, we will return the first item of that array.
If there is no such data, we will check for
avatar_urls. If there is an image, we then show the image.
Let’s now try displaying that image in our dumb component
Profile which is currently defined under
We are importing this function
getImage and then we pass the
user object to it so we can show the image.
Uploading the User Image
Open again the
functions/user.js file and add this function to it:
createMediaFromFile is accepting the file, additional data, user token and the url of the site. We are then creating an
axios post call to the
wp-json/wp/v2/media. In case this is is not possible with regular user accounts, you can use a custom AJAX or REST route to handle uploads.
Let’s now go to our settings component under
src/components/dashboard/Settings.js and update it.
We are importing the new components
@wordpress/components. We are also importing the functions
Before using the
DropZone component, we will have to create a function to handle file uploads.
We are binding that new function
this so that we can access the state from it. We then iterate through each
files and try to upload it.
If it has been uploaded, we then update our state. The
update object has the new
avatar meta set under
meta object. Here, we just set it directly to the value, without needed to create an array out of the
avatar value. But for the
user object, we need to update the meta as if we were getting that information from the REST API (as array).
Let’s now add the
DropZone component. You can read about all the properties of it, in the repository.
We are wrapping it with the
DropZoneProvider. This will make the
DropZone component show inside of it. We are then showing the current image of the user and also pass the
fileUpload function to the
onFilesDrop property of the component.
Once we hit the update button, we will perform an update on the current user and the meta will be updated. If you’re going to use this in production, please:
- check for file type so that only images are uploaded,
- delete the old avatars when the new one is updated
- delete the new avatars if the user did not update it.
The current style will render the whole upload area as the whole window, but we need to maintain it within the DropZone provider, so add this to
To get the complete code, you can download it here. Be sure to run
npm install to get all the node modules so you can work on it.
With such DropZone components (and alike) we can create great user experiences with ease and within minutes. By adding our own upload routes, you can define how and where the files are uploaded.Become a Sponsor