Hi, In this blog post, we will do multiple file uploads using ajax in JS and PHP. This will help you to make large files upload more simply. We will also add a progress bar that enhances the UI and UX of the application. All the source code is given below at the end of the post.
Start with HTML
Let's create some HTML elements like buttons etc, that will help us to interact with the application. First, create a container element that contains all the elements. Then create an input for file upload and a button for the start process. The input file button must have a "multiple/" attribute in the tag to let a user select multiple files. We also need to show the percentage completed in file upload, so create a div element for that. In the end, create a div element for the progress bar along with a span inside.
User Click on Start Button
Now, code the JS part of the application. Execute a function when the user clicks on a button. Write the whole code of the process in this function.
Make HTTP Request
We will use AJAX to make the HTTP request to load our PHP file that will upload our files. Use the XMLHttpRequest function to initialize HTTP requests and pass the POST method and PHP file path to the open() function as a parameter.
Append File Data
Now append all file data in a data variable to pass to the PHP file. Use the FormData function which can append multiple types of data in a form and is easily readable on the PHP file. Here, have multiple files in a single upload button. Use for loop to append data and use the "file" prefix as the key and the loop will add the "i" value automatically. Now the keys become file0, file1, file2 ... with the respective file from the selector button. Now, the value of input.files[0] assign to file0, input.files[1] assign to file1 and so on. Also, append the total number of files in a key named "files_length". We will use it later for extracting files from the form in PHP.
Send Data
Now, we have collected all files and total number of files in a "data" variable. Pass the data over HTTP to our PHP file during making request. Use send() function and give the data variable as a parameter. After sending the request, data will start transferring.
Progress Bar
Use onprogress method to get the transfer progress detail of the process. It returns the event that has loaded and total data. We can use that event to get the percentage completed of the transfer. With percent, we will set up the progress bar. Set the inner span width to the received percent from the event. Width will auto-increasing as the percent increase due to loaded data increase. Math.floor() will round the percentage. Check this video to get more out of that event like MBps, time left, loaded ratio, etc.
Completion
We can also get the completion using onload function. This function will execute when the file is completely loaded and all data is transferred. We can give a response to the user that the process is completed on this function.
Code for PHP file
First, get the number of files using the same key used as appending. Use for loop to get the file of each key using the prefix "file" and add "i" at the end. Now the files will be taken from file0, file1, file2 ... respectively. Create a folder in the same directory named "Uploads" for the uploaded files and set the target file path. It's a path where files will store. It includes folder name and file name in it. Now, just use the move_uploaded_file() function, which will transfer the file from the temp location to the target path.
Final Thoughts
Multi uploader is an amazing project for websites that needs to upload multiple files from users. This will help users to select all files at once and show the progress bar. This enhances the UI and UX of the application. Get the source code below comment below if you have any suggestion.
