How can we upload multiple images from a Form to Database using a single Submit Button?

Question

I am preparing a CMS which has Mission, Vision, and Why_Us section. I want that while editing I should be uploading three images separately with different text fields provided against each section. The entire entry and the images should reflect in the SQL Database. The sample codes are mentioned below, please assist.

View code

  <form method="post" action="<?php echo site_url('about_us/insertdata');?>" enctype="multipart/form-data">
            <!-- ============================================================= -->
            <!-- Section for traavnow vision starts here -->

              <!-- Section for our vision text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Our Vision:</label>
                <div class="col-sm-10">
              <textarea class="form-control" id="vision" name="our_vision" rows="3"></textarea>
                </div>
              </div>
              <!-- Section for our vision text data ends here -->

              <!-- Section for Uploading Image File to Our Vision Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label" >Upload Image:</label>
                
                <div class="col-sm-4">
                  <input type="file" class="form-control-file" id="vision_image" name="vision_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="" class="img-fluid rounded table-bordered" alt="Vision Image" style="height: 110px; width: 110px;">
                </div>

                
                
              </div>             
              <!-- Section for Uploading Image File to Our Vision Section ends here -->
            <!-- Section for traavnow vision ends here -->
            <!-- ============================================================= -->

            <!-- ============================================================= -->
            <!-- Section for traavnow mission starts here -->
              <!-- Section for our mission text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Our Mission:</label>
                <div class="col-sm-10">
                   <textarea class="form-control" id="mission" name="our_mission" rows="3"></textarea>
                </div>
              </div>
              <!-- Section for our mission text data ends here -->

              <!-- Section for Uploading Image File to Our mission Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label">Upload Image:</label>
                
                <div class="col-sm-4">
                  <input type="file" class="form-control-file" id="mission_image" name="mission_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="" class="img-fluid rounded table-bordered" alt="Mission Image" style="height: 110px; width: 110px;">
                </div>
                
              </div>             
              <!-- Section for Uploading Image File to Our mission Section ends here -->
            <!-- Section for traavnow mission ends here -->
            <!-- ============================================================= -->


            <!-- ============================================================= -->
            <!-- Section for traavnow why_traavnow starts here -->
              <!-- Section for our why_traavnow text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Why Traavnow:</label>
                <div class="col-sm-10">
                   <textarea class="form-control" id="why_traavnow" name="why_traavnow" rows="3"></textarea>
                </div>
              </div>
              <!-- Section for our why_traavnow text data ends here -->

              <!-- Section for Uploading Image File to Our why_traavnow Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label">Upload Image:</label>
                
                <div class="col-sm-4">
                  <input type="file" class="form-control-file" id="whyus_image" name="whyus_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="" class="img-fluid rounded table-bordered" alt="Why Traavnow" style="height: 110px; width: 110px;">
                </div>
                
              </div>             
              <!-- Section for Uploading Image File to Our why_traavnow Section ends here -->
            <!-- Section for traavnow why_traavnow ends here -->
            <!-- ============================================================= -->


            <!-- ============================================================= -->
            <!-- Button responding to form submission starts here -->
           
             <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-10">
                   <button class="btn btn-primary form-control" name="update" type="submit">Update Details</button>
                </div>
              </div>
            <!-- Button responding to form submission ends here -->
            <!-- ============================================================= -->

            <div style="height: 120px;"></div>
           
          </form>

Controller Code

// Function to INSERT text and images against each text starts here
        public function insertdata()
            {
              $vision   = $this->input->post('our_vision');
              $mission = $this->input->post('our_mission');
              $why_traavnow = $this->input->post('why_traavnow');

              // get foto
              $config['upload_path'] = './assets/uploads/about_us/';
              $config['allowed_types'] = 'jpg|png|jpeg|';
              $config['max_size'] = '2048';  //2MB max
              $config['max_width'] = '4480'; // pixel
              $config['max_height'] = '4480'; // pixel
              $config['file_name'] = $_FILES['vision_image']['name'];
             
            

              $this->upload->initialize($config);

                if (!empty($_FILES['vision_image']['name'] ))
                 {
                    if ( $this->upload->do_upload('vision_image') ) {
                        $photo = $this->upload->data();
                        $data = array(
                                      'our_vision'   => $vision,
                                      'photo'        => $photo['vision_image'],
                                      'our_mission'  => $mission,
                                      'why_traavnow' => $why_traavnow,
                                     
                                    );

                        if(isset($_FILES) && ){
                                    $this->model("about_us_model/insert");
                      }
                    }else {

                        echo "<script>alert('Details Updated Successfully')</script>";
                    }
                }

            }

Model Code

   public function insert($data)
      {
          $this->db->insert('about_us',$data);
          return TRUE;
      }

Answer 1

According to Your Picture:-

Note:-

First Create a folder name with about in assets/uploads/about directory and store 3 different images in that folder, and insert text & image path with extension in about_us database Table.

Controller Code :- About_us

<?php 

class About_us extends CI_Controller
{

    function __construct(){
        parent::__construct();
        
    
    }

    public function index()
    {
        echo "This is About us Controllers";
    
    }

    public function edit_about_us()
        {
        $data['about_us'] = $this->db->get('about_us')->result_array();
        $this->load->view('edit_about_us',$data);
        }

        public function updateAbout($aid)
    {       
         if($_FILES['vision_image']['name']!=""){

             $config['upload_path'] = "./assets/uploads/about/";
            $config['allowed_types'] = 'gif|jpeg|png|jpg';
            $this->load->library('upload',$config);
            $this->path = './assets/uploads/about/';

           $this->upload->initialize($config);

            if (!$this->upload->do_upload('vision_image'))
            {
              $error = array('error'=>$this->upload->display_errors());
           }else{
           $imageUpload = $this->upload->data();
           $vision_image_name=$imageUpload['file_name'];
            }
        }
         else{
                $vision_image_name=$this->input->post('vision_image_oldimage');
             
            }
    

      if($_FILES['mission_image']['name']!=""){

             $config['upload_path'] = "./assets/uploads/about/";
            $config['allowed_types'] = 'gif|jpeg|png|jpg';
            $this->load->library('upload',$config);
            $this->path = './assets/uploads/about/';

           $this->upload->initialize($config);

            if (!$this->upload->do_upload('mission_image'))
            {
              $error = array('error'=>$this->upload->display_errors());
           }else{
           $imageUpload = $this->upload->data();
           $mission_image_name=$imageUpload['file_name'];
            }
        }
         else{
                $mission_image_name=$this->input->post('mission_image_oldimage');
             
            }
    



     if($_FILES['whyus_image']['name']!=""){

             $config['upload_path'] = "./assets/uploads/about/";
            $config['allowed_types'] = 'gif|jpeg|png|jpg';
            $this->load->library('upload',$config);
            $this->path = './assets/uploads/about/';

           $this->upload->initialize($config);

            if (!$this->upload->do_upload('whyus_image'))
            {
              $error = array('error'=>$this->upload->display_errors());
           }else{
           $imageUpload = $this->upload->data();
           $whyus_image_name=$imageUpload['file_name'];
            }
        }
         else{
                $whyus_image_name=$this->input->post('image_image_oldimage');
             
            }
    

    $aboutdata = array(
              'vision'=>$this->input->post('our_vision'),
        'vision_image'=>$vision_image_name,
             'mission'=>$this->input->post('our_mission'),
       'mission_image'=>$mission_image_name,
        'why_traavnow'=>$this->input->post('why_traavnow'),
               'image'=>$whyus_image_name);
    

     if($_FILES['vision_image']['name']!=""){
             $getData = $this->db->get_where('about_us', array('id' => $aid))->row_array();
             $getData['vision_image'];
             unlink('assets/uploads/about/'.$getData['vision_image']);
    }
    
    
     if($_FILES['mission_image']['name']!=""){
             $getData = $this->db->get_where('about_us', array('id' => $aid))->row_array();
             $getData['mission_image'];
             unlink('assets/uploads/about/'.$getData['mission_image']);
    }
  

     if($_FILES['whyus_image']['name']!=""){
             $getData = $this->db->get_where('about_us', array('id' => $aid))->row_array();
             $getData['image'];
             unlink('assets/uploads/about/'.$getData['image']);
    }
  
   $updatedata = $this->db->where('id',$aid)->update('about_us',$aboutdata);
    
    if($updatedata)
        {
        redirect(base_url().'index.php/admin/edit_about_us');
        }
        else
        {
            redirect(base_url().'index.php/admin/edit_about_us'); 
        }
    }

    public function view_about_us()
        {
            $this->load->view('view_about_us');
        }

}
?>

View Part :- edit_about_us.php

<?php
  $this->load->view('includes/dashboard_head.php');
  $this->load->view('includes/dashboard_navbar.php');
  $this->load->view('includes/dashboard_sidebar.php');
?>


