{"id":6071,"date":"2021-06-01T08:14:32","date_gmt":"2021-06-01T08:14:32","guid":{"rendered":"https:\/\/programmingfields.com\/?p=6071"},"modified":"2026-05-02T06:32:19","modified_gmt":"2026-05-02T06:32:19","slug":"upload-multiple-image-with-validation-in-codeigniter-4","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/","title":{"rendered":"Upload Multiple Image with Validation in Codeigniter 4"},"content":{"rendered":"\n<p>By creating an array of images, you can <strong>upload multiple image<\/strong> in Codeigniter 4. The HTML element of file type has an attribute to accept multiple files. The input element of file type requires the name attribute to be an array. We already know about an array in PHP. It can store multiple items in a single variable name. The Codeigniter provides some predefined functions to read out single and multiple files. You can validate the file mime types, size, etc. It is the most important part of a file upload to validate it properly. I already shared the post on <a href=\"https:\/\/programmingfields.com\/how-to-upload-image-and-file-in-codeigniter-4-with-validation\/\">Image upload with validation in Codeigniter 4<\/a>. But, in this post, I will <strong>upload multiple image<\/strong> in Codeigniter 4 with validation. So, you will learn to pass multiple image through the form. Also, validation of image and upload. So, let&#8217;s move to the post quickly.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_a_Project_to_Upload_Image_in_Codeigniter_4\" >Create a Project to Upload Image in Codeigniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_and_Configure_Database\" >Create and Configure Database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_Migration_For_Image_Table\" >Create Migration For Image Table<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_a_Model_to_Upload_Multiple_Image_in_Codeigniter_4\" >Create a Model to Upload Multiple Image in Codeigniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_a_Controller_to_Upload_Multiple_Image_in_Codeigniter_4\" >Create a Controller to Upload Multiple Image in Codeigniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_Routes\" >Create Routes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Create_View_to_Upload_Multiple_Image_in_Codeigniter_4\" >Create View to Upload Multiple Image in Codeigniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Multiple_Upload_Image_Result\" >Multiple Upload Image Result<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/upload-multiple-image-with-validation-in-codeigniter-4\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating this project in Codeigniter 4, your system must have the below requirements.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP &gt;= 7.3<\/strong><\/li><li><strong>MySQL (version &gt; 5)<\/strong><\/li><li><strong>Apache\/Nginx Server<\/strong><\/li><li><strong>VS Code Editor<\/strong><\/li><li><strong>Composer<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Project_to_Upload_Image_in_Codeigniter_4\"><\/span><strong>Create a Project to Upload Image in Codeigniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To create a new project in Codeigniter 4, I will be using composer. Open the terminal and hit the below command.<\/p>\n\n\n\n<pre title=\"create project in codeigniter 4\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">composer create-project codeigniter4\/appstarter form-validation<\/code><\/pre>\n\n\n\n<p>The above command will create a new folder. Then inside that folder the codeigniter 4 will be installed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-10-08-35-14.png?w=814&amp;ssl=1\" alt=\"Create Project in Codeigniter 4 to upload multiple image\"\/><figcaption><strong>Create New Project in Codeigniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>After creating the project, let&#8217;s have a database configuration for this project.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/form-validation-example-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">Form Validation Example in Codeigniter 4 For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_Configure_Database\"><\/span><strong>Create and Configure Database<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For managing the database, I am using MySQL. Therefore, I have created a database by hitting the below command.<\/p>\n\n\n\n<pre title=\"create database\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE ci4_form;<\/code><\/pre>\n\n\n\n<p>Now, we have the database ready. Let&#8217;s connect it to the Codeigniter 4 project.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Firstly, rename the&nbsp;env&nbsp;file to&nbsp;the <strong>.env<\/strong>&nbsp;file.<\/li><li>Secondly, open the .env file and change the&nbsp;<strong>environment<\/strong>&nbsp;to&nbsp;<strong>development<\/strong>. By default, it is&nbsp;<strong>production<\/strong>.<\/li><li>Lastly, go to the database section inside this file and replace the credentials as showing below.<\/li><\/ol>\n\n\n\n<pre title=\".env file\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">#--------------------------------------------------------------------\n# DATABASE\n#--------------------------------------------------------------------\n\ndatabase.default.hostname = localhost\ndatabase.default.database = ci4_form\ndatabase.default.username = root\ndatabase.default.password = root\ndatabase.default.DBDriver = MySQLi<\/code><\/pre>\n\n\n\n<p>Now, you configured successfully the database with project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Migration_For_Image_Table\"><\/span><strong>Create Migration For Image Table<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this project, we will see multiple image validation. After the successful validation, we will upload multiple image. Lastly, we will store the uploaded image name into the database table. Hence, we required a migration. You can create a table and its schema manually through the database. But, I prefer to create it using migration.<\/p>\n\n\n\n<pre title=\"create migration for multiple image upload\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:migration images --table<\/code><\/pre>\n\n\n\n<p>After hitting the above command, it will create a migration file for image table.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i2.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-14-07-31-56.png?w=1146&amp;ssl=1\" alt=\"Created Image Table Migration\"\/><figcaption><strong>Created Image Table Migration<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>You can check the file inside the <strong>Database\/Migrations<\/strong> folder.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-29-11-29-15.png?resize=1024%2C412&#038;ssl=1\" alt=\"Created Image Table Migration\" class=\"wp-image-6096\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-29-11-29-15.png?resize=1024%2C412&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-29-11-29-15.png?resize=300%2C121&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-29-11-29-15.png?resize=768%2C309&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-05-29-11-29-15.png?w=1151&amp;ssl=1 1151w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption>Migration File For Image Table<\/figcaption><\/figure><\/div>\n\n\n\n<p>Here, we will create the schema for the image table. Hence, in the up() function, we will add some fields.<\/p>\n\n\n\n<pre title=\"timestamp_images.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Database\\Migrations;\n\nuse CodeIgniter\\Database\\Migration;\n\nclass Images extends Migration\n{\n    public function up()\n    {\n        $this-&gt;forge-&gt;addField([\n            'id' =&gt; [\n                'type' =&gt; 'INT',\n                'auto_increment' =&gt; true\n            ],\n            'name' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '255'\n            ],\n            'created_at datetime default current_timestamp',\n            'updated_at datetime default current_timestamp on update current_timestamp'\n        ]);\n        $this-&gt;forge-&gt;addKey('id', true);\n        $this-&gt;forge-&gt;createTable('images');\n    }\n\n    public function down()\n    {\n        $this-&gt;forge-&gt;dropTable('images');\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>In the above snippet, we have the schema for creating the image table. Also, the table can be deleted with the same migration file.<\/p>\n\n\n\n<p>Now, you have to migrate the schema into the database. Hence, hit the below command.<\/p>\n\n\n\n<pre title=\"migrate table\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark migrate<\/code><\/pre>\n\n\n\n<p>The above command will generate the schema for the image table inside the database.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-14-07-34-59.png?w=1086&amp;ssl=1\" alt=\"Migrate Tables\"\/><figcaption><strong>Migrate Tables<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/create-a-crud-application-in-codeigniter-4-for-beginners\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a CRUD Application in CodeIgniter 4 For Beginners<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Model_to_Upload_Multiple_Image_in_Codeigniter_4\"><\/span><strong>Create a Model to Upload Multiple Image in Codeigniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you are thinking to create a model in Codeigniter then no need to create a new model file manually. Codeigniter 4 provides spark to create model. Hence, we will create a model using the below command.<\/p>\n\n\n\n<pre title=\"create a model\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:model Image<\/code><\/pre>\n\n\n\n<p>Through this model, we will store the multiple uploaded image into the database table.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-14-07-30-53.png?w=742&amp;ssl=1\" alt=\"Create model to upload image\"\/><figcaption><strong>Create Model in Codeigniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, go to the model file and make it to look as showing below.<\/p>\n\n\n\n<pre title=\"Image.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Models;\n\nuse CodeIgniter\\Model;\n\nclass Image extends Model\n{\n    protected $DBGroup              = 'default';\n    protected $table                = 'images';\n    protected $primaryKey           = 'id';\n    protected $useAutoIncrement     = true;\n    protected $protectFields        = true;\n    protected $allowedFields        = ['name'];\n\n    \/\/ Dates\n    protected $useTimestamps        = false;\n    protected $dateFormat           = 'datetime';\n    protected $createdField         = 'created_at';\n    protected $updatedField         = 'updated_at';\n}<\/code><\/pre>\n\n\n\n<p>In the next step, we will have to implement the functionality to upload multiple image. Hence, it required a controller file to write the logic.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-create-github-login-in-laravel-8-using-socialite\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create Github Login in Laravel 8 Using Socialite<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Controller_to_Upload_Multiple_Image_in_Codeigniter_4\"><\/span><strong>Create a Controller to Upload Multiple Image in Codeigniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating the controller, we will use the same approach. Here, the spark will create a controller also. So, hit the below command in the terminal.<\/p>\n\n\n\n<pre title=\"create controller\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:controller ImageController<\/code><\/pre>\n\n\n\n<p>The above command will create a controller with the name <strong>ImageController.php<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-14-07-12-40.png?w=747&amp;ssl=1\" alt=\"Create Controller to Upload Multiple Image\"\/><figcaption><strong>Create Controller to Upload Multiple Image<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>After creating the controller file, let&#8217;s put the below snippet there.<\/p>\n\n\n\n<pre title=\"ImageController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Controllers;\n\nuse App\\Controllers\\BaseController;\nuse App\\Models\\Image;\n\nclass ImageController extends BaseController\n{\n    \/**\n     * Constructor\n     *\/\n    public function __construct()\n    {\n        helper(['form', 'url']);\n    }\n\n    \/**\n     * Return image upload view\n     *\n     * @return void\n     *\/\n    public function index()\n    {\n        return view('upload');\n    }\n\n    \/**\n     * Upload Image\n     *\n     * @return void\n     *\/\n    public function uploadImage()\n    {\n        \/\/ image validation\n        $validated = $this-&gt;validate([\n            'image' =&gt; [\n                'uploaded[image]',\n                'mime_in[image,image\/jpg,image\/jpeg,image\/gif,image\/png]',\n                'max_size[image,4096]',\n                'errors' =&gt; [\n                    'uploaded[image' =&gt; 'Please select an image.'\n                ]\n            ],\n        ]);\n\n        if (!$validated) {\n            return view('upload', [\n                'validation' =&gt; $this-&gt;validator\n            ]);\n        }\n\n        \/\/ Grab the file by name given in HTML form\n        $files = $this-&gt;request-&gt;getFileMultiple('image');\n\n        $filePreviewName = [];\n\n        foreach($files as $file) {\n            if($file-&gt;isValid() &amp;&amp; !$file-&gt;hasMoved()) {\n                $newName = $file-&gt;getRandomName();\n                $file-&gt;move('uploads', $newName);\n\n                $image = new Image;\n                $image-&gt;save([\n                    'name' =&gt; $newName\n                ]);\n\n                array_push($filePreviewName, $newName);\n            }           \n        }\n\n        session()-&gt;setFlashdata('success', 'Success! image uploaded.');\n        return redirect()-&gt;to(site_url('\/upload'))-&gt;withInput()-&gt;with('previewImage', $filePreviewName);    \n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Now, you have to create routes as per the above functions respectively.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-multiple-images-upload-with-validation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel 8 Multiple Images Upload with Validation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Routes\"><\/span><strong>Create Routes<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating the routes, you have to navigate to the <strong>app\/Config\/Routes.php<\/strong> file. Hence, add the below routes there.<\/p>\n\n\n\n<pre title=\"Routes.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$routes-&gt;get('upload', 'ImageController::index');\n$routes-&gt;post('upload', 'ImageController::uploadImage');<\/code><\/pre>\n\n\n\n<p>At last, you have to create a view for uploading the multiple image.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_View_to_Upload_Multiple_Image_in_Codeigniter_4\"><\/span><strong>Create View to Upload Multiple Image in Codeigniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To create a view, go to the <strong>app\/Views <\/strong>folder and create a new file with the name <strong>upload.php<\/strong>. After creating the view, put the below snippet there.<\/p>\n\n\n\n<pre title=\"upload.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;title&gt;Codeigniter 4 Form Validation Example&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\n    &lt;!-- bootstrap 5 CSS --&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO\/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.4.1\/font\/bootstrap-icons.css\"&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n      &lt;div class=\"container py-4\"&gt;\n      &lt;?php $validation =  \\Config\\Services::validation(); ?&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 m-auto\"&gt;\n                &lt;form method=\"POST\" action=\"&lt;?= base_url('upload') ?&gt;\" enctype=\"multipart\/form-data\"&gt;\n                    &lt;?= csrf_field() ?&gt;\n\n                    &lt;!-- display flash data message --&gt;\n                    &lt;?php\n                        if(session()-&gt;getFlashdata('success')):?&gt;\n                            &lt;div class=\"alert alert-success alert-dismissible\"&gt;\n                                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"&gt;&amp;times;&lt;\/button&gt;\n                                &lt;?php echo session()-&gt;getFlashdata('success') ?&gt;\n                            &lt;\/div&gt;\n                        &lt;?php elseif(session()-&gt;getFlashdata('failed')):?&gt;\n                            &lt;div class=\"alert alert-danger alert-dismissible\"&gt;\n                                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"&gt;&amp;times;&lt;\/button&gt;\n                                &lt;?php echo session()-&gt;getFlashdata('failed') ?&gt;\n                            &lt;\/div&gt;\n                    &lt;?php endif; ?&gt;\n\n                    &lt;div class=\"card shadow\"&gt;\n                        &lt;div class=\"card-header\"&gt;\n                            &lt;h5 class=\"card-title\"&gt;Upload Image&lt;\/h5&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"card-body p-4\"&gt;\n                            &lt;div class=\"form-group mb-3 has-validation\"&gt;\n                                &lt;label class=\"form-label\"&gt;Image&lt;\/label&gt;\n                                &lt;input type=\"file\" class=\"form-control &lt;?php if($validation-&gt;getError('image')): ?&gt;is-invalid&lt;?php endif ?&gt;\" name=\"image[]\" multiple=\"multiple\"\/&gt;\n                                &lt;?php if ($validation-&gt;getError('image')): ?&gt;\n                                    &lt;div class=\"invalid-feedback\"&gt;\n                                        &lt;?= $validation-&gt;getError('image') ?&gt;\n                                    &lt;\/div&gt;                                \n                                &lt;?php endif; ?&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"card-footer\"&gt;\n                            &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Upload&lt;\/button&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n\n                &lt;?php\n                    if(session()-&gt;getFlashdata('previewImage')):?&gt;\n                        &lt;div class=\"form-group py-4\"&gt;\n                        &lt;h5 class=\"py-2\"&gt;Image Preview&lt;\/h5&gt;\n                            &lt;?php foreach(session()-&gt;getFlashdata('previewImage') as $image): ?&gt;\n                                &lt;img src=\"&lt;?php echo base_url('uploads\/'.$image);?&gt;\" class=\"img-fluid\" height=\"150px\"\/&gt;\n                                &lt;br\/&gt;\n                                &lt;br\/&gt;\n                            &lt;?php endforeach; ?&gt;\n                        &lt;\/div&gt;\n                    &lt;?php endif; ?&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>The above snippet will create a form with an input of file. The input will accept the multiple files. After submitting the file, it will go to the controller and in the controller we already added the validation. Once, the validation will pass, it will upload the image and store them to the table. <\/p>\n\n\n\n<p>Lastly, the uploaded image will be displayed in the view. So, we stored the images into an array and returned it to view using flash data.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/laravel-8-image-upload-with-validation\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Upload Image in Laravel 8 with Validation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Multiple_Upload_Image_Result\"><\/span><strong>Multiple Upload Image Result<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, it&#8217;s time to check the result by uploading multiple images. So, run the Codeigniter 4 project using the spark command.<\/p>\n\n\n\n<pre title=\"run codeigniter 4 project\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark serve<\/code><\/pre>\n\n\n\n<p>The above command will start the CodeIgniter development server. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/05\/Screenshot-from-2021-05-14-12-04-05.png?w=923&amp;ssl=1\" alt=\"Run CodeIgniter 4 Project\"\/><figcaption><strong>Run CodeIgniter 4 Project<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Just open the URL in your browser and navigate to upload URL as showing below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"358\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-12.png?resize=992%2C358&#038;ssl=1\" alt=\"Upload Image View\" class=\"wp-image-6108\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-12.png?w=992&amp;ssl=1 992w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-12.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-12.png?resize=768%2C277&amp;ssl=1 768w\" sizes=\"auto, (max-width: 992px) 100vw, 992px\" \/><figcaption><strong>Upload Image View<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>As per the validation rules that we already set, you will get the below result for required field. Here, I have not selected any file and clicked on upload. It returned the validation error message.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"364\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-37-55.png?resize=1001%2C364&#038;ssl=1\" alt=\"Image Field Required Validation Error Message\" class=\"wp-image-6109\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-37-55.png?w=1001&amp;ssl=1 1001w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-37-55.png?resize=300%2C109&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-37-55.png?resize=768%2C279&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Image Field Required Validation Error Message<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, for the testing, I have selected a <strong>.zip<\/strong> file. But, we have set the validation for accepting file type image only. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"345\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-34.png?resize=996%2C345&#038;ssl=1\" alt=\"File Type .zip Selected For Validation Test\" class=\"wp-image-6110\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-34.png?w=996&amp;ssl=1 996w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-34.png?resize=300%2C104&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-34.png?resize=768%2C266&amp;ssl=1 768w\" sizes=\"auto, (max-width: 996px) 100vw, 996px\" \/><figcaption><strong>File Type .zip Selected For Validation Test<\/strong><\/figcaption><\/figure>\n\n\n\n<p>In the result, you can see, it didn&#8217;t allow to upload the other mime type file. It returned back with the validation error message of mime type.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"966\" height=\"336\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-40.png?resize=966%2C336&#038;ssl=1\" alt=\"Validation Error Message For Uploading Other File Type\" class=\"wp-image-6111\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-40.png?w=966&amp;ssl=1 966w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-40.png?resize=300%2C104&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-38-40.png?resize=768%2C267&amp;ssl=1 768w\" sizes=\"auto, (max-width: 966px) 100vw, 966px\" \/><figcaption><strong>Validation Error Message For Uploading Other File Type<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, at last, I have chosen the multiple images as you can and clicked on the upload button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"359\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-54.png?resize=993%2C359&#038;ssl=1\" alt=\"Multiple Images Selected \" class=\"wp-image-6114\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-54.png?w=993&amp;ssl=1 993w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-54.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/Screenshot-from-2021-06-01-11-34-54.png?resize=768%2C278&amp;ssl=1 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><figcaption><strong>Multiple Images Selected <\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In the final result, you can see, the images are uploaded. We have the preview of every images in the below result also.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"1024\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/image-uploaded.png?resize=443%2C1024&#038;ssl=1\" alt=\"Multiple Image Uploaded in CodeIgniter 4\" class=\"wp-image-6112\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/image-uploaded.png?resize=443%2C1024&amp;ssl=1 443w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/image-uploaded.png?resize=130%2C300&amp;ssl=1 130w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/image-uploaded.png?resize=664%2C1536&amp;ssl=1 664w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/image-uploaded.png?w=669&amp;ssl=1 669w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><figcaption><strong>Multiple Image Uploaded in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We completed the multiple image upload functionality in CodeIgniter 4. You can set the other validation for accepting the different file type. Similarly, you can upload <strong>doc<\/strong>, <strong>xls<\/strong>, <strong>pdf<\/strong>, etc. I will show you one by one on the upcoming posts. If you get any issue in the above post then don&#8217;t forget to ask through the comment. I feel happy to response you on your query.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By creating an array of images, you can upload multiple image in Codeigniter 4. The HTML element of file type has an attribute to accept multiple files. The input element of file type requires the name attribute to be an array. We already know about an array in PHP. It can store multiple items in [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6116,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1977],"tags":[2071,2075,2077],"yst_prominent_words":[134,116,966,1002,259],"class_list":{"0":"post-6071","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-codeigniter-4","8":"tag-image-validation-in-codeigniter","9":"tag-multiple-image-upload","10":"tag-upload-multiple-image-in-codeigniter","11":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/06\/upload-multiple-image-with-validation.png?fit=2240%2C1260&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=6071"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6071\/revisions"}],"predecessor-version":[{"id":8645,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/6071\/revisions\/8645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/6116"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=6071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=6071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=6071"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=6071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}