Subscription required

We're contionusly adding new episodes to IHP Casts. Continue your journey into real-world functional programming by subscribing to IHP Casts!

Watch all of IHP Casts for 10 € / Mo

IHP Casts is made by digitally induced, the company making IHP. By using a paid plan you're supporting our mission to drive the adoption of haskell in the software industry.

Episode completed

Next epsiode starting in 3 seconds

Published at

Script

To give users the ability to add a profile picture, we need a way to adjust uploaded pictures. For that we can use imagemagick, which is able to resize, compress and remove metadata from pictures. To use imagemagick, we need to add it to the other dependencies in the default.nix file. After that, we need to run the nix shell and check if our project builds. If that works, we can force the rebuild of the environment. Now, we are able to use imagemagick in our IHP app. Next we need to add a field for the location of the profile picture of a user. This should be nullable, so that a user can have no profile picture. Next, let’s head into the Users controller. There we need to adjust the update user action to process a profile picture. We first need to set up the configuration for imagemagick so that the uploaded image is resized, compressed and all metadata is removed. To upload the image, we can use uploadImageWithOptions with the options and the field for the picture url. To make the picture input field work, we need to fill the pictureUrl. Next we need to create the form for the profile picture. For that, let’s add a preview and a file input field with the name pictureUrl. I’m also going to add some styling and a button to trigger the browsers select file dialog. With that we are now able to upload a profile picture. Next, let’s incorporate the users profile picture to the author info of a post. For that we just need to put the author’s picture url into the source of an image element.

Discussion