So with all that, we are now finally done
with most of this server actions code.
But one crucial feature is missing here
and that's of course this file upload,
which we're not doing at this point.
So as a first step, I'll actually start by changing
that label because I actually don't want the image URL here,
I want the image file instead.
So in that post form component,
I'll change that label to just image.
But then more importantly, I wanna make sure
that we can store that image somewhere.
And as you learn in the essentials section,
we can't really store it in our NextJS project.
We could store it in the public folder,
but there it will only be available during development,
not when we run this app in production.
And therefore this all isn't a great solution.
Instead, you should typically store it on something like
AWSS free
or a provider like Cloudinary, which is the service I'll use
for this section
because we can get started with it for free
and for this section we'll just need that free plan.
So you don't need to pay anything
and therefore you can create an account
with Cloudinary for free.
And once you did that, we can install the Cloudinary
package into our project to get started using Cloudinary.
So for that, I'll quit that development server
and run NPM install Cloudinary here in my project.
And then I created some extra file which you find attached,
a file named Cloudinary.js,
which you should add into your lip folder,
which contains all the code needed to take an image file
and upload it to Cloudinary.
And it'll upload it into a folder named NextJS course
mutations on Cloudinary though you could change that name
to anything you want.
Now to work this file will need some
configuration that allows it to work
with your Cloudinary account.
And for that we should set up some environment variables.
And in NextJS you can easily do that
by adding a .env.local file in your root project folder.
And in that file you can now set up some environment
variables that will be made available
to your NextJS code automatically by NextJS.
So here I'm expecting free environment variables,
Cloudinary cloud name, Cloudinary API key
and Cloudinary API Secret.
And therefore you should set all three variables
in that .env.local file.
Now to which values should you set them?
Well, you find those values in your Cloudinary project
here in this box.
And of course you should not use my values but yours.
Here you find your cloud name, your API key
and the API secret, which is hidden here though,
but you find it in a non hidden way under dashboard
and there you can copy it in a non hidden way.
So you should copy the cloud name from there
and set that as a value
for your Cloudinary cloud name environment variable.
Copy the API key and set that as a value
and copy the API secret
and set that as a value so
that all free environment variables are set.
With that done, you can then restart the development server.
And now this Cloudinary code should work
and should allow you to upload images
to your Cloudinary account.
Therefore, now as a next step, we should go
to our posts JS action file.
And there, after validating all the input,
before storing the post in the database,
we should try to upload the image to Cloudinary.
And for that you can now call the upload image function,
which is exported from that cloudinary file
I provided to you, you must import it from there
and then pass your image value
to this upload image function.
Now upload image actually will yield a promise which will
then eventually give you a URL to that uploaded file,
a URL that can be used for displaying the image.
And therefore here I'll await this
and I'll get back my image URL.
Now this process here could fail,
so therefore we should actually wrap that with try catch
and throw a custom error object
with a custom error message
that could be displayed on the screen with help
of the error JS file about which you learned
earlier in the course already.
So here I'll then throw an error where I'll say,
image upload failed post was not created.
Please try again later.
Something like this.
Now if we make it past this,
try-catch block though we know that it worked.
And then I wanna store this image URL in the database.
Therefore I'll actually convert this from a block scoped
constant to a variable which is defined
before that try-catch block so
that we can set it from inside the try-catch block,
but then also use it thereafter here
when we call store post.
And we also might want to wrap this with a try-catch block
for better error handling.
But for the moment I'll leave it like this.
And that should now upload the image
and then store the link that can be used
for displaying the image in the database.
Therefore, what I'll do here is I'll delete this post.db
file to clear the database so that I erase all the data
and we start from scratch again so that the posts
that did not have an image are gone.
And if we now save everything
and we reload this page, the database will be recreated.
So there will be a new empty post.db file
or a file with empty tables.
And I can now recreate my data.
So now I'll again pick that image and enter a title
and then some content,
some delicious loaded fries I enjoyed
at the Pitmasters restaurant.
And if I now click create post,
you see this now takes a short while,
but then we reload this feed page
or we're redirected to that feed page
and we can see our image here which proves
that it seems to work.
And you can also see that on Cloudinary.
If you go to the media explorer there, you should have
that NextJS course mutations folder in there.
And if you navigate into that folder,
you should see this image here,
of course with a different name in your case
because that's auto-generated by Cloudinary
so that every file has a unique name,
but that's the image that was uploaded and it was uploaded
and stored successfully
because of that upload code I provided you with.
And that's therefore how you can upload and store images.
And with that,
we're therefore done with this new post functionality.
Next, I want to work on that like button.