Okay, let's finish off the functionality inside our drop zone now and make it part of our form so that
the Or when an image is dropped inside the drop zone, we also display a preview of the image as well.
So we're going to do some work inside our on drop method here.
And by the way I was going to change the border colors actually because that's a bit bright.
So we'll change it to 7676, 76 for this one.
And also for the border color, because that's what we're overriding when we use the border color down
here when we're active on that.
And I think I'll just reduce this to two pixels as well.
Maybe the border is a bit wide.
And let's update our on drop method inside here.
So we're going to check to see if the accepted files dot length is greater than zero.
That means we've got something inside there.
And we're going to create a preview version of what's been dropped in there so that we can display that
inside our form as well.
Now, in order to do that, we're going to need to create a URL of Other image that's effectively inside
memory inside our browser, so that we can display it on the page.
And the way that this is going to work is I'm going to specify const file with preview.
And I'm going to say equal to objects dot assign.
So we're going to add something to our file object in this case.
And I'll specify accepted files.
And because this is an array we'll access the file index of zero.
We're only really going to let them upload one image at a time.
Even though this utility does accept the files as an array.
Then we'll open curly brackets and we'll add a preview property to the file.
And we're going to use URL.
And then the create object URL method.
And then we'll pass in the accepted files at index of zero.
Below this we'll then use our fields and the Onchange method.
And we'll pass in the file with preview as its parameter.
And then we've got something that we need to add to our dependency array, which is going to be the
field.
So we'll add that in there.
So when we drop an image now into our product form, then that's going to be part of our form fields.
And we'll have access to the file and its preview so that we can display the image in our browser.
So we'll head back to the product form.
And we're going to need to use something else from react hook form here so that we can watch a particular
field.
And in order to do that we're going to bring in an extra thing from react hook form called watch.
And just underneath the form we'll say const watch file equals watch.
And then we can specify file as the thing that we are watching here.
And then we'll scroll down to where we're using our drop zone.
And we will use Display and Display Flex.
And we'll specify Justifycontent and space between and we'll align items.
And specify center, and we'll keep our app dropzone as it is.
But then we're going to check for the watch file.
And if we have it let's use double ampersand.
Open parentheses and we'll specify image or use the image tag.
And we'll give it a source equal to and in curly brackets we'll use watch file dot preview.
And we're going to have some type issues here at the moment that I'm just going to ignore for the time
being.
We'll just make sure we've got the functionality first, and then we'll come back and we'll adjust the
types that we're going to have an issue with at the moment.
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
of 200.
And let's move some of this stuff down and I'll move this down as well.
Okay.
So that's our dropzone that we have inside here.
we've got an image that we're going to preview after we have dropped an image in there.
And we've got a to do for TypeScript as per normal.
When we're doing anything slightly outside the norm, we need to do something with TypeScript.
But we should be able to see how we're getting on now and what we should be able to see.
If we go to our create, then we should be able to drop an image there and see a preview of the image
on the right hand side.
So let's give that a go.
And I'll just drop one of the product images inside here so I can hover over.
And that looks fine.
And then I can see the preview of the image on the right hand side there.
Now we're not doing anything to modify the image sizes or aspect ratios.
We're going to keep it as whatever it is and then upload it to Cloudinary as whatever it is.
We're using the object fit styling CSS, so it's still going to be displayed as a square image, but
it will be cropped slightly using CSS.
And then when they view the image or view the product, then they'll see the full image inside the product
details.
That's the way we're approaching it.
But we can see that we have an image there.
And if I do upload a different or do drop in a different image, it will simply be replaced.
Here we're only going to allow one image upload at a time, as we've only got one image of course,
associated with each product.
So let's see how we're doing with regards to validation as well.
I know we've got a TypeScript issue to deal with, but let's just see how far we get with our validation.
If I populate all of these fields and we'll need several characters for the description, and I've got
an image selected there.
So let's click submit.
And do I have validation even turned on in the product form.
Let's take a look.
And I've got the untouched.
So I should be able to see if I remove the description.
And I've got validation enabled.
So there is enabled.
And if I refresh and let's go create again.
And if I submit then we do have validation inside here as well.
Let's just double check if I drag an image in.
Does the validation go away?
And sure it does.
Okay, so one small tiny issue with the type information inside here for the watch file preview.
Because our watch file is a type of file, it's not a type of file with preview.
So we can approach this a slightly different way.
And what we can use is our product schema from Zod to do something with this file as well.
So let's go back to our create product schema to help with the typing here.
So we've got our file schema.
And that's what we'll add to now.
And we can use a transform that we get from Zod.
And we can pass in our file at the arrow open parenthesis then curly brackets.
And we can specify that we want to pass all of the properties of the file in using the spread operator.
And then we can give it the preview.
And we can use URL, create object URL and pass in the file here.
And now if we go back to our product form then this is no longer showing an error for the type, because
our watch file is effectively a file with the preview property.
So that solves that particular problem.
And if we just go back and double check and click create, and then just make sure we can still drag
an image in, there's no reason why we shouldn't be able to with that small change that we've made.
And I'll drop in the image again and we can see our boots appearing on the right hand side.
Great.
So now that's our form functionality.
Let's just make sure that I can submit and make sure we've got a valid output for this before we go
and actually deal with uploading to the server.
So I'll just select a brand, I'll select a type, I'll preview, I'll add the quantity and I'll add
some ink in for the description.
And if we do click submit then we should see the output of our form inside here including the file the
brand description.
And that is all looking good.
So we're ready now to tie all this in together with our API server.
So next we'll take a look at how we can deal with the submission of this to our API.
And that's coming up next.