Dear Reader, let us know that, “How to upload files in Codeigniter using Bootstrap with Live Demo“. So in this Tutorial, We Learn Step By Step Files Uploading Process in Codeigniter using Bootstrap.
This post is about CodeIgniter(C.I.) file upload. By the use of file uploading class, you can easily upload a file or an image.
One can easily validate and restrict file type, its size and can even provide various preferences while uploading a file or image.
First, we see Snapshot for File Uploading Form
And you can also see Live Demo by click on bellow Demo button
Step 1:- First of all we need to create the database like ci_demo
Step 2:- Now create a table “files” in a database using the below SQL code
1 2 3 4 5 6 |
CREATE TABLE `files` ( `id` int(11) NOT NULL, `file_type` varchar(50) NOT NULL, `file_name` varchar(50) NOT NULL, `created_date` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
Step 3:- Now we need to configure config.php in bellow URL “ci_demo\application\config/autoload.php”
1 2 3 4 5 6 7 8 9 10 11 |
// find this code $autoload['libraries'] = array(); //replace this code $autoload['libraries'] = array('session','database','upload'); // find this code $autoload['helper'] = array(); //replace this code $autoload['helper'] = array('url','form'); |
Step 4:- Now we need to create “uploads” folder in root directory like “ci_demo\uploads”
Step 5:- Now we create “uploads” folder in Application’s “Controller” and create “Uploads.php” Controller like directory like “ci_demo\application\controllers\uploads\Uploads.php” paste below code
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Uploads extends CI_Controller { public function __construct() { parent::__construct(); $this->load->model('upload/Upload','uploadModel'); } /* for view upload form start */ public function index() { $this->load->view('header'); $this->load->view('uploads/uploads', array('error' => ' ' )); $this->load->view('footer'); } /* for view upload form close */ /* for view upload file and insert file details in database start */ public function upload_file() { $config = array( 'upload_path' => "./uploads/", 'allowed_types' => "gif|jpg|png|jpeg|pdf|docx", '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" ); /* for load library for upload file start */ $this->load->library('upload', $config); $this->upload->initialize($config); /* for load library for upload file close */ if($this->upload->do_upload()) { /* for upload file start */ $data = array('upload_data' => $this->upload->data()); /* for upload file close */ $file_name = $data['upload_data']['raw_name'].$data['upload_data']['file_ext']; /* for insert data in database start */ $insert_data = array( 'file_type' => $this->input->post('file_type'), 'file_name' => $file_name, 'created_date' => date('Y-m-d H:i:s') ); $this->uploadModel->file_insert($insert_data); /* for insert data in database close */ $this->load->view('header'); $this->load->view('uploads/uploads_success',$data); $this->load->view('footer'); } else { $error = array('error' => $this->upload->display_errors()); $this->load->view('header'); $this->load->view('uploads/uploads', $error); $this->load->view('footer'); } } /* for view upload file and insert file details in database close */ } ?> |
Step 6:- Now we create “uploads” folder in Application’s “Models” Folder and create “Upload.php” Model like directory like “ci_demo\application\models\uploads\Upload.php” paste bellow code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); //This is the Book Model for CodeIgniter CRUD using Ajax Application. class Upload extends CI_Model { var $table = 'files'; // for construct public function __construct() { parent::__construct(); } /* for insert file details in database start*/ public function file_insert($data) { //print_r($data); $this->db->insert($this->table, $data); return $this->db->insert_id(); } /* for insert file details in database close*/ } |
Step 7:- Now we create “uploads” folder in Application’s “views” Folder and create “uploads.php” View file like directory like “ci_demo\application\views\uploads\uploads.php” paste bellow code
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 |
<!DOCTYPE html> <html lang="en"> <head> <link href="<?php echo base_url(); ?>assets/css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="<?php echo base_url();?>assets/js/jquery.min.js"></script> <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2 class="alert alert-info">File Uploads</h2> <div class="row"> <div class="col-lg-12"> <?php echo $error;?> <!-- Error Message will show up here --> <?php echo form_open_multipart('uploads/uploads/upload_file');?> <?php echo "<input type='text' name='file_type' id='file_type' size='20' class='form-control' placeholder='Please enter file type'/><br>"; echo "<input type='file' name='userfile' size='20' class='form-control' />"; ?> <br> <?php echo "<input type='submit' name='submit' value='upload' class='btn btn-info'/> ";?> <?php echo "</form>"?> </div> </div> </div> </body> </html> |
Step 8:- Now we create “uploads” folder in Application’s “views” Folder and create “uploads_success.php” View file directory like “ci_demo\application\views\uploads\uploads_success.php” paste bellow code
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 |
<!DOCTYPE html> <html lang="en"> <head> <link href="<?php echo base_url(); ?>assets/css/style.css" rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="<?php echo base_url();?>assets/js/jquery.min.js"></script> <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2 class="alert alert-info">Your file was successfully uploaded!</h2> <div class="row"> <div class="col-lg-12"> <!-- Uploaded file specification will show up here --> <ul class="alert alert-success"> <?php foreach ($upload_data as $item => $value):?> <li><?php echo $item;?>: <?php echo $value;?></li> <?php endforeach; ?> </ul> <a href="<?php echo base_url(); ?>uploads/uploads"><button class="btn btn-warning">Upload Another File</button> </a> <br> <br> </div> </div> </div> </body> </html> |
Step 9:- In uploads.php and uploads_success.php (view) files we add some CSS and JS, so download assets folder here
extract zip file and copy assets folder and paste in your project’s root directory as we can see in bellow snapshot
Step 10:- Now for run your project open browser and type in URL like localhost/your_project_name/uploads/uploads
like
localhost/ci_demo/uploads/uploads
you can see the result as we can see in below snapshot
Congratulations you have successfully Completed Files Uploading Process in Codeigniter using Bootstrap if this post was helpful for you then please share this post on social media and if you have any query then please contact us or comment below and don’t forget us follow and like on Social Media, Thanks
2 Comments:
adidas stan smith April 25, 2018
I precisely desired to thank you so much all over again. I do not know the things that I would’ve achieved without the creative concepts contributed by you on this subject matter. It absolutely was a very traumatic situation in my circumstances, nevertheless encountering the expert form you resolved that took me to weep over fulfillment. I am thankful for your information and then pray you find out what a great job that you are undertaking training the rest via your websites. Probably you haven’t got to know all of us.
Webpreparations Team April 25, 2018
Thanks 🙂