YouTube Icon

Code Playground.

How to Implement Multiple Image Uploading With View, Edit and Delete in CodeIgniter

CFG

How to Implement Multiple Image Uploading With View, Edit and Delete in CodeIgniter

The picture upload include is the most utilized usefulness in the dynamic web application. Various pictures upload highlight assists with uploadring countless records to the server on the double. upload different pictures in CodeIgniter permits uploadring various pictures on the double rather than individually. This component is extremely helpful for the information the executives segment where the various pictures should be uploadred for each record. 

CodeIgniter's File Uploading Class gives a simple method to upload document to the server. You can incorporate the numerous picture upload usefulness with Upload library in CodeIgniter. Right now, will tell you the best way to coordinate numerous picture upload with the view, alter, and erase usefulness in CodeIgniter. 

Also Read:-How to Upload Image and Create Thumbnail in CodeIgniter

To exhibit the different pictures upload the executives usefulness, we will create a Gallery CRUD framework in CodeIgniter. It permits the client to upload various pictures with information and store in the database in the CodeIgniter system. 

In the sample CodeIgniter application, we will implement a gallery management system with multiple images in the CodeIgniter framework.

  • Fetch the gallery data from the database and list on the webpage.
  • Upload multiple images to the server and insert form data to the database.
  • View gallery with multiple images.
  • Edit and update multiple images.
  • Delete gallery and multiple images.

Before getting started to integrate multiple image upload management in CodeIgniter, take a look at the files structure.

Also Read:-How to Get JSON Data from PHP Script using jQuery Ajax

Create Database Tables

To store the gallery data and image files information two tables are required in the database.

1. The following SQL creates a gallery table with some basic fields in the MySQL database.

CREATE TABLE `gallery` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

2. The following SQL creates a gallery_images table with parent gallery identifier field (gallery_id) in the MySQL database.

