Angular + CodeIgniter File Upload Example

Introduction

Angular + CodeIgniter file upload example will show here how to upload a file to server. Here CodeIgniter will be responsible for storing the file into a server location and Angular will be used on UI side to interact with end users, who will browse and select a file for uploading.

We will create CodeIgniter REST API and will integrate with Angular to upload a file.

Prerequisites

Apache HTTP Server 2.4, PHP 7.3.5, CodeIgniter 3.1.10

Setup REST API in CodeIgniter

Please read https://roytuts.com/file-upload-example-using-angular/ for Angular Application that is used on UI side.

Creating Project Directory

It’s assumed that you have setup Apache 2.4, PHP 7.3.5 and Codeigniter 3.1.10 in Windows system.

Now we will create a project root directory called codeIgniter-3.1.10-rest-file-upload under the Apache server’s htdocs folder.

Now move all the directories and files from CodeIgniter 3.1.10 framework into  codeIgniter-3.1.10-rest-file-upload directory.

We may not mention the project root directory in subsequent sections and we will assume that we are talking with respect to the project’s root directory.

Autoload Configuration

We need some configurations, such as, auto-loading helpers to avoid loading every time we need to use.

Modify application/config/autoload.php file for auto-loading libraries and helper functions.

This one time auto-loading gives flexibility to uniformly use the helpers and libraries anywhere throughout the application without loading repeatedly.

$autoload['helper'] = array('url', 'file', 'form');

Creating REST Controller Class

Create a file called FileUploadRestController.php under application/controllers with the below source code. This controller class handles request and response for the clients.

The header header('Access-Control-Allow-Origin: *'); specifies allow requests from any clients or any host. Ideally you should not allow all hosts for security reasons.

You need below code snippets to avoid CORS preflight issue:

if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
	header('Access-Control-Allow-Methods: POST');
	header('Access-Control-Allow-Headers: Content-Type');
	exit;
}

Next we include REST libraries

require APPPATH . 'libraries/REST_Controller.php';
require APPPATH . 'libraries/Format.php';

Notice below code snippets inside the REST controller class FileUploadRestController, the style of using REST libraries have been updated and you need to use this way for working properly.

...
use REST_Controller {
	REST_Controller::__construct as private __resTraitConstruct;
}

function __construct() {
	parent::__construct();
	$this->__resTraitConstruct();
}
...

The we have finally below method that uploads the file into the desired directory.

The function name is suffixed by _post because we are making POST request. So your actual URI is /upload not /upload_post.

function upload_post() {
   ...
}

Inside the upload_post() function we are checking whether the request method is POST by adding below condition:

if ($this->input->method()) {
   ...
}

Next we check whether file was selected for uploading or not and if not selected, then we send message to select a file with http status code 500 error.

Next if file is selected for uploading then we configure the upload library.

We check if the file already exists though if same file is selected for uploading will not be checked due to file name encryption in the upload library configuration. But if you do not configure encryption for file name then you will get message – file already exists.

Next we check if the upload or destination directory exists or not and if the directory does not exist then we create it and upload into this directory.

We show successful message on file upload or error message on file upload failure.

<?php
use Restserver\Libraries\REST_Controller;

defined('BASEPATH') OR exit('No direct script access allowed');

header('Access-Control-Allow-Origin: *');

if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
	header('Access-Control-Allow-Methods: POST');
	header('Access-Control-Allow-Headers: Content-Type');
	exit;
}

require APPPATH . 'libraries/REST_Controller.php';
require APPPATH . 'libraries/Format.php';

/*
 * @author https://roytuts.com
 */

class FileUploadRestController extends CI_Controller {
	
	use REST_Controller {
		REST_Controller::__construct as private __resTraitConstruct;
	}
	
	function __construct() {
        parent::__construct();
		$this->__resTraitConstruct();
    } 
	
	function upload_post() {
		if ($this->input->method()) {
			if(!$_FILES) {
				$this->response('Please choose a file', 500);
				return;
			}
			
			$upload_path = './uploads/';
			//file upload destination
			$config['upload_path'] = $upload_path;
			//allowed file types. * means all types
			$config['allowed_types'] = '*';
			//allowed max file size. 0 means unlimited file size
			$config['max_size'] = '0';
			//max file name size
			$config['max_filename'] = '255';
			//whether file name should be encrypted or not
			$config['encrypt_name'] = TRUE;
			
			$this->load->library('upload', $config);
			
			if (file_exists($upload_path . $_FILES['file']['name'])) {
				$this->response('File already exists => ' . $upload_path . $_FILES['file']['name']);
				return;
			} else {
				if (!file_exists($upload_path)) {
					mkdir($upload_path, 0777, true);
				}
				
				if($this->upload->do_upload('file')) {
					$this->response('File successfully uploaded => "' . $upload_path . $_FILES['file']['name']);
					return;
				} else {
					$this->response('Error during file upload => "' . $this->upload->display_errors(), 500);
					return;
				}
			}
		}
	}
	
}

Deploying the Application

Now run the Apache 2.4 server and your CodeIgniter application will be deployed.

Testing the Application

If you do not want to create Angular application, you can use Postman to test your REST API to upload a file using CodeIgniter REST API.

For Angular part as I said previously in Prerequisites section, you have to create exactly the same application. Make sure to put the URL as http://localhost/codeIgniter-3.1.10-rest-file-upload/index.php/FileUploadRestController/upload in Angular application’s service class – file.service.ts.

Make sure your Angular and CodeIgniter REST API are running on the server.

You will see below pages on your browser.

Home Page

angular codeigniter file upload example

Uploading File

When you select and upload a file.

angular codeigniter file upload example

You can verify the upload folder whether file uploaded successfully or not.

angular php file upload example

Source Code

download source code

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *