And it's a good idea to stop at this point
and take a pause and think about file storage
and where we wanna do store our uploaded files.
So we got a file incoming to our server side.
We're using Multer to extract that file.
And as I explained,
Multer will actually automatically store that file for us.
But the question is where should Multer store that file?
Where should this uploaded file be stored?
And of course, one idea you might have
is to store it in a database.
After all, that is where we stored
all the other data as well,
and that is where we will also store
the username for example.
But storing a file in a database would not be a good idea.
Databases are not built for storing files.
They are not file storage systems.
So you should not store files in databases.
Instead, store simple data
like names or ages or dates or prices.
Store that in databases.
So everything that's not a file should go into a database.
Files should not go in there.
Instead, files should simply be stored
on the regular file system, so somewhere on your hard drive.
That's what the hard drive is there for, for storing files,
and uploaded files are no exception.
Unlike databases, the file system is optimized
for working with files.
And therefore, you should put your files
onto that file system.
And the only thing related to the uploaded file
that should be stored in the database
would then be the path to that stored file.
So you put that file somewhere on the hard drive,
but the path that points to that file,
this path, so this string, this text which it is in the end,
that would be stored in the database
side-by-side with the other related data.
So if you are storing an image for a user,
you would store the username and the email address
and whatever you have in the database,
you would store the image of the user on the hard drive,
and you would store the path pointing to that image
together with the username and the email
in one and the same record or document in the database.
That's how you should handle uploaded files.
Now, for Multer, the implication of what we learned
for storing files and where to store files
is that we wanna tell Multer to store that file
in a specific folder in our project here.
And actually, there wouldn't be a straightforward way
of telling Multer to store a file in a database
because that isn't a good idea.
Still, I wanted to highlight why it isn't a good idea
and show you how you would store files
and the path to the file.
So therefore here,
we have to go back to line four in my case
where we initialized Multer and now tell Multer
where uploaded files should be stored.
And we do this by adding a dest option for destination.
Now we can add a new folder in our project,
for example, images.
And that could be the folder
where the uploaded files should go to.
So then dest would be images like this.
With that, we tell Multer that uploaded files
should go into the images folder.
Of course, it's up to you how you name that folder,
but now Multer will automatically move uploaded files
into that images folder.
And on that file object that we get here,
we will, for example, get the information,
what the full path to the uploaded file is
because the direct file thing here is actually an object
that will give us extra file information,
things like the filename or the path to the file.
So that's what we get here on this req.file object.
And req.body, as mentioned, holds the other data
that was part of the form.
So with that, we now have a setup
where the file should be stored correctly
and we get information about that stored file.
Now to see that all in action,
I will just console.log the uploaded image file here
so that we see which kind of data we get for this file.
And I will console.log the other user data
so that we see what's in there.
And then I'll simply redirect to the starting page
with /nothing like this.
That's for the moment my server side code
for handling the file uploads.
It's not the finished code, but a good first step.
Now we can save everything
and go back to our site here and reload this form,
pick the image again,
enter some username here and click save user
and we are redirected.
I don't see the user data here yet
because we haven't added the logic for this yet,
but here on the backend, we now see some data being logged.
This here is the file data.
That's the other kind of data we got.
Now you see the other data is just an object
with the username as expected.
And for the file data, we got the original filename
as chosen by me for the upload.
And then we got the path to the file
and an automatically assigned filename chosen by Multer.
In images, we see that file.
So Multer automatically gives that file a unique ID
simply to ensure that if you upload multiple files
with the same name,
they don't overwrite each other on the server side.
For example, for Facebook, if you create a profile
and you choose an image called max.jpeg,
it would be pretty bad if another user
with an equally named image would overwrite your image.
That's why you typically wanna rename files
when they arrive on the server.
Now, one thing that's missing here on the filename
is the original extension.
This filename here doesn't have an extension.
We know it's still a JPEG file,
but the extension doesn't signal it.
We know that it is because we uploaded a JPEG file.
And as soon as we add .jpeg here,
we would be able to view it as such,
even here in Visual Studio Code.
But by default, this extension was missing.
Now, it would be nice
if we could keep the extension of our file here.
And to achieve this,
we have to change the configuration here
and move away from just specifying the destination
to actually telling Multer in detail
how the uploaded file should be stored.