In this video.
Let's get started with our project and the file upload.
And you are going to upload files from the client side that is the browser.
And then we sit into cloud nine and then we save the link into our database.
And lastly, we will display it on the page.
So let's see how we are going to implement that.
We are going to use the same template or our previous project to finish up for rendering templates like
this one.
We have covered it in details, so I assumed that you knew how to render some templates.
This route is for the homepage and then this route slash upload which is get render a form for upload.
So when I click on upload, you see that I get the form to upload and this handle to get it done.
And this post requests as you saw, make the actual request to Cloudera to upload.
And then this route is for rendering all the images on the page.
So let's get started with the implementation for this project, we are 99% done.
What has left is to connect the client to the back end and that is all and you need to save the file
into MongoDB.
So let's see how so let's get back to the form where we are uploading, which is the upload.
And let me show you some of the important attributes here.
The first one is action and it goes to the post route for the upload and the method is posts and you
need to provide the end type which is multipart form data.
With this one, we are telling Express that the kind of data that we are sending is of type for data.
Inside the input we have an attribute called name with a value called file.
The value here is what we need to pass in to Malta when we are configuring it, which is this one as
you saw in the previous video, and the same thing that we did when we are making the request from Postman
and that's all what we need.
So if I make a request, you can see that I'm going to send that file to Cloud Neri and that is it.
So now let's get back to the form here and when I open it and then click on this file, let me select
this file and then hit send and click on upload.
You can see that it is pinning and now I get a message that file uploaded successfully if I check my
terminal here, let's see the magic here and we have it.
So what has left is we need to save this one to MongoDB and that is it and that is it.
So let's see.
So back to our config or our model, you can see that I have a model called Gallery and for this I provided
only one field code name going to be the name of the image or the string of the image.
It can be anything here and then I export it as that.
So now inside the server I need that model.
So here we go.
Let me require the gallery model and I have the auto import.
I'll start now.
Let's remove this one and let's get into the route for upload.
Here we have the actual link on the path.
So let's see the property we are going to get, which is on the path.
So file that path.
We have this link, so let's go back to the route.
So here we go.
So after we get the file, so let's assign to a variable called file which is equal to.
Rick.
Dart file.
Dart path.
And that's a power you got from ordinary.
Next is I want to save this one to MongoDB.
So have mark my function as an async and let's make use of try and catch here because we want to talk
to Cloudera and MongoDB.
So here we go.
Const and then gallery or picture is equal to.
Gallery model dot crates and then I'll provide name which.
Which is the fire I want to save, which is a string, and that is it.
After creating, I want to send the user to this page called Images, which is four slash images, this
page.
So after creating red dot render and the templates is called images and if something goes wrong, let's
just send some text.
And send the error to the page or let's say something went wrong.
Okay.
So now let's have a look.
Let's console.log the.
Saved image call.
Pick up picture now.
Moment of truth.
Let's get back to the form and click on upload and let select image that you want to upload.
Let's see this one and upload.
Let's see.
It is going to take us to a we have it.
So let's check our you get something.
I get what is called pending meaning I need to await my requests.
Sorry guys.
I need to await and save it.
And let's try again upload and let's select this image and click on that and upload.
Let's see.
Well, I guess something went wrong again.
Oh, sorry.
We need to connect to MongoDB because we are not calling the function to connect.
Sorry, guys.
So let's come back here and then require the db connect or connect db.
And I start and let me call it as that.
So now let's save it and let's make sure that DB has connected and indeed connected.
So let's get back to the page and make requests again.
This time around, I guess something correct.
A I have it here as that if I check my MongoDB using this extension as we discussed before.
Now let me click on that and let's see the image that has been saved into my MongoDB.
Now let me see the collection under block.
I think the name is blocked.
Let me see the name of the connection, which is tests.
So it is test collection.
So under this one we see we have the gallery and one document and this is an image from Cloud Neri.
So let's go ahead and upload one more or two more.
Let me select this one or this one or this.
Yeah.
And let me hit send and upload a we have it now.
Everything is working fine.
The next step is we need to fetch and populate onto the page.
And for this one too, we have done it many times.
So it's going to be pretty simple, right?
So let's get back to the server and where we have the root which gets images.
This is a route, so let's go ahead and then fetch all the images from our database.
So let's make use of try and catch again.
If something went wrong, you're going to say st something went wrong.
Let me cut this one and then put it inside here.
So let's go ahead and make requests to MongoDB to fetch all images.
So const images is equal to our with our gallery and then dirt fine.
As that.
And next is our pass as a second argument to this template called images.
So if I console.log images here, let's see if you're going to get that before we display them.
So let me go to slash images and I have the images here.
So let me check my terminal and you can see that I have all the images from my database, how awesome
it is.
So now on the templates, I can go ahead and look through that.
So inside the images template here.
Now let's see how we can look through inside this container.
We are displaying some static images, so instead we are going to remove everything.
And remember we've talked about how we can look through data inside ugg's template to.
Let me maintain only one because I need one to have the structure.
Good.
So it has left with only one, which is this one, this card.
So what I'm going to do is that I'm going to cut everything from here.
And on a template I have what is called the images.
So going to be as images dot for each.
And I have access to individual images.
And inside outpace that.
And I need to wrap this one inside Exxon tax.
And down here also.
So let's save it and let's refresh it.
Well, I get some error.
Let's check it out and see where it's supposed to be.
Images.
All right, so let's refresh it.
And indeed, we have three images.
So now let's use the images from our database.
So let's remove the value for source and let's use our own image.
Is it going to be just equal to post dot name?
That is the name of the image.
Now let's refresh it.
Something is coming.
Hey, guys.
There you go.
So let's go ahead and upload more images from let's say I want this one brand an Ike and well, I got
reference error.
Image is not defined.
This error simply means that by the time we hit the endpoint for render images at that time there is
no value being passed to the template core images.
So at this point there is no value on the images and we are trying to use what is called for each on
it.
So for this we can use what is called optional tuning by using the question mark.
And for the post tool we are using question mark.
This simply means that if there are some images, then go ahead and use the for edge on it, otherwise
ignored.
So let me change this one to IMG to be more specific as I am.
IMG All right, so let's save it.
And now let's refresh it now let's go home again and then let's refresh the entire page differently.
We are going to see the image that we uploaded and here we go.
We can see that we have uploaded multiple times.
So that is pretty much of it.
And this application to is responsive so we can put it on a portfolio and here we go.
Now we are able to build real world application where we can upload file to cloud to DB and then we
display it.
That's great.