How To Upload Image And File In CodeIgniter

File uploads are an essential process in many web apps. Almost every website and web app requires an integrated file upload component. File and image upload in CodeIgniter powered app is a simple component that takes care of the upload process with little issues.

This tutorial discusses the process of creating a CodeIgniter based file upload component that could be easily used t upload images and other files with ease. You could validate and even restrict file size and type during the upload process.

Folder Creation

The first step is the creation of two folders that form the basis of the upload process. The first folder is the destination folder that would receive the uploaded files.

Next, go to the root of the CI installation and create a folder named “uploads”.

Go to the view folder (located at the root of the CI installation) and create two new “view” files. Name these files file_view.php (displays the form containing file upload fields) andupload_success.php (displays the upload successful message).

Create the Controller

The next step is the creation of a file in the controller folder. Name the file upload_controller.php. In this file, I will load a library for initializing the Upload class through the following code:

1

$this->load->library('upload');

Set File Upload Preferences

I will also set the preferences for the file upload process through the controller function do_upload(). this function will contain the following code:

1

2

3

4

5

$config['upload_path'] = './uploads/';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = '100';

$config['max_width'] = '1024';

$config['max_height'] = '768';

As you could see, through this function, you could easily restrict the upload path, allowed file types, maximum size and dimensions of the image.

you could see this function in action when you call the file_view.php file. if you are at a staging domain, use the URL: your-domain/ci_demo/index.php/upload_controller/file_view OR in the case of loclhost: localhost/ci_demo/index.php/upload_controller/file_view

The Form Helper

Note that file upload requires a multipart form. For this, I have included a form helper in the controller with the following syntax:

1

$this->load->helper(array('form', 'url'));

Structural View

For the structure of the image upload, I will start by creating a file in the views folder with the name custom_view.php. Open this file and add the following code to it:

1

2

3

4

5

6

7

8

9

10

11

12

<html>

<head>

    <title>File Upload In Codeigniter</title>

</head>

<body>

<?php echo $error;?> 

<?php echo form_open_multipart('upload_controller/do_upload');?>

<?php echo "<input type='file' name='userfile' size='20' />"; ?>

<?php echo "<input type='submit' name='submit' value='upload' /> ";?>

<?php echo "</form>"?>

</body>

</html>

Next, go to the controller folder and create a new file with the name upload_controller.php

Add the following code o this file:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Upload_Controller extends CI_Controller {

public function __construct() {

parent::__construct();

}

public function custom_view(){

$this->load->view('custom_view', array('error' => ' ' ));

}

public function do_upload(){

$config = array(

'upload_path' => "./uploads/",

'allowed_types' => "gif|jpg|png|jpeg|pdf",

'overwrite' => TRUE,

'max_size' => "2048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)

'max_height' => "768",

'max_width' => "1024"

);

$this->load->library('upload', $config);

if($this->upload->do_upload())

{

$data = array('upload_data' => $this->upload->data());

$this->load->view('upload_success',$data);

}

else

{

$error = array('error' => $this->upload->display_errors());

$this->load->view('custom_view', $error);

}

}

}

?>

Notice that the array $config of the do_upload() has an element named allowed_types. you could use the parameters of this element to change the allowed file types. For example, for allowing a range of file, use the following structure of this element:

1

'allowed_types' => "gif|jpg|jpeg|png|iso|dmg|zip|rar|doc|docx|xls|xlsx|ppt|pptx|csv|ods|odt|odp|pdf|rtf|sxc|sxi|txt|exe|avi|mpeg|mp3|mp4|3gp",

The Success Message

To display the upload successful message, I will use the upload_success.php file (located in view folder). Add the following code to it:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

<head>

    <title>Success Message</title>

</head>

<body>

<h3>Congragulation You Have Successfuly Uploaded</h3>

<!-- Uploaded file specification will show up here -->

<ul>

    <?php foreach ($upload_data as $item => $value):?>

    <li><?php echo $item;?>: <?php echo $value;?></li>

    <?php endforeach; ?>

</ul>

<p><?php echo anchor('upload_controller/file_view', 'Upload Another File!'); ?></p>

</body>

</html>

Note: Make sure that you are calling the correct path for the controller class

Conclusion

This was a short tutorial on creating an image and file upload process in a CodeIgniter powered application. remember that you could easily modify the allowed file types and image parameters through the code.

If you need help in understanding the code or integrating the code into your CI application, do leave a comment below.

Developers Study Center

Search This Blog