Hey there, everyone.
They share.
And let's talk about how to handle multiple images or multi file upload.
Again, this involves a tiny bit of the front end, which I don't really like for this course.
But again, you need to go into the post form and again need to make sure that there is a flag here
inside the input where you are handling all of the images, which is multiple.
Yeah, that's just a keyword that needs to be placed, otherwise you won't be able to select multiple
of the files or the images in this case.
Now, another thing that you need to pay very, very big attention is this sample file.
The name is still same.
So instead of being able to just see one data in itself, now it becomes an array and it handles multiple
of the file itself.
So be very cautious on that part.
This will heavily depends on how you actually accept the data.
So that's all what we'll be doing.
And I would like to give it a little bit of the faster go.
Don't want to just drag the course, but just let us go a little bit faster this time.
So what I'll do is instead of having all of this, let's first create a couple of variables.
So let me show you how to do that, because rest of the things you already understand, the cloud theory,
the issues, the files and the errors, especially, you know that all about it.
So I'm going to go ahead and call this one up here.
So this is going to be a result and we need another variable, if I can write that better result.
Yeah.
And another thing that we are going to need is an array.
So we're going to call this one as image array because I'm running out of the name.
So there we go.
And this is going to be the basic array.
What we're going to do with this array in just a minute, you will understand that how this is going
to work in let's go up here.
And this time I'll just comment this out so that you can have it for a later usage.
And there we go.
Now also into the final output, I would like to get the result as well as this image array as it is
so that we can see what's happening and the result part.
Now I have comment about this one and also notice here I'm storing this reference into this let file
equals to request file or sample file.
We probably don't need that part as well.
So let's go ahead and comment all of this out and we'll handle this case up here.
Let me go ahead and write a comment for this one.
So this one is going to be a simple use case for single image so that in exercise files you can actually
take care of that.
And this one is going to be a case for multiple images.
Now, only thing that you need to know and to be very cautious about is what we are calling these things.
We are calling them simply as sample image.
That's it.
Now let's first verify and these checks are always good.
Maybe you want to do it.
Maybe you don't want to do it.
So if we have something into the requested files, then only this piece of code is going to work.
Otherwise we'll just handle things as it is.
Maybe the images are optional or something like that.
So now we need to run the loop.
So let's go ahead and run the sample for loop.
We're going to call this one as index.
It will start from zero, of course, obviously.
Now, how long this is going to run?
This is going to run till request dot files because that's why I'm receiving the file.
But not just only there.
I have to go one step further and I have to say sample file because this sample file now is an array
and I can run a property of dot length onto this one and I'll keep on running this one till index plus.
Plus, there is no issue in that, but I'm not interested in the inside code, which is just making
a mess here.
Now what we're going to do is we are going to go ahead and say, Hey, Cloudera, I want to upload something.
So I'll just say, Hey, Uploader, just go ahead and upload one of my photo.
So which photo you might want to upload?
Obviously, we need to give it that.
So we're going to say request dot files, dot sample file.
And I told you this now becomes an error because you passed on a flag of multiple.
So I want to go ahead and upload whatever the index number is in the first case around zero, then the
second round one too, and so on.
But is it that much it no, that's not it because we already saw and had a long discussion that file
temp file path actually uploads the image.
So we're going to copy this one up here and I'm going to go ahead and say, hey, x is this property
and upload this one.
Is this all it?
No, because we need to pass on an option of folder as well.
So let's go ahead and say, hey, I want to have a folder where I want to select all the like the folder
name is users.
That's what I'm trying to say.
Okay, so this is it.
But we also saw that there is an option that I can store this one into a result.
So let's go ahead and say, hey, I want to store all of this into a result just like that.
But we also saw that it gives a problem, so we need to use a weight and already this entirety of the
thing is in the async.
So you get the idea of all of that.
But this is not it, this is not it.
You can actually go ahead and console.log this result at this point here as well.
But I'm not going to do that.
What are we doing is I'm going to go ahead and select this image array and I'm going to go ahead and
use a push of it and I'll be pushing this result entirely.
I can go ahead and push this result entirely, but that's not fun.
Let's go ahead and create an object.
Instead of that, we are pushing an object and this object will be pushing just the two properties.
So we're going to go ahead and.
Say, Hey, public underscore Earl or public ID not Earl.
Public ID.
Yeah.
And this is coming in.
We saw that it's actually resolved, not public ID.
That's what we saw in the result.
And by the way, this is just still here, in case you forgot from the last video.
So this is I'm storing public ID and I'm also interested in this security URL.
So these are the two properties that I'm accessing from the result itself.
I'm going to go ahead and put a comma just like that and this one will be secure URL.
So I'm going to go ahead and say secure your URL and the property that I'm interested in is secure URL.
So these are the two things I'm pushing in.
And hopefully by the time it has done all the rotation, like all the images that were selected got
uploaded, they will be pushed into this image array.
And finally we are dumping down this image array at the result itself.
So should be fine.
We won't be able to see this much into the console log.
We can actually do this instead of the details.
Yeah, we are dumping down the details entirely here.
We're not sending it into console.log, so let's go ahead and do that part as well.
So I'm going to go ahead and copy this.
Instead of the result, we are going to go ahead and have a console log here of the details as well
just to have some information for self as well.
And that's all that's all you need to do.
Let's go ahead and save this one and save it one more time.
And let's go back on to this one up here.
And this now should be in theory at least, should be able to select multiple files and we should be
able to get to go.
So let's go ahead and say test, test.
Let me select multiple files from my thumbnails that I created for the Go series.
So this is one, this is another.
I can hold on my control key or command key and can select multiple of them.
Let's select three of them and we're going to go ahead and upload this says three files.
That's good.
I'm going to go ahead and say I want to submit it.
This is going to take some time because obviously you're uploading three files, by the way.
It gives you the option of shrinking down the file, lower down the quality and whole bunch of things.
Since we are not in the front end, there is no loader on anything.
But as you can see, this object comes in not really good.
I'm more interested in my console.log because that's a better approach and it's giving us nice notice.
We say the result is undefined because I think we changed the name a little bit onto that.
We're calling it as a result, so probably something we can figure it out.
No worries on that part, I think just a typo or something.
But in the image error itself, we are able to receive the image public ID and we are able to hold the
security URL.
So this object in itself can be pushed into the database itself that, hey, these are the resources
and whether you are uploading username, multiple username, designing an Instagram, designing an e-commerce,
whatever you are designing, you can reuse this code as it is, but just for a confirmation, let's
also check whether things went into cloud or not.
Let's hit a reload.
And yes, this time we didn't have that much of fun with the errors and stuff because sometimes we need
to pace up the course as well.
I know you enjoy the the error part and all of that too much, but that's a little bit for my offline
courses whenever I take them.
So this is all good and everything is coming up nicely.
Okay, so where we are, we should move back on to the presentation.
There we go.
Okay.
So by this point, I expect that, you know, forms really in depth, you know, how to get homeworks
works.
You also understand that if the forms are designed into some of the templating engine like bug or maybe
something else similar to that, then it's requested params otherwise in react angular view, all of
those guys, it comes into the body format and you also understand about the post forms, the always
comes into the request body and you also understand now how to handle forms.
Again, handling the forms is really easy, but handling the images or file it requires a a coordination
between the front end guys and the back end guys.
You need to make sure that the form is a multipart form.
It's sending the files properly.
It either is sending me the data URL or not.
Then I have to make sure I have adjusted the back end according to that.
So it's all about coordination that you want to have and whenever the next time you see a YouTube are
talking about that, coordination is really important between the teams.
This is exactly the coordination we are talking about and this is kind of a chat we usually do in the
slack and all of that when we coordinate between the Learn Code online team and all of our other venture
teams as well.
So this is exactly what we do.
And now you know about the behind the scene details as well.
So if you are enjoying this series entirely, please let me know on my Instagram.
It helps me to motivate and to bring more such stories.
It's really important for me personally.
I know I'm asking too much, but spend a little bit of time, reach me out by email or Instagram and
just drop me a thanks for the series.
It helps me a lot.
This is this is really important for me.
So thank you so much.
And let's catch up in the next section.