Now you can dive deeper into multer
and what you can do with it.
Accept multiple files, filter uploaded files.
You can do a lot with multer
and you can always dive into
the official documentation.
The official explanation here on the multer package page.
If you want to learn all about it.
There definitely is more you can do with it,
but that's the case for all third party packages
we're using in this course.
Instead of digging deeper into this here,
I want to come back to the front end here.
When we add a new user,
it would be great if we had a preview
of the chosen file here,
instead of just having the file name here.
And it turns out that we can build such a preview,
but there's no built in functionality for this.
Instead, we have to build it ourselves with JavaScript.
Now, however,
with client site JavaScript.
So JavaScript running in the browser,
because keep in mind,
JavaScript in the browser allows us to
execute logic behind the scenes
that may manipulate what the user sees without
loading a new page.
And that's exactly what we need here.
We basically want to listen to this file picker.
So we want to listen to events there.
And whenever a new file is picked,
we want to update a little preview here.
That's my goal.
That's what I want to do here.
So there would be various ways of implementing this.
I will simply go to the public folder
and add a new scripts folder here
with the file upload JS file.
Or actually maybe file preview
to make it clear that this is not there to handle
or start file uploads,
but only there to show a preview.
Now for this file to have an effect in new user EJS
we want to load this script file.
So here in the head section,
I'll add a script tag
and point at slash scripts slash file
dash preview JS
So that file we just added.
And add the defer attribute to load and execute it
only once the rest of the page was parsed.
And then don't forget this closing script tag.
It is required.
So now we can go back to file preview JS
and work on our logic here.
And in the end what I want to do here
is I want to add a listener to this file input here.
Thankfully it has an ID.
So selecting it should be quite straightforward.
And then whenever the picked file changes,
I want to output a preview.
So here we could add an image element
where we say your picked image as alt text.
And we might want to give it an ID of
image dash preview
so that we can get easy access
to this element in our JavaScript code,
because I want to set this source here
dynamically with JavaScript.
For this back and file preview,
let's get access to the file picker
element by using document get element by ID
and then image was the ID of that input element.
So I am referring to this input element with the ID image.
So to the button here in the end,
and I also want to get access to the
image preview image element here.
So we can also get the image preview
element here by using document get element by ID
and then this ID.
Like that.
Now for the file picker element,
we can add an event listener.
It's not a click I want to listen to though.
I want to listen to the change event.
That's an event that will be emitted whenever the veil
you picked in this input will change.
It's a built in event we can listen to.
And then I'll define a function, show preview,
could be the function name.
And I will set this as a second parameter value here
without parentheses though,
so that it's not executed immediately,
but instead only when that change event occurs.
That's in the end what we already did dozens of times
in this course before when we also worked
with event listeners in our browser site JavaScript code.
We're doing it again here just for the change event now.
So now it's in show preview
where I want to check if a file was picked,
because change firing does not mean that a file was picked.
We might have a file picked before
and now we unselected it.
So we want to check if a file is picked now,
and if it is picked,
then we actually want to show a preview.
For this here in show preview,
we can use the file picker element.
So it is input element which is our file picker.
And there we'll have a files
property.
And that's important.
It's files not file.
It's plural instead,
because theoretically you can also use a file picker
to select multiple files.
So here I got my files and I first of all
want to check if files is maybe false.
If it is it means we don't have any files.
And in this case I want to just return
and not execute any other code.
I also want to check if it's maybe not false,
but files length is zero,
which also means we have no files.
In that case I just return here.
If we make it past this check we know that we have
at least one file.
In our case here, exactly one file.
So then the picked file is files zero.
So the first, and in our case, only file
that could have been picked here.
That's now the file we want to preview.
And therefore here, I then want to set
image preview element, so this image element,
which we prepared for previewing the file,
dot SRC
equal to
URL, which is a built in object,
a built in class in the end that exists in JavaScript,
dot
create object URL,
which is a utility method built in here.
So it's built into the browser,
that will take a file and convert a URL that can be used
as an image source.
So, and here we pass picked file to create object URL.
So that will generate a link, a URL to that file
the user picked.
And it is important to understand that,
at this point the file has not been uploaded yet.
So we are not generating a URL to that file on our server
or anything like that.
The file is still on the computer of the user
who's visiting this page.
So this method is simply creating a local URL,
which only works on the computer of this visitor
to this file on the visitor's computer.
So that's what we're doing here.
And then we're using this local URL
as a source for our preview image element.
I also want to make sure that if we don't have any files
before I return,
I set image, preview element dot style dot display,
to, none, to hide it.
And on the other hand,
I set it to, block, to show it,
once we do have an image to preview.
And then with this code added here
with these couple of lines of code here added,
we can now save everything again,
reload this page.
And here, I want to make sure that
this is not visible here.
This, alt text, right from the start.
And for this I want to hide this image preview as a default.
So therefore we can go to the profiles CSS file
and select this image preview element
by its ID
and set display to none as a default.
So that by default, this image preview image element
is not shown.
And now if we reload here it's not visible.
And if I pick a file,
like this,
here's my preview.
Maybe we can improve the styling,
but it's there.
If I opened a picker again and cancel,
I unselect the file and it's gone again.
Now to optimize the way this is displayed,
I'll go back to image preview,
and I'll give it a width of let's say,
five REM and a height of five REM,
or maybe even just two dot five REM,
so that we have a small preview.
And I'll also set object fit to cover
so that we don't have any distortion in the image,
since object fit will ensure that the aspect ratio
is not destroyed, and instead the image is simply clipped
to fit into these boundaries.
So with that back here, if we reload,
if I now choose an image,
we got this smaller preview and now we can still
submit and upload it.
Of course you can fine tune this.
You can improve the styling,
but that's how you could add an image preview.
And that's overall how you can handle file uploads.