Now, to show a preview of the picked image,
we need to handle the event that an image was picked
and then store some state so that we can update this UI
and show a preview as soon as we have an image.
So we need some state here in this component,
and therefore, we need to use state hook.
This would require us
to turn this component into a client component,
but we already did this here, so no changes are needed.
Now here with this state,
I then wanna manage the picked image,
so I'll name this picked image
and have a set picked image state updating function.
And now we need a second event handler function here
that could be called handle image change,
which should be triggered
whenever this input here has a new value,
so whenever the change event on that input is emitted.
And therefore, we should add the on change prop here
and set handle image change as a value.
Now, here in handle image change,
we'll then automatically get an event object,
as you always do
for those event handling functions in React,
and we can use this event object
to get hold of that picked image.
We can get hold of that picked file
by using event.target.files
and then accessing the first file.
This file property will exist
because the target of this event is this input,
and this file input object, under the hood,
will have such a files property.
That will be an array of all the files
that have been picked,
but here, it'll only be one file that can be picked.
and therefore. I'll just access that first file.
You could allow the user to pick multiple files
by adding the multiple prop here to this file input,
but since we don't have that here and don't want it here,
it'll only be one file that we can access.
Now, it's possible that the user actually
did not pick a file for some reason,
so I'll check if the file is undefined, if we got no file,
and in that case, I'll just return and not continue.
(paper crumpling)
But if we make it past this if check,
we know that some file has been selected.
Now, in order to show it as a preview here,
I now want to convert it into a so-called data URL,
which is simply a value that can be used as an input
for an image element,
so that can be used as a source for an image element.
And we can generate such a data URL
with help of a class built into JavaScript,
the file reader class.
We can construct such a file reader
and then do what its name implies.
We can read our file,
and we can simply call file reader read as data URL
and pass that file to that method.
Now, this method works in a bit of a strange way,
because it doesn't actually return anything,
not a promise, not the read file,
and it also doesn't take a callback.
Instead, we get hold of that data URL that's being generated
by assigning a value to the on load property
of this file reader object.
So we store a function as a value in on load,
and this function will then be triggered by the file reader
once this method here,
this read as data URL method, is done,
But here, we then won't get the generated URL as an input.
Instead, we can access it by accessing fileReader.result,
and that will then be that generated URL.
And that's what I then wanna store in my state.
So I will set my picked image to the result
of accessing fileReader.result
inside of this on load function.
Well, and with that, we can then use this picked image state
to show a preview.
So down here, in this controls div,
I'll add another div with a class name of preview,
and in that div, I now wanna check
if we don't have a picked image,
in which case I'll simply output a paragraph
where I say "No image picked yet" or something like that.
But if we do have a picked image, I wanna show that image.
And for that, I'll use the image component provided by next,
so you should import that from next image,
and then here on that image,
I'll set the source to my picked image, so to that data URL,
and the alt text to "The image selected by the user,"
and I'll add that fill prop
because I don't know the dimensions
of that image in advance.
And that should then be all.
With that, we should have
that finished image picker component,
and we can now take a look at it.
Here in this application, I now got this preview area,
and if I now click this button, the file picker opens up,
and if I pick an image, I can see that preview here.
So that is working.
And with that, we're now finally ready
to also work on the submission of this form.