<!-- Section for adding/editing banner -->
<div class="content-wrapper" >
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Edit About Us</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="<?php echo base_url() ?>index.php/Dashboard_View">Home</a></li>
              <li class="breadcrumb-item active">About Us Management</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

   <!-- Section for displaying textbox to edit and add aboutUsDetails starts here -->
   <div class="container">

      <div class="container card-header bg-info table-bordered">
         <i class="fas fa-info-circle"></i> <label style="font-weight: bold;">About Us </label>

          <div class="row" style="float: right;">
            <button type="button" class="btn btn-light btn-sm" id="addBTN" onclick="startAdding()" style="margin-right: 6px;" >Add Details</button>
            <button type="button" class="btn btn-light btn-sm" id="editBTN" >Edit Details</button>
          </div>
      </div> 

      <div class="container" style="margin-top: 24px;" >
             <?php
            foreach($about_us as $about){
                 $id = $about['id'];
             $vision = $about['vision'];
       $vision_image = $about['vision_image'];
            $mission = $about['mission'];
      $mission_image = $about['mission_image'];
       $why_traavnow = $about['why_traavnow'];
              $image = $about['image'];

            }



             ?>
            <form method="POST" action="<?php echo base_url().'index.php/About_us/updateAbout/'.$id;?>" enctype="multipart/form-data">  
                            <!-- ============================================================= -->
            <!-- Section for traavnow vision starts here -->

              <!-- Section for our vision text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Our Vision:</label>
                <div class="col-sm-10">
                <textarea class="form-control" id="vision" name="our_vision" rows="3"><?php echo $vision;?></textarea>
                </div>
              </div>
              <!-- Section for our vision text data ends here -->

              <!-- Section for Uploading Image File to Our Vision Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label" >Upload Image:</label>
                
                <div class="col-sm-4">
                 <input type="hidden" name="vision_image_oldimage"  value="<?php echo $vision_image;?>">
                                        
                  <input type="file" class="form-control-file" id="vision_image" name="vision_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="<?php echo base_url('/assets/uploads/about/'.$vision_image);?>" class="img-fluid rounded table-bordered" alt="Vision Image" style="height: 110px; width: 110px;">
                </div>

                
                
              </div>             
              <!-- Section for Uploading Image File to Our Vision Section ends here -->
            <!-- Section for traavnow vision ends here -->
            <!-- ============================================================= -->

            <!-- ============================================================= -->
            <!-- Section for traavnow mission starts here -->
              <!-- Section for our mission text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Our Mission:</label>
                <div class="col-sm-10">
                   <textarea class="form-control" id="mission" name="our_mission" rows="3"><?php echo $mission;?></textarea>
                </div>
              </div>
              <!-- Section for our mission text data ends here -->

              <!-- Section for Uploading Image File to Our mission Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label">Upload Image:</label>
                
                <div class="col-sm-4">
                 <input type="hidden" name="mission_image_oldimage"  value="<?php echo $mission_image;?>">
                  <input type="file" class="form-control-file" id="mission_image" name="mission_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="<?php echo base_url('/assets/uploads/about/'.$mission_image);?>" class="img-fluid rounded table-bordered" alt="Mission Image" style="height: 110px; width: 110px;">
                </div>
                
              </div>             
              <!-- Section for Uploading Image File to Our mission Section ends here -->
            <!-- Section for traavnow mission ends here -->
            <!-- ============================================================= -->


            <!-- ============================================================= -->
            <!-- Section for traavnow why_traavnow starts here -->
              <!-- Section for our why_traavnow text data starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Why Traavnow:</label>
                <div class="col-sm-10">
                   <textarea class="form-control" id="why_traavnow" name="why_traavnow" rows="3"><?php echo $why_traavnow;?></textarea>
                </div>
              </div>
              <!-- Section for our why_traavnow text data ends here -->

              <!-- Section for Uploading Image File to Our why_traavnow Section Starts here -->
              <div class="form-group row">
                <label for="staticEmail" class="col-sm-4 col-form-label">Upload Image:</label>
                
                <div class="col-sm-4">
               <input type="hidden" name="image_image_oldimage"  value="<?php echo $image;?>">

                  <input type="file" class="form-control-file" id="whyus_image" name="whyus_image">
                </div>

                <div class="col-sm-4" style="margin-top: 24px;">
                  <img src="<?php echo base_url('/assets/uploads/about/'.$image);?>" class="img-fluid rounded table-bordered" alt="Why Traavnow" style="height: 110px; width: 110px;">
                </div>
                
              </div>             
              <!-- Section for Uploading Image File to Our why_traavnow Section ends here -->
            <!-- Section for traavnow why_traavnow ends here -->
            <!-- ============================================================= -->


            <!-- ============================================================= -->
            <!-- Button responding to form submission starts here -->
           
             <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-10">
                   <button class="btn btn-primary form-control" id="updateBTN" name="update" type="submit">Update Details</button>

                </div>
              </div>
            <!-- Button responding to form submission ends here -->
            <!-- ============================================================= -->

            <div style="height: 120px;"></div>
           
         </form>


      </div>
    
   </div>
   <!-- Section for displaying textbox to edit and add aboutUsDetails ends here -->

   <!-- Function for Disabling button; if no data is inserted in the database, starts here -->
      <script type="text/javascript">
          window.onload = function()
          {
            var txt = document.getElementById('vision');
            var btn = document.getElementById('editBTN');
            var btn1 = document.getElementById('addBTN');

            if(txt.value == '')
            {
              
              btn.disabled=true;
              document.getElementById('updateBTN').innerHTML = "Add About Us";
            }

            else{
              btn.disabled=false;
              btn1.disabled=true;
              document.getElementById('updateBTN').innerHTML = "Update About Us";
            }
          }
          // function for moving cursor to the first box to add new details
          function startAdding(){
            document.getElementById("vision").focus();
          }
      </script>
   <!-- Function for Disabling button if no data is inserted in the database ends here -->



  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


<?php
  $this->load->view('includes/dashboard_footer.php');
  $this->load->view('includes/dashboard_jquery.php');
  
?>

Note:- For Regarding Generating Query Results:-

https://codeigniter.com/userguide3/database/results.html

For Regarding File Uploading:-

https://codeigniter.com/userguide3/libraries/file_uploading.html