Uploaded and resized photo in Codeigniter is not available in view until I refresh .. is my view loading “too fast”?

Question

I'm having problems with a photo upload system in Codeigniter.

I'm uploading and resizing a photo during registration in my controller, and once that goes through, I load an "upload successful" view where I want to display the photo again.

The problem is,

• I step into a "fail" loop that actually seems to not be failing

and

• the first time I load my view, the photo isn't displaying (although it has been uploaded, resized, and the path is in my DB). But if I refresh the page, it does display correctly.

Here is the controller .. check the comments close to the bottom, because the top part is basically just the resizing logic and (although it is kind of ugly right now) it does work

public function do_upload()
{
    $config['upload_path'] = './upload_pic/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '100';
    $config['max_width']  = '1200';
    $config['max_height']  = '768';
    $_maxResizedWidth = '242';

    $this->load->library('upload', $config);

    if ( $this->upload->do_upload() )
    {
        $this->data['upload_data'] = $this->upload->data();
        $this->data['title'] = "Upload Successful";

         switch($this->data['upload_data']['file_type']){
            case "image/jpg":
                $_file_suffix = ".jpg";
                break;
            case "image/jpeg":
                $_file_suffix = ".jpg";
                break;
            case "image/png":
                $_file_suffix = ".png";
                break;
            case "image/gif":
                $_file_suffix = ".gif";
                break;
            case "image/pjpeg":
                $_file_suffix = ".jpg";
                break;
         }

        $_fileName = $this->data['upload_data']['file_name']; 
        $_oldUploadPath = $config['upload_path'] . $_fileName;
        $_random_key = strtotime(date('Y-m-d H:i:s'));
        $_newUploadPath = $config['upload_path'] . 'resize_' . $_random_key . $_file_suffix;
        rename( $_oldUploadPath, $_newUploadPath );

        $_oldSize = getimagesize($_newUploadPath);
        $_oldWidth = $_oldSize[0];

        if($_oldWidth > $_maxResizedWidth){
            $_scale = $_maxResizedWidth/$_oldWidth;
            $_oldHeight = $_oldSize[1];
            $_imageType = image_type_to_mime_type($_oldSize[2]);
            $_newWidth = $_oldWidth * $_scale;
            $_newHeight = $_oldHeight * $_scale;
            $_resizedImage = imagecreatetruecolor($_newWidth, $_newHeight);
            switch($_imageType) {
                case "image/gif":
                    $_source=imagecreatefromgif($_newUploadPath); 
                    break;
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    $_source=imagecreatefromjpeg($_newUploadPath); 
                    break;
                case "image/png":
                case "image/x-png":
                    $_source=imagecreatefrompng($_newUploadPath); 
                    break;
            }
            imagecopyresampled($_resizedImage, $_source, 0, 0, 0, 0, $_newWidth, $_newHeight, $_oldWidth, $_oldHeight);
            switch($_imageType) {
                case "image/gif":
                    imagegif($_resizedImage,$_newUploadPath); 
                    break;
                case "image/pjpeg":
                case "image/jpeg":
                case "image/jpg":
                    imagejpeg($_resizedImage,$_newUploadPath,90); 
                    break;
                case "image/png":
                case "image/x-png":
                    imagepng($_resizedImage,$_newUploadPath);  
                    break;
            }
        }

        $_newUploadPathWithoutDot = substr($_newUploadPath,1);

        $this->load->model('Member_model');
        $ID = $this->the_user->id;

             /// ****************************************************************************
             /// I step into this next if loop even though the upload_photo method does work.  
            /// In my view I get the "there was a problem" .. but the DB has been correctly updated

        if(!$this->Member_model->upload_photo( $ID, $_newUploadPathWithoutDot));
        {
            $uploadData = $this->upload->data();
            $this->data['message'] = "There was a problem entering your photo in the database ==";
        };

              /// And this is the view that's called
        $this->load->view('upload_big_success_view', $this->data);
    }
    else
    {
        $this->data['message'] = "there was a problem " . $this->upload->display_errors() . dirname(__FILE__);
        $this->data['title'] = "Upload Unsuccessful";
        $this->load->view('profile_photo_view', $this->data);
    }
}

(I know there is a lot of messy in there, and I'll give it a refactor).

It almost seems like the image is "not ready" when the view first loads, even though everything has worked - the upload, the resize, the filepath is entered in the DB... nothing has thrown any errors until it gets to that last loop and it seems to think "->upload_photo()" has failed when it hasn't. And then when I call the view the first time my ..

<img src"<?php echo $the_user->large_image_location; ?>" > 

.. produces no output. But after a simple refresh, it does. Although the "there was a problem message" is still displaying in the view.

BTW - here is the model. Nothing fancy.

public function upload_photo($ID, $_newUploadPath)
{
    $sql = "UPDATE users SET large_image_location=? WHERE id=?";
    $query = $this->db->query($sql, array($_newUploadPath, $ID));
    return $query;  
}

So any ideas?

Answer 1

Codeigniter won't refresh the page when loading a view, so it will never load the images, instead you will need to tell Codeigniter to refresh the page by using the redirect() function. Instead of loading the success view at the end of the do_upload() method, you should do a redirect to your success page.

I would create a upload_big_success() method, to load your upload_big_success_view for you, then redirect to that method.

Replace the following line in your do_upload() :

$this->load->view('upload_big_success_view', $this->data);

with:

redirect(upload_big_success, 'location');

Then create a method for your success page in the same controller.

public function upload_big_success() {
   // And this is the view that's called
   $this->load->view('upload_big_success_view');
}