![]() We are wrapping it with the DropZoneProvider. You can read about all the properties of it, in the repository. But for the user object, we need to update the meta as if we were getting that information from the REST API (as array). ![]() Here, we just set it directly to the value, without needed to create an array out of the avatar value. The update object has the new avatar meta set under meta object. If it has been uploaded, we then update our state. We then iterate through each file in files and try to upload it. We are binding that new function fileUpload to this so that we can access the state from it. We are importing the new components DropZoneProvider and DropZone from We are also importing the functions getImage and createMediaFromFile.īefore using the DropZone component, we will have to create a function to handle file uploads. Let’s now go to our settings component under src/components/dashboard/Settings.js and update it. In case this is is not possible with regular user accounts, you can use a custom AJAX or REST route to handle uploads. We are then creating an axios post call to the wp-json/wp/v2/media. This function createMediaFromFile is accepting the file, additional data, user token and the url of the site. Open again the functions/user.js file and add this function to it: This function will have the JavaScript File object and send it to our server as FormData. We will need a function that will handle file uploads. Now that we have a way to show the image, let’s also create a way to upload it. We are importing this function getImage and then we pass the user object to it so we can show the image. Let’s now try displaying that image in our dumb component Profile which is currently defined under src/components/Dashboard.js. If there is an image, we then show the image. If there is no such data, we will check for avatar_urls. If it is there, we will return the first item of that array. 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. Create a new file under the folder functions in our React app and name it user.js. ![]() Let’s now create a function that will be used to display the image of the user. ![]() The avatar ID can be used for some other cases if we need to know which attachment ID it is. Then add this:Īctivate the plugin and you will now have this meta registered so it can be returned by REST API and also updated with REST API. To be able to update such meta, we need to register them so it can be used with the REST API.Ĭreate a new file under wp-content/plugins and call it whatever you like. To store our newly uploaded avatar images, we will use the meta key avatar. Check it out and stay tuned for tutorial on and also the talk on /at9mJjtXrY- Igor Benić JRegistering User Meta Using the #WordPress component DropZone is an easy way to create a Drag'n'drop upload component in #React. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |