1 00:00:00,000 --> 00:00:03,000 So with all that, we are now finally done 2 00:00:03,000 --> 00:00:06,000 with most of this server actions code. 3 00:00:06,000 --> 00:00:08,000 But one crucial feature is missing here 4 00:00:08,000 --> 00:00:11,000 and that's of course this file upload, 5 00:00:11,000 --> 00:00:14,000 which we're not doing at this point. 6 00:00:14,000 --> 00:00:18,000 So as a first step, I'll actually start by changing 7 00:00:18,000 --> 00:00:22,000 that label because I actually don't want the image URL here, 8 00:00:22,000 --> 00:00:24,000 I want the image file instead. 9 00:00:24,000 --> 00:00:28,000 So in that post form component, 10 00:00:28,000 --> 00:00:31,000 I'll change that label to just image. 11 00:00:31,000 --> 00:00:33,000 But then more importantly, I wanna make sure 12 00:00:33,000 --> 00:00:36,000 that we can store that image somewhere. 13 00:00:36,000 --> 00:00:40,000 And as you learn in the essentials section, 14 00:00:40,000 --> 00:00:44,000 we can't really store it in our NextJS project. 15 00:00:44,000 --> 00:00:47,000 We could store it in the public folder, 16 00:00:47,000 --> 00:00:50,000 but there it will only be available during development, 17 00:00:50,000 --> 00:00:53,000 not when we run this app in production. 18 00:00:53,000 --> 00:00:58,000 And therefore this all isn't a great solution. 19 00:00:58,000 --> 00:01:00,000 Instead, you should typically store it on something like 20 00:01:00,000 --> 00:01:03,000 AWSS free 21 00:01:03,000 --> 00:01:07,000 or a provider like Cloudinary, which is the service I'll use 22 00:01:07,000 --> 00:01:09,000 for this section 23 00:01:09,000 --> 00:01:12,000 because we can get started with it for free 24 00:01:12,000 --> 00:01:16,000 and for this section we'll just need that free plan. 25 00:01:16,000 --> 00:01:18,000 So you don't need to pay anything 26 00:01:18,000 --> 00:01:22,000 and therefore you can create an account 27 00:01:22,000 --> 00:01:24,000 with Cloudinary for free. 28 00:01:24,000 --> 00:01:27,000 And once you did that, we can install the Cloudinary 29 00:01:27,000 --> 00:01:32,000 package into our project to get started using Cloudinary. 30 00:01:32,000 --> 00:01:35,000 So for that, I'll quit that development server 31 00:01:35,000 --> 00:01:38,000 and run NPM install Cloudinary here in my project. 32 00:01:39,000 --> 00:01:44,000 And then I created some extra file which you find attached, 33 00:01:44,000 --> 00:01:47,000 a file named Cloudinary.js, 34 00:01:47,000 --> 00:01:49,000 which you should add into your lip folder, 35 00:01:51,000 --> 00:01:55,000 which contains all the code needed to take an image file 36 00:01:55,000 --> 00:01:57,000 and upload it to Cloudinary. 37 00:01:59,000 --> 00:02:02,000 And it'll upload it into a folder named NextJS course 38 00:02:02,000 --> 00:02:06,000 mutations on Cloudinary though you could change that name 39 00:02:06,000 --> 00:02:07,000 to anything you want. 40 00:02:08,000 --> 00:02:13,000 Now to work this file will need some 41 00:02:13,000 --> 00:02:16,000 configuration that allows it to work 42 00:02:16,000 --> 00:02:18,000 with your Cloudinary account. 43 00:02:19,000 --> 00:02:22,000 And for that we should set up some environment variables. 44 00:02:22,000 --> 00:02:25,000 And in NextJS you can easily do that 45 00:02:25,000 --> 00:02:30,000 by adding a .env.local file in your root project folder. 46 00:02:32,000 --> 00:02:35,000 And in that file you can now set up some environment 47 00:02:35,000 --> 00:02:38,000 variables that will be made available 48 00:02:38,000 --> 00:02:42,000 to your NextJS code automatically by NextJS. 49 00:02:43,000 --> 00:02:46,000 So here I'm expecting free environment variables, 50 00:02:46,000 --> 00:02:50,000 Cloudinary cloud name, Cloudinary API key 51 00:02:50,000 --> 00:02:53,000 and Cloudinary API Secret. 52 00:02:53,000 --> 00:02:56,000 And therefore you should set all three variables 53 00:02:56,000 --> 00:02:59,000 in that .env.local file. 54 00:03:00,000 --> 00:03:03,000 Now to which values should you set them? 55 00:03:03,000 --> 00:03:08,000 Well, you find those values in your Cloudinary project 56 00:03:08,000 --> 00:03:10,000 here in this box. 57 00:03:10,000 --> 00:03:15,000 And of course you should not use my values but yours. 58 00:03:15,000 --> 00:03:19,000 Here you find your cloud name, your API key 59 00:03:19,000 --> 00:03:23,000 and the API secret, which is hidden here though, 60 00:03:23,000 --> 00:03:27,000 but you find it in a non hidden way under dashboard 61 00:03:28,000 --> 00:03:32,000 and there you can copy it in a non hidden way. 62 00:03:33,000 --> 00:03:36,000 So you should copy the cloud name from there 63 00:03:36,000 --> 00:03:38,000 and set that as a value 64 00:03:38,000 --> 00:03:41,000 for your Cloudinary cloud name environment variable. 65 00:03:41,000 --> 00:03:45,000 Copy the API key and set that as a value 66 00:03:46,000 --> 00:03:48,000 and copy the API secret 67 00:03:48,000 --> 00:03:50,000 and set that as a value so 68 00:03:50,000 --> 00:03:53,000 that all free environment variables are set. 69 00:03:54,000 --> 00:03:59,000 With that done, you can then restart the development server. 70 00:03:59,000 --> 00:04:02,000 And now this Cloudinary code should work 71 00:04:02,000 --> 00:04:04,000 and should allow you to upload images 72 00:04:04,000 --> 00:04:06,000 to your Cloudinary account. 73 00:04:08,000 --> 00:04:11,000 Therefore, now as a next step, we should go 74 00:04:11,000 --> 00:04:15,000 to our posts JS action file. 75 00:04:15,000 --> 00:04:18,000 And there, after validating all the input, 76 00:04:18,000 --> 00:04:21,000 before storing the post in the database, 77 00:04:21,000 --> 00:04:25,000 we should try to upload the image to Cloudinary. 78 00:04:25,000 --> 00:04:29,000 And for that you can now call the upload image function, 79 00:04:29,000 --> 00:04:32,000 which is exported from that cloudinary file 80 00:04:32,000 --> 00:04:35,000 I provided to you, you must import it from there 81 00:04:37,000 --> 00:04:40,000 and then pass your image value 82 00:04:40,000 --> 00:04:42,000 to this upload image function. 83 00:04:43,000 --> 00:04:47,000 Now upload image actually will yield a promise which will 84 00:04:47,000 --> 00:04:51,000 then eventually give you a URL to that uploaded file, 85 00:04:51,000 --> 00:04:55,000 a URL that can be used for displaying the image. 86 00:04:55,000 --> 00:04:57,000 And therefore here I'll await this 87 00:04:57,000 --> 00:04:59,000 and I'll get back my image URL. 88 00:05:02,000 --> 00:05:04,000 Now this process here could fail, 89 00:05:04,000 --> 00:05:07,000 so therefore we should actually wrap that with try catch 90 00:05:09,000 --> 00:05:12,000 and throw a custom error object 91 00:05:12,000 --> 00:05:14,000 with a custom error message 92 00:05:14,000 --> 00:05:17,000 that could be displayed on the screen with help 93 00:05:17,000 --> 00:05:19,000 of the error JS file about which you learned 94 00:05:19,000 --> 00:05:21,000 earlier in the course already. 95 00:05:22,000 --> 00:05:25,000 So here I'll then throw an error where I'll say, 96 00:05:25,000 --> 00:05:30,000 image upload failed post was not created. 97 00:05:30,000 --> 00:05:32,000 Please try again later. 98 00:05:32,000 --> 00:05:33,000 Something like this. 99 00:05:35,000 --> 00:05:37,000 Now if we make it past this, 100 00:05:37,000 --> 00:05:40,000 try-catch block though we know that it worked. 101 00:05:40,000 --> 00:05:43,000 And then I wanna store this image URL in the database. 102 00:05:44,000 --> 00:05:48,000 Therefore I'll actually convert this from a block scoped 103 00:05:48,000 --> 00:05:51,000 constant to a variable which is defined 104 00:05:51,000 --> 00:05:54,000 before that try-catch block so 105 00:05:54,000 --> 00:05:58,000 that we can set it from inside the try-catch block, 106 00:05:58,000 --> 00:06:00,000 but then also use it thereafter here 107 00:06:00,000 --> 00:06:02,000 when we call store post. 108 00:06:04,000 --> 00:06:08,000 And we also might want to wrap this with a try-catch block 109 00:06:08,000 --> 00:06:10,000 for better error handling. 110 00:06:10,000 --> 00:06:13,000 But for the moment I'll leave it like this. 111 00:06:13,000 --> 00:06:16,000 And that should now upload the image 112 00:06:16,000 --> 00:06:19,000 and then store the link that can be used 113 00:06:19,000 --> 00:06:23,000 for displaying the image in the database. 114 00:06:23,000 --> 00:06:28,000 Therefore, what I'll do here is I'll delete this post.db 115 00:06:29,000 --> 00:06:33,000 file to clear the database so that I erase all the data 116 00:06:33,000 --> 00:06:38,000 and we start from scratch again so that the posts 117 00:06:38,000 --> 00:06:41,000 that did not have an image are gone. 118 00:06:41,000 --> 00:06:44,000 And if we now save everything 119 00:06:44,000 --> 00:06:49,000 and we reload this page, the database will be recreated. 120 00:06:49,000 --> 00:06:52,000 So there will be a new empty post.db file 121 00:06:52,000 --> 00:06:55,000 or a file with empty tables. 122 00:06:55,000 --> 00:06:59,000 And I can now recreate my data. 123 00:06:59,000 --> 00:07:02,000 So now I'll again pick that image and enter a title 124 00:07:02,000 --> 00:07:04,000 and then some content, 125 00:07:04,000 --> 00:07:09,000 some delicious loaded fries I enjoyed 126 00:07:10,000 --> 00:07:13,000 at the Pitmasters restaurant. 127 00:07:15,000 --> 00:07:17,000 And if I now click create post, 128 00:07:17,000 --> 00:07:20,000 you see this now takes a short while, 129 00:07:20,000 --> 00:07:23,000 but then we reload this feed page 130 00:07:23,000 --> 00:07:26,000 or we're redirected to that feed page 131 00:07:26,000 --> 00:07:29,000 and we can see our image here which proves 132 00:07:29,000 --> 00:07:31,000 that it seems to work. 133 00:07:31,000 --> 00:07:33,000 And you can also see that on Cloudinary. 134 00:07:33,000 --> 00:07:36,000 If you go to the media explorer there, you should have 135 00:07:36,000 --> 00:07:39,000 that NextJS course mutations folder in there. 136 00:07:39,000 --> 00:07:41,000 And if you navigate into that folder, 137 00:07:41,000 --> 00:07:44,000 you should see this image here, 138 00:07:44,000 --> 00:07:46,000 of course with a different name in your case 139 00:07:46,000 --> 00:07:49,000 because that's auto-generated by Cloudinary 140 00:07:49,000 --> 00:07:51,000 so that every file has a unique name, 141 00:07:51,000 --> 00:07:54,000 but that's the image that was uploaded and it was uploaded 142 00:07:54,000 --> 00:07:56,000 and stored successfully 143 00:07:56,000 --> 00:07:59,000 because of that upload code I provided you with. 144 00:07:59,000 --> 00:08:03,000 And that's therefore how you can upload and store images. 145 00:08:03,000 --> 00:08:04,000 And with that, 146 00:08:04,000 --> 00:08:08,000 we're therefore done with this new post functionality. 147 00:08:08,000 --> 00:08:11,000 Next, I want to work on that like button.