The next step in this tutorial is to allow users to upload a profile picture. This image will be displayed on the homepage in front of each author's story.
To do this, you will use Foal's storage system. It allows you to validate and save the files uploaded by the client. These files can be saved to your local drive or in the cloud using AWS S3. We won't use the cloud feature in this tutorial, but you can find out how to configure it here.
First, install the package.
Update the configuration in
config/default.json to specify the location of files that the disk manager can access.
Then create the directory
assets/images/profiles/uploaded where the profile images will be uploaded. Download the default profile image here and place it in the
assets/images/profiles folder with the name
You are ready to create the controller. Generate a new one.
Open the new file and add two new routes.
|Retrieves the user's profile image. If the optional query parameter |
|Updates the user profile. A |
Go to http://localhost:3001/swagger and try to upload a profile picture. You must be logged in first.
You may have noticed the
@dependencydecorator for setting the
disk: Diskproperty. This mechanism is called dependency injection and is particularly useful in unit testing. You can read more about it here
On the client side, downloading the profile image is handled in the
Open the latter and implement the
Now, if you go back to http://localhost:3000/profile, you should be able to upload your profile picture.