CREATE TABLE `gallery_images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `gallery_id` int(11) NOT NULL,
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Also Read:-How to Export Data in Excel format in Codeigniter using PHPExcel Library

Config

autoload.php
In the config/autoload.php file, define the library and helper to load automatically on every request which will be used frequently in the application.

$autoload['libraries'] = array('database', 'session'); 
$autoload['helper'] = array('url');

Controller (Manage_gallery.php)

The Manage_gallery controller handles the CRUD operations (view, add, edit, and delete) of the gallery and images.

  • __construct() –
    • Load the form helper and validation library.
    • Load the gallery model.
    • Define default controller name.
  • index() –
    • Retrieve status messages from SESSION.
    • Fetch the records from the database using getRows() method of Gallery model.
    • Pass the gallery data and load the list view.
  • view() –
    • Fetch the gallery data from the database based on the specific ID.
    • Pass the gallery data and load the details view.
  • add() –
    • Initially, the form view is loaded to receive input of the gallery and files.
    • If the form is submitted,
      • The posted form data is validated using CodeIgniter Form Validation library.
      • Insert gallery data in the database using insert() method of Gallery model.
      • Upload multiple images to the server using CodeIgniter Upload library.
      • Insert uploaded files information in the database using insertImage() method of Gallery model.
  • edit() –
    • Fetch the gallery data from the database based on the specific ID.
    • The form view is loaded with the pre-filled gallery data and images.
    • If the form is submitted,
      • The posted form data is validated using CodeIgniter Form Validation library.
      • Update gallery data in the database using update() method of Gallery model.
      • Upload selected images to the server using CodeIgniter Upload library.
  • block() – Update the status of the gallery to Inactive.
  • unblock() – Update the status of the gallery to Active.
  • delete() –
    • Remove gallery data from the database using delete() method of Gallery model.
    • Remove images data from the database using deleteImage() method of Gallery model.
    • Remove the image files from the server.
  • deleteImage() – This functionality is called by the Ajax request to delete specific image data from the database as well as the server.
Also Read:-How to Send emails with EmberJS, Amazon SES And Firebase
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
class Manage_gallery extends CI_Controller { 
     
    function __construct() { 
        parent::__construct(); 
         
        // Load form helper and form validation library 
        $this->load->helper('form'); 
        $this->load->library('form_validation'); 
         
        // Load gallery model 
        $this->load->model('gallery'); 
         
        // Default controller name 
        $this->controller = 'manage_gallery'; 
    } 
     
    public function index(){ 
        $data = array(); 
         
        // Get messages from the session 
        if($this->session->userdata('success_msg')){ 
            $data['success_msg'] = $this->session->userdata('success_msg'); 
            $this->session->unset_userdata('success_msg'); 
        } 
        if($this->session->userdata('error_msg')){ 
            $data['error_msg'] = $this->session->userdata('error_msg'); 
            $this->session->unset_userdata('error_msg'); 
        } 
 
        $data['gallery'] = $this->gallery->getRows(); 
        $data['title'] = 'Gallery Archive'; 
         
        // Load the list page view 
        $this->load->view('templates/header', $data); 
        $this->load->view('gallery/index', $data); 
        $this->load->view('templates/footer'); 
    } 
     
    public function view($id){ 
        $data = array(); 
         
        // Check whether id is not empty 
        if(!empty($id)){ 
            $data['gallery'] = $this->gallery->getRows($id); 
            $data['title'] = $data['gallery']['title']; 
             
            // Load the details page view 
            $this->load->view('templates/header', $data); 
            $this->load->view('gallery/view', $data); 
            $this->load->view('templates/footer'); 
        }else{ 
            redirect($this->controller); 
        } 
    } 
     
    public function add(){ 
        $data = $galleryData = array(); 
        $errorUpload = ''; 
         
        // If add request is submitted 
        if($this->input->post('imgSubmit')){ 
            // Form field validation rules 
            $this->form_validation->set_rules('title', 'gallery title', 'required'); 
             
            // Prepare gallery data 
            $galleryData = array( 
                'title' => $this->input->post('title') 
            ); 
             
            // Validate submitted form data 
            if($this->form_validation->run() == true){ 
                // Insert gallery data 
                $insert = $this->gallery->insert($galleryData); 
                $galleryID = $insert;  
                 
                if($insert){ 
                    if(!empty($_FILES['images']['name'])){ 
                        $filesCount = count($_FILES['images']['name']); 
                        for($i = 0; $i < $filesCount; $i++){ 
                            $_FILES['file']['name']     = $_FILES['images']['name'][$i]; 
                            $_FILES['file']['type']     = $_FILES['images']['type'][$i]; 
                            $_FILES['file']['tmp_name'] = $_FILES['images']['tmp_name'][$i]; 
                            $_FILES['file']['error']    = $_FILES['images']['error'][$i]; 
                            $_FILES['file']['size']     = $_FILES['images']['size'][$i]; 
                             
                            // File upload configuration 
                            $uploadPath = 'uploads/images/'; 
                            $config['upload_path'] = $uploadPath; 
                            $config['allowed_types'] = 'jpg|jpeg|png|gif'; 
                             
                            // Load and initialize upload library 
                            $this->load->library('upload', $config); 
                            $this->upload->initialize($config); 
                             
                            // Upload file to server 
                            if($this->upload->do_upload('file')){ 
                                // Uploaded file data 
                                $fileData = $this->upload->data(); 
                                $uploadData[$i]['gallery_id'] = $galleryID; 
                                $uploadData[$i]['file_name'] = $fileData['file_name']; 
                                $uploadData[$i]['uploaded_on'] = date("Y-m-d H:i:s"); 
                            }else{ 
                                $errorUpload .= $fileImages[$key].'('.$this->upload->display_errors('', '').') | ';  
                            } 
                        } 
                         
                        // File upload error message 
                        $errorUpload = !empty($errorUpload)?' Upload Error: '.trim($errorUpload, ' | '):''; 
                         
                        if(!empty($uploadData)){ 
                            // Insert files info into the database 
                            $insert = $this->gallery->insertImage($uploadData); 
                        } 
                    } 
                     
                    $this->session->set_userdata('success_msg', 'Gallery has been added successfully.'.$errorUpload); 
                    redirect($this->controller); 
                }else{ 
                    $data['error_msg'] = 'Some problems occurred, please try again.'; 
                } 
            } 
        } 
         
        $data['gallery'] = $galleryData; 
        $data['title'] = 'Create Gallery'; 
        $data['action'] = 'Add'; 
         
        // Load the add page view 
        $this->load->view('templates/header', $data); 
        $this->load->view('gallery/add-edit', $data); 
        $this->load->view('templates/footer'); 
    } 
     
    public function edit($id){ 
        $data = $galleryData = array(); 
         
        // Get gallery data 
        $galleryData = $this->gallery->getRows($id); 
         
        // If update request is submitted 
        if($this->input->post('imgSubmit')){ 
            // Form field validation rules 
            $this->form_validation->set_rules('title', 'gallery title', 'required'); 
             
            // Prepare gallery data 
            $galleryData = array( 
                'title' => $this->input->post('title') 
            ); 
             
            // Validate submitted form data 
            if($this->form_validation->run() == true){ 
                // Update gallery data 
                $update = $this->gallery->update($galleryData, $id); 
 
                if($update){ 
                    if(!empty($_FILES['images']['name'])){ 
                        $filesCount = count($_FILES['images']['name']); 
                        for($i = 0; $i < $filesCount; $i++){ 
                            $_FILES['file']['name']     = $_FILES['images']['name'][$i]; 
                            $_FILES['file']['type']     = $_FILES['images']['type'][$i]; 
                            $_FILES['file']['tmp_name'] = $_FILES['images']['tmp_name'][$i]; 
                            $_FILES['file']['error']    = $_FILES['images']['error'][$i]; 
                            $_FILES['file']['size']     = $_FILES['images']['size'][$i]; 
                             
                            // File upload configuration 
                            $uploadPath = 'uploads/images/'; 
                            $config['upload_path'] = $uploadPath; 
                            $config['allowed_types'] = 'jpg|jpeg|png|gif'; 
                             
                            // Load and initialize upload library 
                            $this->load->library('upload', $config); 
                            $this->upload->initialize($config); 
                             
                            // Upload file to server 
                            if($this->upload->do_upload('file')){ 
                                // Uploaded file data 
                                $fileData = $this->upload->data(); 
                                $uploadData[$i]['gallery_id'] = $id; 
                                $uploadData[$i]['file_name'] = $fileData['file_name']; 
                                $uploadData[$i]['uploaded_on'] = date("Y-m-d H:i:s"); 
                            }else{ 
                                $errorUpload .= $fileImages[$key].'('.$this->upload->display_errors('', '').') | ';  
                            } 
                        } 
                         
                        // File upload error message 
                        $errorUpload = !empty($errorUpload)?'Upload Error: '.trim($errorUpload, ' | '):''; 
                         
                        if(!empty($uploadData)){ 
                            // Insert files data into the database 
                            $insert = $this->gallery->insertImage($uploadData); 
                        } 
                    } 
 
                    $this->session->set_userdata('success_msg', 'Gallery has been updated successfully.'.$errorUpload); 
                    redirect($this->controller); 
                }else{ 
                    $data['error_msg'] = 'Some problems occurred, please try again.'; 
                } 
            } 
        } 
 
         
        $data['gallery'] = $galleryData; 
        $data['title'] = 'Update Gallery'; 
        $data['action'] = 'Edit'; 
         
        // Load the edit page view 
        $this->load->view('templates/header', $data); 
        $this->load->view('gallery/add-edit', $data); 
        $this->load->view('templates/footer'); 
    } 
     
    public function block($id){ 
        // Check whether gallery id is not empty 
        if($id){ 
            // Update gallery status 
            $data = array('status' => 0); 
            $update = $this->gallery->update($data, $id); 
             
            if($update){ 
                $this->session->set_userdata('success_msg', 'Gallery has been blocked successfully.'); 
            }else{ 
                $this->session->set_userdata('error_msg', 'Some problems occurred, please try again.'); 
            } 
        } 
 
        redirect($this->controller); 
    } 
     
    public function unblock($id){ 
        // Check whether gallery id is not empty 
        if($id){ 
            // Update gallery status 
            $data = array('status' => 1); 
            $update = $this->gallery->update($data, $id); 
             
            if($update){ 
                $this->session->set_userdata('success_msg', 'Gallery has been activated successfully.'); 
            }else{ 
                $this->session->set_userdata('error_msg', 'Some problems occurred, please try again.'); 
            } 
        } 
 
        redirect($this->controller); 
    } 
     
    public function delete($id){ 
        // Check whether id is not empty 
        if($id){ 
            $galleryData = $this->gallery->getRows($id); 
             
            // Delete gallery data 
            $delete = $this->gallery->delete($id); 
             
            if($delete){ 
                // Delete images data  
                $condition = array('gallery_id' => $id);  
                $deleteImg = $this->gallery->deleteImage($condition);  
                  
                // Remove files from the server  
                if(!empty($galleryData['images'])){  
                    foreach($galleryData['images'] as $img){  
                        @unlink('uploads/images/'.$img['file_name']);  
                    }  
                }  
                 
                $this->session->set_userdata('success_msg', 'Gallery has been removed successfully.'); 
            }else{ 
                $this->session->set_userdata('error_msg', 'Some problems occurred, please try again.'); 
            } 
        } 
 
        redirect($this->controller); 
    } 
     
    public function deleteImage(){ 
        $status  = 'err';  
        // If post request is submitted via ajax 
        if($this->input->post('id')){ 
            $id = $this->input->post('id'); 
            $imgData = $this->gallery->getImgRow($id); 
             
            // Delete image data 
            $con = array('id' => $id); 
            $delete = $this->gallery->deleteImage($con); 
             
            if($delete){ 
                // Remove files from the server  
                @unlink('uploads/images/'.$imgData['file_name']);  
                $status = 'ok';  
            } 
        } 
        echo $status;die;  
    } 
}

Also Read:-How to Implement Payumoney Payment Gateway in Laravel 5

Model (Gallery.php)

The Gallery model handles the database related operations (Fetch, Add, Edit, and Delete).

  • __construct() – Define the table names.
  • getRows() –
    • Fetch the gallery data from the database based on the specified parameters passed in the $params.
    • For all records, it returns the data with the default image of the respective gallery.
    • For a single record, it returns the specific gallery data with all the images of the respective gallery.
  • getImgRow() – Fetch image file information based on the specified row ID.
  • insert() – Insert gallery data in the database. Returns the row ID on success, and FALSE on error.
  • insertImage() – Insert image file information in the database. Returns the row ID on success, and FALSE on error.
  • update() – Update gallery data in the database based on the row ID. Returns TRUE on success, and FALSE on error.
  • delete() – Delete record from the database based on the row ID. Returns TRUE on success, and FALSE on error.
  • deleteImage() – Delete single/bulk images from the database based on the specified conditions.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 
 
class Gallery extends CI_Model{ 
     
    function __construct() { 
        $this->galleryTbl   = 'gallery'; 
        $this->imgTbl = 'gallery_images'; 
    } 
     
    public function getRows($id = ''){ 
        $this->db->select("*, (SELECT file_name FROM ".$this->imgTbl." WHERE gallery_id = ".$this->galleryTbl.".id ORDER BY id DESC LIMIT 1) as default_image"); 
        $this->db->from($this->galleryTbl); 
        if($id){ 
            $this->db->where('id', $id); 
            $query  = $this->db->get(); 
            $result = ($query->num_rows() > 0)?$query->row_array():array(); 
             
            if(!empty($result)){ 
                $this->db->select('*'); 
                $this->db->from($this->imgTbl); 
                $this->db->where('gallery_id', $result['id']); 
                $this->db->order_by('id', 'desc'); 
                $query  = $this->db->get(); 
                $result2 = ($query->num_rows() > 0)?$query->result_array():array(); 
                $result['images'] = $result2;  
            }  
        }else{ 
            $this->db->order_by('id', 'desc'); 
            $query  = $this->db->get(); 
            $result = ($query->num_rows() > 0)?$query->result_array():array(); 
        } 
         
        // return fetched data 
        return !empty($result)?$result:false; 
    } 
     
    public function getImgRow($id){ 
        $this->db->select('*'); 
        $this->db->from($this->imgTbl); 
        $this->db->where('id', $id); 
        $query  = $this->db->get(); 
        return ($query->num_rows() > 0)?$query->row_array():false; 
    } 
     
    public function insert($data = array()) { 
        if(!empty($data)){ 
            // Add created and modified date if not included 
            if(!array_key_exists("created", $data)){ 
                $data['created'] = date("Y-m-d H:i:s"); 
            } 
            if(!array_key_exists("modified", $data)){ 
                $data['modified'] = date("Y-m-d H:i:s"); 
            } 
             
            // Insert gallery data 
            $insert = $this->db->insert($this->galleryTbl, $data); 
             
            // Return the status 
            return $insert?$this->db->insert_id():false; 
        } 
        return false; 
    } 
     
    public function insertImage($data = array()) { 
        if(!empty($data)){ 
             
            // Insert gallery data 
            $insert = $this->db->insert_batch($this->imgTbl, $data); 
             
            // Return the status 
            return $insert?$this->db->insert_id():false; 
        } 
        return false; 
    } 
     
    public function update($data, $id) { 
        if(!empty($data) && !empty($id)){ 
            // Add modified date if not included 
            if(!array_key_exists("modified", $data)){ 
                $data['modified'] = date("Y-m-d H:i:s"); 
            } 
             
            // Update gallery data 
            $update = $this->db->update($this->galleryTbl, $data, array('id' => $id)); 
             
            // Return the status 
            return $update?true:false; 
        } 
        return false; 
    } 
     
    public function delete($id){ 
        // Delete gallery data 
        $delete = $this->db->delete($this->galleryTbl, array('id' => $id)); 
         
        // Return the status 
        return $delete?true:false; 
    } 
     
    public function deleteImage($con){ 
        // Delete image data 
        $delete = $this->db->delete($this->imgTbl, $con); 
         
        // Return the status 
        return $delete?true:false; 
    } 
     
}

Views

1. templates/
The views/templates/ directory holds the element parts (header, footer, etc.) of the web templates.

Also Read:-How To Build a Text-to-Speech App with Web Speech API

1.1. templates/header.php
This file holds the header section of the web page. The Bootstrap 4 library is used for styling the HTML table and form. So, include the CSS file of the Bootstrap library and the custom stylesheet file (if any).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to Implement Multiple Image Uploading With View, Edit and Delete in CodeIgniter</title>
    
    <!-- Bootstrap library -->
    <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/bootstrap.min.css'); ?>">
    <script src="<?php echo base_url('assets/bootstrap/bootstrap.min.js'); ?>"></script>
    
    <!-- Stylesheet file -->
    <link rel="stylesheet" href="<?php echo base_url('assets/css/style.css'); ?>">
</head>
<body>

1.2. templates/footer.php
This file holds the footer section of the web page.

</body>
</html>

2. gallery/
The views/gallery/ directory holds the view files of the Manage_gallery controller.

2.1. gallery/index.php
Initially, all the gallery data is retrieved from the database and listed in a tabular view with the Add, Edit, and Delete options.

  • The View link displays the selected gallery info with images.
  • The Add link allows to add gallery information and upload multiple images.
  • The Edit link allows to edit gallery info and upload/delete images from the gallery.
  • The Delete link allows deleting gallery and images from the database.
Also Read:-How to Develop Firebase Authentication in Angular

The Status badge (Active/Inactive) allows controlling the visibility of the gallery.

<div class="container">
    <h2>How to Implement Multiple Image Uploading With View, Edit and Delete in CodeIgniter</h2>
	
    <!-- Display status message -->
    <?php if(!empty($success_msg)){ ?>
    <div class="col-xs-12">
        <div class="alert alert-success"><?php echo $success_msg; ?></div>
    </div>
    <?php }elseif(!empty($error_msg)){ ?>
    <div class="col-xs-12">
        <div class="alert alert-danger"><?php echo $error_msg; ?></div>
    </div>
    <?php } ?>
	
    <div class="row">
        <div class="col-md-12 head">
            <h5><?php echo $title; ?></h5>
            <!-- Add link -->
            <div class="float-right">
                <a href="<?php echo base_url('manage_gallery/add'); ?>" class="btn btn-success"><i class="plus"></i> New Gallery</a>
            </div>
        </div>
        
        <!-- Data list table --> 
        <table class="table table-striped table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th width="5%">#</th>
                    <th width="10%"></th>
                    <th width="40%">Title</th>
                    <th width="19%">Created</th>
                    <th width="8%">Status</th>
                    <th width="18%">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php if(!empty($gallery)){ $i=0;  
                    foreach($gallery as $row){ $i++; 
                        $defaultImage = !empty($row['default_image'])?'<img src="'.base_url().'uploads/images/'.$row['default_image'].'" alt="" />':''; 
                        $statusLink = ($row['status'] == 1)?site_url('manage_gallery/block/'.$row['id']):site_url('manage_gallery/unblock/'.$row['id']);  
                        $statusTooltip = ($row['status'] == 1)?'Click to Inactive':'Click to Active';  
                ?>
                <tr>
                    <td><?php echo $i; ?></td>
                    <td><?php echo $defaultImage; ?></td>
                    <td><?php echo $row['title']; ?></td>
                    <td><?php echo $row['created']; ?></td>
                    <td><a href="<?php echo $statusLink; ?>" title="<?php echo $statusTooltip; ?>"><span class="badge <?php echo ($row['status'] == 1)?'badge-success':'badge-danger'; ?>"><?php echo ($row['status'] == 1)?'Active':'Inactive'; ?></span></a></td>
                    <td>
                        <a href="<?php echo base_url('manage_gallery/view/'.$row['id']); ?>" class="btn btn-primary">view</a>
                        <a href="<?php echo base_url('manage_gallery/edit/'.$row['id']); ?>" class="btn btn-warning">edit</a>
                        <a href="<?php echo base_url('manage_gallery/delete/'.$row['id']); ?>" class="btn btn-danger" onclick="return confirm('Are you sure to delete data?')?true:false;">delete</a>
                    </td>
                </tr>
                <?php } }else{ ?>
                <tr><td colspan="6">No gallery found...</td></tr>
                <?php } ?>
            </tbody>
        </table>
    </div>
</div>

Delete Gallery Image via AJAX:
In the view.php and add-edit.php files, the image deletes functionality is integrated. The jQuery is used to delete images from the gallery via Ajax.

Where the gallery images delete functionality is used, include the jQuery library.

Also Read:-How to Implement Firebase Storage Using AngularJS
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>

The deleteImage() function initiate AJAX request to delete image from gallery.

  • POST the file ID to the deleteImage() method of the Manage_gallery controller.
  • Based on the status, remove the specific image from the web page using jQuery remove() method.
<script>
function deleteImage(id){
    var result = confirm("Are you sure to delete?");
    if(result){
        $.post( "<?php echo base_url('manage_gallery/deleteImage'); ?>", {id:id}, function(resp) {
            if(resp == 'ok'){
                $('#imgb_'+id).remove();
                alert('The image has been removed from the gallery');
            }else{
                alert('Some problem occurred, please try again.');
            }
        });
    }
}
</script>

2.2. gallery/view.php
This view file is loaded by the view() function of Manage_gallery controller. The specific gallery details are displayed on the webpage.

  • All the images from the selected gallery are listed with the Delete link.
  • Once the Delete button is clicked, JavaScript deleteImage() function is triggered and the respective image is removed from the gallery via Ajax using jQuery.
Also Read:-How to Create API Endpoint With Django Rest Framework
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h5><?php echo !empty($gallery['title'])?$gallery['title']:''; ?></h5>
			
            <?php if(!empty($gallery['images'])){ ?>
                <div class="gallery-img">
                <?php foreach($gallery['images'] as $imgRow){ ?>
                    <div class="img-box" id="imgb_<?php echo $imgRow['id']; ?>">
                        <img src="<?php echo base_url('uploads/images/'.$imgRow['file_name']); ?>">
                        <a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>
                    </div>
                <?php } ?>
                </div>
            <?php } ?>
        </div>
        <a href="<?php echo base_url('manage_gallery'); ?>" class="btn btn-primary">Back to List</a>
    </div>
</div>

2.3. gallery/add-edit.php
This view file is loaded by the add() and edit() functions of Manage_gallery controller.

On add request,

  • An HTML form is displayed to select multiple image files and provide the gallery name.

On edit request,

  • The data of the selected gallery will be pre-filled in the input fields and images are listed under the file upload field.
  • Delete link is provided to each uploaded image to remove the old images from the gallery.
<div class="container">
    <h1><?php echo $title; ?></h1>
    <hr>
    
    <!-- Display status message -->
    <?php if(!empty($error_msg)){ ?>
    <div class="col-xs-12">
        <div class="alert alert-danger"><?php echo $error_msg; ?></div>
    </div>
    <?php } ?>
    
    <div class="row">
        <div class="col-md-6">
            <form method="post" action="" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Title:</label>
                    <input type="text" name="title" class="form-control" placeholder="Enter title" value="<?php echo !empty($gallery['title'])?$gallery['title']:''; ?>" >
                    <?php echo form_error('title','<p class="help-block text-danger">','</p>'); ?>
                </div>
                <div class="form-group">
                    <label>Images:</label>
                    <input type="file" name="images[]" class="form-control" multiple>
                    <?php if(!empty($gallery['images'])){ ?>
                        <div class="gallery-img">
                        <?php foreach($gallery['images'] as $imgRow){ ?>
                            <div class="img-box" id="imgb_<?php echo $imgRow['id']; ?>">
                                <img src="<?php echo base_url('uploads/images/'.$imgRow['file_name']); ?>">
                                <a href="javascript:void(0);" class="badge badge-danger" onclick="deleteImage('<?php echo $imgRow['id']; ?>')">delete</a>
                            </div>
                        <?php } ?>
                        </div>
                    <?php } ?>
                </div>
                
                <a href="<?php echo base_url('manage_gallery'); ?>" class="btn btn-secondary">Back</a>
                <input type="hidden" name="id" value="<?php echo !empty($gallery['id'])?$gallery['id']:''; ?>">
                <input type="submit" name="imgSubmit" class="btn btn-success" value="SUBMIT">
            </form>
        </div>
    </div>
</div>

Also Read:-How to Render a React Component Inside a Bootstrap Popover

Conclusion

Our example display the executives content with CodeIgniter causes you to coordinate numerous pictures upload highlight with the view, include, alter, and erase usefulness. You can utilize this content for any kinds of information the executives segment where numerous picture upload is required. This model code is helpful for the exhibition CRUD activity. You can likewise upgrade the usefulness of our CodeIgniter exhibition CRUD application according to your requirements.




CFG