Multiple Files Upload using AJAX(jQuery) in Codeigniter

Today’s tutorial we are showing how to upload multiple files using ajax in Codeigniter.

Prerequisites

php7.2, Apache 2 Server, JQuery, Codeigniter 4

Creating the Project Directory

We are not talking about how to download and install Codeigniter in your local system. But you may this script in already installed Codeingter 4 instance.

Also create directory called uploads under the writable directory from project root.

Your controller will have the below methods, we will implement the function in the next steps.

<?php namespace App\Controllers;

class Upload extends BaseController
{
	public function index()
	{
		
	}

	public function doupload()
	{
		
	}
}

Above file, index method is just for showing the upload form, and there is nothing much happening in this method. The doupload method is responsible for the server side script to upload a real file and save in the server. We will write the contents of this file after we discuss the upload form in detail.

Create a View

Create a view called upload_form.php under app/Views folder. This view is called from the index method in Upload controller.

Below is the main content of the upload form view in our tutorial.

Include the jQuery library in the head section of the script, to execute the jQuery functions.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

I have used Bootstrap CSS here to get help for styling, so Bootstrap will deal with heavy lifting of CSS and not diving deep to that part.

<main style="width:500px;margin:0 auto;">
<form class="form-signin">

  <div id="message"></div>
  <div class="text-center mb-4">
    
    <h1 class="h3 mb-3 font-weight-normal">Upload Multiple Files</h1>
    <p>This form capable of upload multiple images at once.</p>
  </div>

  <div class="form-label-group">
    <input type="file" id="files" name="files[]" multiple="multiple" >
    <label for="inputEmail">Files</label>
  </div>

  
  <button class="btn btn-lg btn-primary btn-block" id="upload_btn" type="button">Upload</button>
  <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p>
</form>
</main>


<script type="text/javascript">
	$(document).ready(function (e) {
		$('#upload_btn').on('click', function () {
			var formData = new FormData();
			var totalFilesLen = document.getElementById('files').files.length;
			for (var i = 0; i < totalFilesLen; i++) {
				formData.append("files[]", document.getElementById('files').files[i]);
			}
			$.ajax({
				url: 'http://localhost:8888/codeigniter/public/upload/doupload',  
				dataType: 'text', 
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				type: 'post',
				success: function (response) {
					$('#message').html(response);
				},
				error: function (response) {
					$('#message').html(response); 
				}
			});
		});
	});
</script>

Controller function in detail

Below is the controller in full

<?php namespace App\Controllers;

class Upload extends BaseController
{
	public function index()
	{
		return view('upload_form');
	}

	public function doupload()
	{
		if($files = $this->request->getFiles())
		{	
			foreach($files['files'] as $file)
			{
				if ($file->isValid() && ! $file->hasMoved())
				{
					$newName = $file->getName();
					$file->move(WRITEPATH.'uploads', $newName);
				}
			}
			print "Files are uploaded";
		}
		else {
			print "There is no files selected";
		}
	}

}

You can see the index() method just called the upload form to display the multiple upload form.
The next method doupload() is the main method that upload the files to server via Ajax. At first line, it check is there any files existing, if so it uploads the file in the next line. I have used codeigniter $request library to fulfill the file upload. You can use whatever php way that you familiar with.