Building the User Avatar Function

In our Smilecook application, there are user profile pages that list user information. While this is useful enough, it would be much better if we could allow users to upload a profile picture (avatar) to their profile page. This would make the application more sociable.

To store the user avatar, we will create a new attribute (avatar_image) in the user model. We are not going to store the image directly in this attribute. Instead, we are going to store the image on the server, and the new attribute will have the filename of the image. Later, when our API gets a client request asking for the image, we will find the filename in this attribute and generate the URL to point to the image location and then return it to the frontend client-side. The frontend client will then base on the image URL and fetch it from the server:

Figure 7.1: Building a user model avatar diagram

We are going to create a new endpoint, http://localhost...