WEBVTT 00:00.020 --> 00:05.300 Okay, let's finish off the functionality inside our drop zone now and make it part of our form so that 00:05.300 --> 00:12.530 the Or when an image is dropped inside the drop zone, we also display a preview of the image as well. 00:12.530 --> 00:16.370 So we're going to do some work inside our on drop method here. 00:16.370 --> 00:21.920 And by the way I was going to change the border colors actually because that's a bit bright. 00:22.550 --> 00:26.090 So we'll change it to 7676, 76 for this one. 00:26.090 --> 00:31.550 And also for the border color, because that's what we're overriding when we use the border color down 00:31.550 --> 00:33.680 here when we're active on that. 00:33.680 --> 00:36.320 And I think I'll just reduce this to two pixels as well. 00:36.620 --> 00:38.330 Maybe the border is a bit wide. 00:38.330 --> 00:44.090 And let's update our on drop method inside here. 00:44.090 --> 00:49.250 So we're going to check to see if the accepted files dot length is greater than zero. 00:49.280 --> 00:51.230 That means we've got something inside there. 00:51.230 --> 00:56.660 And we're going to create a preview version of what's been dropped in there so that we can display that 00:56.660 --> 00:58.400 inside our form as well. 00:58.430 --> 01:06.430 Now, in order to do that, we're going to need to create a URL of Other image that's effectively inside 01:06.430 --> 01:10.120 memory inside our browser, so that we can display it on the page. 01:10.120 --> 01:15.280 And the way that this is going to work is I'm going to specify const file with preview. 01:15.280 --> 01:19.420 And I'm going to say equal to objects dot assign. 01:20.110 --> 01:23.260 So we're going to add something to our file object in this case. 01:23.260 --> 01:25.060 And I'll specify accepted files. 01:25.060 --> 01:30.190 And because this is an array we'll access the file index of zero. 01:30.220 --> 01:33.370 We're only really going to let them upload one image at a time. 01:34.510 --> 01:38.080 Even though this utility does accept the files as an array. 01:38.110 --> 01:42.490 Then we'll open curly brackets and we'll add a preview property to the file. 01:42.490 --> 01:44.350 And we're going to use URL. 01:44.350 --> 01:47.740 And then the create object URL method. 01:47.740 --> 01:52.030 And then we'll pass in the accepted files at index of zero. 01:52.630 --> 01:57.730 Below this we'll then use our fields and the Onchange method. 01:57.730 --> 02:02.380 And we'll pass in the file with preview as its parameter. 02:03.850 --> 02:08.730 And then we've got something that we need to add to our dependency array, which is going to be the 02:08.730 --> 02:09.240 field. 02:09.240 --> 02:11.220 So we'll add that in there. 02:12.570 --> 02:19.200 So when we drop an image now into our product form, then that's going to be part of our form fields. 02:19.200 --> 02:24.930 And we'll have access to the file and its preview so that we can display the image in our browser. 02:24.930 --> 02:26.700 So we'll head back to the product form. 02:26.700 --> 02:32.640 And we're going to need to use something else from react hook form here so that we can watch a particular 02:32.640 --> 02:33.570 field. 02:33.720 --> 02:39.090 And in order to do that we're going to bring in an extra thing from react hook form called watch. 02:39.090 --> 02:45.870 And just underneath the form we'll say const watch file equals watch. 02:47.130 --> 02:51.090 And then we can specify file as the thing that we are watching here. 02:51.090 --> 02:54.780 And then we'll scroll down to where we're using our drop zone. 02:54.780 --> 03:01.260 And we will use Display and Display Flex. 03:01.410 --> 03:09.240 And we'll specify Justifycontent and space between and we'll align items. 03:11.400 --> 03:16.140 And specify center, and we'll keep our app dropzone as it is. 03:16.140 --> 03:18.660 But then we're going to check for the watch file. 03:18.660 --> 03:22.140 And if we have it let's use double ampersand. 03:23.220 --> 03:28.920 Open parentheses and we'll specify image or use the image tag. 03:28.950 --> 03:38.730 And we'll give it a source equal to and in curly brackets we'll use watch file dot preview. 03:38.730 --> 03:42.600 And we're going to have some type issues here at the moment that I'm just going to ignore for the time 03:42.600 --> 03:42.840 being. 03:42.840 --> 03:47.820 We'll just make sure we've got the functionality first, and then we'll come back and we'll adjust the 03:47.820 --> 03:51.360 types that we're going to have an issue with at the moment. 03:51.360 --> 04:01.980 And I'll just say alt preview of image and I'll give it a style and we'll give it a max height property 04:02.010 --> 04:04.080 of 200. 04:04.650 --> 04:10.350 And let's move some of this stuff down and I'll move this down as well. 04:10.380 --> 04:11.190 Okay. 04:11.190 --> 04:14.250 So that's our dropzone that we have inside here. 04:14.280 --> 04:18.360 we've got an image that we're going to preview after we have dropped an image in there. 04:19.140 --> 04:23.250 And we've got a to do for TypeScript as per normal. 04:23.250 --> 04:27.690 When we're doing anything slightly outside the norm, we need to do something with TypeScript. 04:28.260 --> 04:31.560 But we should be able to see how we're getting on now and what we should be able to see. 04:31.560 --> 04:37.560 If we go to our create, then we should be able to drop an image there and see a preview of the image 04:37.590 --> 04:38.910 on the right hand side. 04:38.910 --> 04:40.800 So let's give that a go. 04:40.800 --> 04:46.020 And I'll just drop one of the product images inside here so I can hover over. 04:46.020 --> 04:47.280 And that looks fine. 04:47.280 --> 04:51.210 And then I can see the preview of the image on the right hand side there. 04:51.360 --> 04:55.770 Now we're not doing anything to modify the image sizes or aspect ratios. 04:55.770 --> 05:01.350 We're going to keep it as whatever it is and then upload it to Cloudinary as whatever it is. 05:01.380 --> 05:08.160 We're using the object fit styling CSS, so it's still going to be displayed as a square image, but 05:08.160 --> 05:10.440 it will be cropped slightly using CSS. 05:10.440 --> 05:16.590 And then when they view the image or view the product, then they'll see the full image inside the product 05:16.590 --> 05:17.130 details. 05:17.130 --> 05:18.940 That's the way we're approaching it. 05:18.940 --> 05:20.560 But we can see that we have an image there. 05:20.560 --> 05:25.960 And if I do upload a different or do drop in a different image, it will simply be replaced. 05:25.960 --> 05:31.360 Here we're only going to allow one image upload at a time, as we've only got one image of course, 05:31.390 --> 05:34.150 associated with each product. 05:34.870 --> 05:37.570 So let's see how we're doing with regards to validation as well. 05:37.600 --> 05:44.830 I know we've got a TypeScript issue to deal with, but let's just see how far we get with our validation. 05:45.370 --> 05:51.910 If I populate all of these fields and we'll need several characters for the description, and I've got 05:51.910 --> 05:52.960 an image selected there. 05:52.960 --> 05:54.220 So let's click submit. 05:54.220 --> 05:57.880 And do I have validation even turned on in the product form. 05:57.880 --> 05:59.560 Let's take a look. 05:59.620 --> 06:01.330 And I've got the untouched. 06:01.330 --> 06:05.410 So I should be able to see if I remove the description. 06:05.410 --> 06:06.910 And I've got validation enabled. 06:06.910 --> 06:08.230 So there is enabled. 06:08.770 --> 06:15.430 And if I refresh and let's go create again. 06:15.430 --> 06:20.590 And if I submit then we do have validation inside here as well. 06:20.590 --> 06:22.750 Let's just double check if I drag an image in. 06:22.780 --> 06:24.340 Does the validation go away? 06:24.340 --> 06:25.450 And sure it does. 06:25.480 --> 06:33.850 Okay, so one small tiny issue with the type information inside here for the watch file preview. 06:34.090 --> 06:38.470 Because our watch file is a type of file, it's not a type of file with preview. 06:38.470 --> 06:40.540 So we can approach this a slightly different way. 06:40.540 --> 06:47.530 And what we can use is our product schema from Zod to do something with this file as well. 06:47.530 --> 06:52.360 So let's go back to our create product schema to help with the typing here. 06:52.360 --> 06:53.530 So we've got our file schema. 06:53.530 --> 06:55.840 And that's what we'll add to now. 06:55.840 --> 06:59.620 And we can use a transform that we get from Zod. 06:59.710 --> 07:06.010 And we can pass in our file at the arrow open parenthesis then curly brackets. 07:06.010 --> 07:12.220 And we can specify that we want to pass all of the properties of the file in using the spread operator. 07:12.220 --> 07:14.320 And then we can give it the preview. 07:14.320 --> 07:19.600 And we can use URL, create object URL and pass in the file here. 07:19.600 --> 07:25.380 And now if we go back to our product form then this is no longer showing an error for the type, because 07:25.380 --> 07:30.150 our watch file is effectively a file with the preview property. 07:30.150 --> 07:31.920 So that solves that particular problem. 07:31.920 --> 07:36.780 And if we just go back and double check and click create, and then just make sure we can still drag 07:36.780 --> 07:41.700 an image in, there's no reason why we shouldn't be able to with that small change that we've made. 07:41.700 --> 07:47.220 And I'll drop in the image again and we can see our boots appearing on the right hand side. 07:47.250 --> 07:48.270 Great. 07:48.360 --> 07:50.520 So now that's our form functionality. 07:50.520 --> 07:56.940 Let's just make sure that I can submit and make sure we've got a valid output for this before we go 07:56.940 --> 08:00.150 and actually deal with uploading to the server. 08:00.150 --> 08:07.560 So I'll just select a brand, I'll select a type, I'll preview, I'll add the quantity and I'll add 08:07.560 --> 08:09.450 some ink in for the description. 08:09.450 --> 08:15.270 And if we do click submit then we should see the output of our form inside here including the file the 08:15.270 --> 08:16.470 brand description. 08:16.470 --> 08:19.140 And that is all looking good. 08:19.140 --> 08:22.590 So we're ready now to tie all this in together with our API server. 08:22.590 --> 08:27.060 So next we'll take a look at how we can deal with the submission of this to our API. 08:27.060 --> 08:28.710 And that's coming up next.