 Hey, welcome everybody and let's get started. So this is gonna be a super quick add-on to the previous tutorial that I've done on AWS S3 file upload using server actions. In this tutorial, I wanna show you how we can do multiple files at once instead of just one. So let's have a look at how we can do that. First of all, let's go back to the project and open the source folder, uploads, form, and then we need to go to form.js. So insert here is where all HTML form is. And for now we have an input which has the name of file and accepts images. You can set this to whatever you like, but for this example images is absolutely fine. Now, if I want to upload multiple files, it's actually fairly easy to do, but let me demonstrate this super quickly. If I choose file, right now I won't be able to select more than once I'm dragging my mouse or I'm trying with control, but I can't select more than one file. So if I select the cut here, you'll see that the cut is selected. So to convert this to allow multiple file uploads, all we need to do is here at the end we can just add multiple. And we're done. Save this, make sure that your browser refreshes of course. And now you can see here that it says choose files. If I click on choose files, now I should be able to drag my mouse and select more items. So I can click open. And as you can see here, we have three files which we can then upload. Make sure that you save this and close it. Now let's do the backend logic. So if you go back to the explorer, then source, upload form, and then we need to go to actions.js. Let's find the function that deals with the form when we selected the files. So I'm gonna scroll down to the bottom here and here it is, upload file. This is the function that we need to modify. So first of all, let's remove those three lines. And maybe let's comment this one out for now and we'll get back to it. So in this case, because we're getting multiple files, we need to change this from file, we can change it to files. And then form data, we can change this to get all like so. And this sheet allow us to get multiple files and then loop through them. So now we can create an array. Let's do const uploaded files like so. And this is gonna be an empty array and you don't really need to do this, but this could allow you to do multiple things. For example, you can push all the details from the files into this array and then use it to display feedback to the user or do further processing if you wish. So that's nice to have, but you don't need it. And then what we need to do now is loop through the files. If I grab the files from here, let's do console.log, for example, and put the files like so. Let's save this and let's refresh this super quickly and let's choose the files, open and I'm gonna open the console here. Let me zoom in and now I press upload file. Hopefully we should be able to see the three files. So this creates an array for us with the three files. Each file has a size, the type, the name and last modified, which is great. It's just like before, but in this case we have multiple files and in order to upload them, we can just loop through them and upload them one by one. So let me show you how this is gonna work. Somewhere around here, let's remove this and let's do a for loop. So for, I'm gonna do const file of files. So essentially I'm doing a loop of the files here and this can be called whatever you like, but this is what we're gonna be using inside the loop. So from here in curly brackets, we can do const buffer. In fact, we can grab this from here, which we've already done, remove the comment based in here and we have const buffer, buffer dot from await file, which we're grabbing from here now is basically looping through the array. And now we just need to upload the files. So I'm gonna grab this and I'm gonna do const file name, like so equals await upload file to S3, buffer, which we grab from here and then the file name, like so. So this is gonna do exactly the same thing as before and it's gonna start uploading the files. And if you wish to push each file into this array here, you don't have to, you can just do, you can grab this and you can do file upload dot push and then push each individual file and then you can do whatever you like with it. You don't need to do that to be fair. So I'm gonna tie the things up, save this and technically we should be good to go. So if you go back to my S3 bucket, refresh super quickly, you will see that I don't have any files just yet here. And if I go to my website here, all right, let's refresh this, let's choose files, select the three files here, open and then let's click file upload. As you can see, uploading, as you can see, we have file has been uploaded and that can be changed. Anyways, let's click on the S3 bucket now and refresh it and you should be able to see that we have all three files in here. The cat, let me open a full screen. If you want to see here, we have the cat and the other images, I can click on them. And if I click here, you'll be able to see the cat and the reason that the cat is actually cropped out, this is because in the last video, we actually use sharp to modify the quality and to resize it, of course, you don't need this and maybe you can just put 100% save it. Let's super quickly re-upload and this is gonna replace the original images because the name is exactly the same, so uploading. It's taking much longer for some reason, maybe because the images are much larger and file has been uploaded. Now, if I refresh the cat, we should be able to see the full cat and that's pretty much it. I hope that you found this useful. Consider liking this video, subscribe to my channel and hopefully I'll see you in the next one. Bye.