How to create a registration form with image upload in CodeIgniter 3

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.

user registration form with image uplaod in Codeigniter 3

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:

Table: user_profile

This table stores details of all users.

How to Upload image in codeigniter

Below are the columns in this table.

  1. id - It is unique id of a user, primary key and auto incremented
  2. name - Name of the user
  3. email - Email of the user
  4. 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.

user_profile.sql

After you create the table, verify that the table structure is same as above.

Folder Structure

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.

Upload picture thumbnail preview with codeigniter

You can see, we have Controller - UploadController.php, Model - ModelUpload.php and two views (register.php and view_profile.php) under views folder. Folder 'assets' is created keep all custom stylesheets, JavaScripts and image files. Here we have 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

 How to preview an image before and after upload

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

application/views/register.php

For input photo, when user selects the photo a JavaScript function 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.

Preview Photo

upload image file in Codeigniter

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 view_profile.php.

Upload Image in Codeigniter with database example

application/views/view_profile.php

Let me give the stylesheet also I am using for all these views.

assets/css/style.css

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()

In 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 register() method.

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 valid_email and 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:

Upload Image to path and database

  1. 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.

  2. 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:

  3. 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:

  4. Update routes file (application/config/routes.php) I updated routes.php for default controller which is UploadController. So, below code is for routes.php
  5. 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.

    upload picture using codeigniter

    Content of .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:

upload image file in codeigniter 3

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.

insert an image in codeigniterDownload 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.

upload multiple images in codeigniter 3Conclusion

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.