Open image button
Instrument a button to open an image
The way of kata
Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.
The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.
All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).
To make the best of katas, observe the following rules.
- Don't rush.
- When stuck, take a break and do something unrelated.
- Do not copy/paste code. Always retype everything.
- Do not use AI tools to generate code.
- Try to do something that wasn't in the instructions, experiment.
- Repeat the kata from time to time, even if you think you've got it.
- You have mastered the kata once you are able to complete it without thinking too much.
Remember, the goal is not to get it done, but to get some practice.
Introduction
In this exercise, you will load a file from the user's computer and load it
into an <img> tag.
Skills you will acquire
- Creating and manipulating DOM elements
- Activating ad-hoc created form controls
- Creating object URLs
- Reading files
Objective
- Using the provided HTML file, instrument the existing button to open a file dialog
- When a file is selected, load the image into the existing
<img>tag
Check your solution
- Clicking the button opens a file dialog
- When a file is selected, the image content is shown on the page
- Files other than images cannot be selected
- After loading the image, the button label changes to "Clear image"
- When clicking the button while its label is "Clear image" clears the image
- Clearing the image reverts the button label to "Load image"
Materials
Keep in mind
Do not modify the provided HTML.
Clickable form controls such as file inputs can be triggered manually by calling
.click() on them. This has the same effect as having the user click on it.
The file input can be configured to only take files of certain type. This causes the system file dialog to only shows the configured file types.
There are two ways to convert the loaded image into a URL that can be used in
the <img> tag. One method is to use object URLs. Another way is to use the
file API to read the file as a data URI. You should do this exercise using both
methods.
Use .textContent to set the button label, rather than .innerText. The
.innerText property performs additional checks for the subtree structure so
it's a bit slower. You will not notice any difference in performance in this
example, but it's good to build the habit of using .textContent.
You can track the state of the button (whether it's clearing or loading) either by storing the state in a variable, or inspecting the properties on the button itself. Try both approaches.