Codeigniter Image Upload on Server Code Tutorial

By | December 21, 2016

Are you looking for a simple tutorial in codeigniter image upload. In this post we have explained how to upload image in codeigniter on server. Image upload are core of any web application. Codeigniter is a great PHP framework which provides amazing functionality to do so. We are going to use very simple method and code. Our code also uses encryption methods so that our images are secured. We will simply use view and controller to upload image. For this tutorial we will not use model.

codeigniter image upload

Simply download the code and follow the instructions.

Before we begin simply create a folder uploads in the home directory where you will find folders like application, system, user guide etc. And edit config.php file in application> config folder.

change $config[‘base_url’] = ”; to

$config[‘base_url’] = ‘http://localhost/codeignter/’;

Lets check how to upload image With CodeIgniter with souce code

 

Codeigniter Image Upload With Source Code

upload_view.php

In this file we will upload image and our form will redirect to controller’s method upload() which will further perform the operation to upload image file on server.

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TechPlugg Dashboard</a>
</div>

<ul class="nav navbar-nav navbar-right">
</ul>

</div>

<!-- /.navbar-collapse -->
</div>

<!-- /.container-fluid -->
</nav>

<form enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/uploadfile/upload" method="post" >
<input type="file" name="userfile" size="20" />
<input type="submit" value="Upload File" class="btn btn-primary"/>

</form>
<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>

</body>
</html>

Controller

uploadfile.php
In the controller uploadfile.php we have three methods index() which calls the homepage which is to upload file. Second method upload() which will help us to upload file to server. Here we will provide types of image file png, jpeg, gif and we are encrypting it with the unique name.
Our last method is to redirect user after file is uploaded successfully.

<?php
class uploadfile extends CI_Controller {

 function __construct()
 {
 parent::__construct();
 $this->load->helper(array('form', 'url'));
 }

 //index function
 function index()
 {
 //load file upload form
 $this->load->view('upload_view');
 }

 //file upload function
 function upload()
 {
 #Images
 $config['upload_path'] = './uploads/';
 $config['allowed_types'] = 'gif|jpg|png';
 $config['max_size'] = '2000';
 $config['encrypt_name'] = true;
 //$config['max_width'] = '1024';
 //$config['max_height'] = '768';
 $this->load->library('upload', $config);
 $userfile = '';
 if ( ! $this->upload->do_upload('userfile'))
 {
 $error = array('error' => $this->upload->display_errors());
 
 }
 else
 {
 $data = array('upload_data' => $this->upload->data());
 $userfile = $data['upload_data']['file_name'];
 redirect(base_url()."index.php/uploadfile/success");
 }
 
 }
 function success()
 {
 $this->load->view('success_upload');
 } 
}
?>

success_upload.php
In this file we are simply providing message after successful upload.

<?php
echo "File upload successful";

?>
<a href="<?php echo base_url(); ?>index.php/uploadfile/">Upload file</a>

Also check Codeigniter Login System
So I hope codeigniter image upload tutorial was simple. If you have any doubts please leave a comment.