Configuring the photo

[00:00 - 00:14] One import customization option that needs to be added is replacing the image, as well as letting the user choose whether or not to use an image at all. For that, we will create an image upload component.

[00:15 - 00:38] The image upload component needs an input field of the type file. We explicitly state which file types we accept.

[00:39 - 01:10] In this case, we want to accept all common image file types. Some browsers use this information to filter the file selection dialog so the user sees only files with the specified extensions. In order for us to change the photo, we need to add an event listener to the input element.

[01:11 - 01:22] I will call the event handler change image. Let's add the event handler method.

[01:23 - 01:59] The handler takes in the event argument and extracts the selected file from it. The file's attribute will contain a file list object. If the file was selected, we can access that file with an index of zero. If no file is selected, the event will still fire and the file list object will be empty. Therefore, we need to check if our selected file contains a value.

[02:00 - 02:19] If so, we create an instance of the file reader. the selected file The file reader is a built-in JavaScript object that allows us to read the contents of files.

[02:20 - 03:06] and when this is complete, the load event fires. In order to read this event, we register an event listener. We add that listener above the reader dot read as data URL call to make sure that it is available when the load event fires. Once the file is loaded, the reader contains a result property with our file as a data URL.

[03:07 - 04:09] A data URL represents the file's data as an encoded string. We will inform our parent component about this value by emitting a custom event with this value. We import the component image upload and the app component and add it to the bottom of our sidebar. There, we listen to the image changed event and set the image URL of our component's data object equal to the data URL we receive.

[04:10 - 05:09] We are able to upload our own image now but what if we don't want an image at all? Personal information is expected in a resume depending on the country and in some countries, applicants apply without a picture. Therefore, we will add a configuration option with which the user can choose to display or hide the picture. To toggle the display of the photo, we can use our toggle switch again. Previously, we created this toggle switch specifically for toggling the edit mode. We named the switch edit toggle and used edit toggle specific naming and text in there. I want to refactor this component to make it reusable for our photo toggle.

[05:10 - 05:41] As a first step, we rename edit toggle to toggle switch. We have to adjust the import statement and the component registration in our app component to the new name. Of course, in between our sidebar tags, where we use this component, we also need to adjust the tag name to toggle switch.

[05:42 - 06:00] In our component, we change the event name from edit mode to toggle to switch target. We adjust the event we listen to in the app component accordingly.

[06:01 - 06:35] The label edit mode is currently hard-coded into the template. We need to make this a prop to be adjustable. We register a prop with the name label and print it out in the template with message syntax. In the app components template, we pass it in as a static string.

[06:36 - 06:52] Right, we have refactored our component and you can try it out. The edit toggle that works as before. Now, we can reuse this component for hiding or showing the photo.

[06:53 - 07:14] We reuse the component toggle switch in the sidebar. I will just copy it and paste it next to the photo upload part. The label needs to be changed. I will choose show photo here. Of course, we also need to use a different event handler.

[07:15 - 07:32] I will call the new one toggle image display and we will add a new method for data object. it.

[07:33 - 08:05] For default, the image should be shown, so we set the default to true. Just like with the toggle edit mode method, we receive the boolean value from the event and can use this to reset the properties value.

[08:06 - 08:22] Of course, we also need to display or remove the image, depending on this value . We can use the vif show image for that.

[08:23 - 08:48] To have our sidebar content a bit more organized, I will move the photo related components next to each other. We have the show photo toggle switch, the upload image option and the photo shape select item.

[08:49 - 09:19] The letter 2 only makes sense if the photo is shown, so we add the vif directive for them as well. So, we can now toggle whether or not we want to show an image, as well as replace the image that is shown.

[09:20 - 12:04] As a final step, I want to clean up this messy sidebar a bit. (soft music) (soft music) (soft music) (soft music) (soft instrumental music) (soft instrumental music) (light music) (light music) (light music) (light music) (light music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (slow music) (mellow music) (mellow music) (mellow music) (mellow music) (mellow music) (gentle upbeat music) (gentle upbeat music) (gentle upbeat music) (sight music) (gentle music) (gentle music) (gentle music) (gentle music) (light music) (light music) (light music) (light music) (light music) (light music) [Music] And with that, you have successfully completed the module about making the resume styling configurable.