CodeIgniter has a file upload library using which you can upload an image or a file to the server. If you load the upload library with some config parameters, you can just call
do_upload() method to upload an image in CodeIgniter 3.
In this topic, we will create an user registration form in CodeIgniter 3 and MySQL with preview and upload image. CodeIgniter 3 form validation and image validation are done and data is inserted into a MySQL table and the image is uploaded in the server. It will then display the registration details along with the user's photo.
Step 1 - Create a MySQL table for user profiles
Let us create a table named 'user_profile' in MySQL database. This table will have user details - name, email and photo. Table structure is given below:
This table stores details of all users.
Below are the columns in this table.
- id - It is unique id of a user, primary key and auto incremented
- name - Name of the user
- email - Email of the user
- image - Image file name of the user
Create table script for this table are given below; you can use this code to create the table.
After you create the table, verify that the table structure is same as above.
Before I go to next step, let me show the folder structure I am using. I have created a folder named 'ci_upload' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/ci_upload.
You can see, we have Controller -
UploadController.php, Model -
ModelUpload.php and two views (
css/style.css (custom styles) for our application.
Also, note that since we will be uploading photos, so we need a folder where photos to be uploaded in the server. So, I have created a folder named 'uploads' under root directory.
Step 2 - Create the views for user registration and view profile
The view for registration with a photo is simple form with name, email id and photo of the user. User can fill in name and email id and then select a photo as profile photo and submit the form. Below is the code for register.php
previewPhoto() is called on
onChange event of the input object. After the form is submitted all the three input fields are validated in the Controller.
jQuery code is used to preview the photo.
To Preview the photo, we will use jQuery Scripts, preview of the image is displayed using a FileReader object to read the binary data from the image. Let's see the code:
View to display user profile
After the form is submitted and processed successfully, it displays the data using another view called
Let me give the stylesheet also I am using for all these views.
I just added few simple styles here, you can always add better styles.
So, these are the views, now let's go to controller section.
Step 3 - Write Controller code (UploadController.php) to complete upload and registration
Our controller function will have an
index() method to display the registration page and a
register() method to process submitted data and upload photo.
Controller method index()
index() method, it just loads the view that displays user registration page.
You can see it loads the view for user registration.
Controller Method register()
This method gets executed when user submits the form. It does the form validation and calls a model method to insert the data into "user_profile" table. Let's see the code for
Validations are performed on the input data name, email and photo using
form_validation->set_rules() method. You can see for the email validation for
is_unique rules are used. For detail how to do form validation, you can read the topic How to Validate Form Data in CodeIgniter 3.
'upload_file_path' is defined in
config.php. It loads CodeIgniter upload library with these config parameters. Then
do_upload() method uploads the photo. Once upload is successful, it calls model's
register() method to insert the data into the database table.
Step 4 - Write Model code (ModelUpload.php)
The Model class will have two methods, one for registration and other for user details. For registration, model method name is
register(). This method takes the input data in an array and uses
$db->insert() method to insert row in user_profile table.
get_user() method needs
$email_id as parameter and select details of the user from user_profile table. So now let's see the code for these methods in the model:
Model Method register()
Model Method get_user()
You can see, it uses CodeIgniter query builder class to generate the query. It just selects the row from user_profile table where input email matches the database value.
Our controller, views and models are developed. Now we need to do some config changes before we run the application. Let's do that in the next step.
Step 5 - Update Configuration files and Test the Application
Let us now update few setup files before we run the application.
We will update below files in config folder and also, we will have .htaccess file in the root directory. See below:
- Update autoload.php (application/config/autoload.php)
I have added 'database' and 'form_validation' in autoload libraries.
Also, 'url' and 'form' are added in helper array.
- Update config file (application/config/config.php)
I added 'upload_file_path' for the image path. This is used in the controller. Using this path photo is displayed in the view. Set 'base_url' and 'index_page' as below in this file:
- Update database setup file (application/config/database.php)
As I mentioned before, I am using a database named 'demo' in localhost with user as 'root', so I updated database.php as below:
- Update routes file (application/config/routes.php)
routes.php for default controller which is UploadController. So, below code is for
- Update .htaccess (hypertext access) file to remove index.php from the URL
.htaccess file is used to do configuration changes for a directory. I have kept
.htaccess file in my root folder which is xampp/htdocs/ci_upload.
.htaccess file is given below:
Using URL rewriting rule, it redirects all request except those which are not existing files or directories.
Test The Application
Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/ci_upload. You will see the home page displayed as below:
In the registration form enter name and email id, then select a photo. You should see the preview of the photo. Click on Submit and complete registration. Verify that file is uploaded in 'uploads' folder and a row is inserted in the database table 'user_profile' with user details along wuth the image file name.
Also test the validation for registration form and the photo. For photo test image type, size of image. You should test all kinds of validations used in the controller methods.
Our development and testing are done. Hope you could understand all the steps and could test it successfully.
Download Source Code
I have put codes for controller, model and view in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.
Uploading photo is very important part of registration form as profile photo is used in almost all user registration. I have tried to explain each step in detail for your easy understanding. Hope it was useful for you.