Code Playground.

CodeIgniter's File Upload class assists with transferring records to the server. With the Upload library, you can without much of a stretch transfer record in CodeIgniter. For the most part the picture transfer usefulness is utilized in the web application. CodeIgniter Upload library gives the simplest method to transfer picture document to server. 

The thumbnail is a decreased size rendition of the picture that utilized as a littler duplicate to show on the site page. In the web application, it's constantly prescribed to utilize a thumbnail to show a picture on the website page. Thumbnail assists with sparing data transfer capacity and diminish page load time. The thumbnail creation is exceptionally valuable for the picture transfer usefulness. CodeIgniter's Image Manipulation class assists with resizing picture and make thumbnail before transfer. Right now, will tell you the best way to transfer picture and make thumbnail in CodeIgniter.

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

Config

autoload.php
In the config/autoload.php file, specify the helper which you want to load automatically on every request. For this example CodeIgniter image upload script, specify the URL helper to load automatically.

$autoload['helper'] = array('url');

Controller (Upload.php)

The Upload controller handles the image upload and resize functionality.

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
 
class Upload extends CI_Controller{ 
     
    function  __construct(){ 
        parent::__construct(); 
    } 
     
    function index(){ 
        $thumb_msg = $status = $status_msg = $thumbnail = $org_image_size = $thumb_image_size = ''; 
        $data = array(); 
 
        if($this->input->post('submit')){ 
            if(!empty($_FILES['image']['name'])){ 
            	$directory = './assets/uploads/blogs'; 
				@mkdir($directory, 0777); 
				@chmod($directory,  0777); 
                $config['upload_path']   = $directory; 
                $config['allowed_types'] = 'jpg|jpeg|png'; 
                 
                $this->load->library('upload', $config); 
                 
                if($this->upload->do_upload('image')){ 
                    $uploadData = $this->upload->data(); 
                    $uploadedImage = $uploadData['file_name']; 
                    $org_image_size = $uploadData['image_width'].'x'.$uploadData['image_height']; 
                    $source_path = $directory.$uploadedImage; 
                    $thumb_path = $directory.'thumb/'; 
                    $thumb_width = 280; 
                    $thumb_height = 175;                      
                    // Image resize config 
                    $config['image_library']    = 'gd2'; 
                    $config['source_image']     = $source_path; 
                    $config['new_image']         = $thumb_path; 
                    $config['maintain_ratio']     = FALSE; 
                    $config['width']            = $thumb_width; 
                    $config['height']           = $thumb_height; 
                     
                    $this->load->library('image_lib', $config); 
                     
                    if($this->image_lib->resize()){ 
                        $thumbnail = $thumb_path.$uploadedImage; 
                        $thumb_image_size = $thumb_width.'x'.$thumb_height; 
                        $thumb_msg = '<br/>Thumbnail created!'; 
                    }else{ 
                        $thumb_msg = '<br/>'.$this->image_lib->display_errors(); 
                    } 
                     
                    $status = 'success'; 
                    $status_msg = 'Image has been uploaded successfully.'.$thumb_msg; 
                }else{ 
                    $status = 'error'; 
                    $status_msg = 'The image upload has failed!<br/>'.$this->upload->display_errors('',''); 
                } 
            }else{ 
                $status = 'error'; 
                $status_msg = 'Please select a image file to upload.';  
            } 
        } 
         
        $data['status'] = $status; 
        $data['status_msg'] = $status_msg; 
        $data['thumbnail'] = $thumbnail; 
        $data['org_image_size'] = $org_image_size; 
        $data['thumb_image_size'] = $thumb_image_size; 
         
        $this->load->view('upload/index', $data); 
    } 
}

View

upload/index.php

This view file is loaded by the index() functions of the Upload controller.

Also Read:-How to install Atom editor in Ubuntu

An HTML form is displayed to select an image file.

If file upload is successful, the image thumbnail is displayed on the webpage.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Form</h2>

<form action="" method="post" enctype="multipart/form-data">
    <label>Choose Image File:</label>
    <input type="file" name="image">
    <input type="submit" name="submit" value="UPLOAD">
</form>
<div class="result">
    <?php if(!empty($status)){ ?>
        <p class="status-msg <?php echo $status; ?>"><?php echo $status_msg; ?></p>
    <?php if(!empty($thumbnail)){ ?>
    <?php if(!empty($thumbnail)){ ?>
        <div class="info">
            <p>Original Image Size: <?php echo $org_image_size; ?></p>
            <p>Created Thumbnail Size: <?php echo $thumb_image_size; ?></p>
        </div>
        <div class="thumb">
            <img src="<?php echo base_url($thumbnail); ?>"/>
        </div>
    <?php } ?>
</div>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/upload.php".</p>

</body>
</html>

Conclusion

The image upload and thumbnail creation usefulness can be handily incorporated utilizing the Upload and Image_lib library in CodeIgniter. Our model uploader content encourages you to coordinate picture transfer usefulness in CodeIgniter with resize and thumbnail highlights. You can utilize this uploader code for various purposes where picture document transfer is required.