Image (src) not refreshing after file-upload -> image

Question

Having an image 'update' problem, whereby the image does not change after new file upload. the SRC attribute is designed to remain same; each uploaded file overwrites the previous one. Let me elaborate::

I have a simple webpage, say Home.php and the page shows an image 'IMAGE1.jpg' where the image tag's src = "directory456/IMAGE1.jpg", understandably.

This homepage allows the user to change the image, through a file upload button Input type="file" (as we all know) located inside a "form". The form POSTS all the file data to another php file "Upload_File_Check.php".

Inside "Upload_File_Check.php", simple actions are performed: (1) Check file size <2.0 MB, (2) Check file "type" ($_FILES['filename']['type']) is one of {image/jpeg image/gif image/png}, and (3) depending on whichever, utilizes the imagecreatefrom(gif/png/bmp)() function in PHP, to convert them ALL to jpg, (4) ALL uploaded files are saved as "directory456/IMAGE1.jpg" using same file name hence overwriting the previous file sitting the in the directory. This way, knowing that the image's name will always be IMAGE1.jpg, I will not need to store/retrieve that from database. (comments welcome on this practice).

However, once the user clicks on the "Upload" button, and checks in "Upload_File_Check.php" are completed successfully, I would have thought that since "Home.php" is reloaded (? not sure about this), the image tag would get refreshed and now show the new image which has just been uploaded (SRC has remained same src="directory456/IMAGE1.jpg")?. The old image is showing, only upon manual page reload does the new image show.. how can I get the image tag to now refresh and load recent image pointed to ?

Code for Home.php:

        <FORM method='post' action='Upload_File_Check.php' enctype='multipart/form-data'>
            <INPUT type='file' name='filename_' size='10'>
            <INPUT type='submit' value='upload'>
        </FORM><?PHP echo $_SESSION['UPLOAD_FILE_ERR'];?>

Code for Upload_File_Check.php:

<?PHP

if($_FILES['filename_']['error'] > 0)
    {   $_SESSION['UPLOAD_FILE_ERR'] .= "ERROR: ". $F_error;
        header("location: HOME.PHP");} 
    else 
    {   $F_name = $_FILES['filename_']['name'];
        $F_tmpnm = $_FILES['filename_']['tmp_name'];
        $F_type = $_FILES['filename_']['type'];
        $F_size = $_FILES['filename_']['size'];

            if (!$F_tmpnm)  // if file not chosen
            {   $_SESSION['UPLOAD_FILE_ERR'] .= "ERROR - must have a file. ";   }

            if (!(($F_type == "image/bmp")||($F_type == "image/png")||($F_type == "image/jpeg")||($F_type == "image/gif")))
            { $_SESSION['UPLOAD_FILE_ERR'] .= "INVALID - only BMP JPG PNG GIF files allowed ";  }   

            if ($F_size > 2097152)
            { $_SESSION['UPLOAD_FILE_ERR'] .= "File must be < 2.0MB ";  }

            if (($_SESSION['UPLOAD_FILE_ERR']) !== "")
                {   header("HOME.PHP");             }               
            else
                {   $F_destpath = "directory456/";
                    $F_destname = "IMAGE1.jpg";
                    move_uploaded_file($F_tmpnm, ($F_destpath . $F_name));
                    //convert MOVED file to jpg.

                    switch($F_type)
                       {    case "image/png":
                            $Converted_image=imagecreatefrompng($F_destpath . $F_name); break;

                            case "image/bmp":
                            $Converted_image=imagecreatefrombmp($F_destpath . $F_name); break;

                            case "image/gif":
                            $Converted_image=imagecreatefromgif($F_destpath . $F_name); break;

                            case "image/jpeg": break;
                        }
                    imagejpeg($Converted_image, $F_destpath . $F_destname , 90);
                }
                header("location: HOME.PHP");           
    }
?>

How do I get the IMAGE tag to refresh and point to the new image.. Would greatly appreciate your help... New bie here, would also welcome all comments on the way I have programmed the stuff below.. what are best practices, what are faster (more efficient) methods, etc..

score 0 · Answer 1 · answered May 26 '20 at 09:12

0

This question is a duplicate of PHP force refresh image.

The image isn't refreshing because the browser is caching the older file. To solve, just add a cache-busting query string to the URL in your img src. Unix timestamps work well for this. Note, however, that this will force the image to reload every time the page is loaded.

<img src="IMAGE1.jpg?t=<?php echo time() ?>">

answered May 26 '20 at 09:12

jdaz

5,964
2
22
34

Thanks jdaz, is there a way that I can put this cache buster maybe in the last line of Upload_File_Check.php ,, something like **header (location: "HOME.php?$t=time()")** .. maybe this would prevent it from reloading the whole page like it would if I put it in the SRC attribute of the img tag? thank you so much. i will look at the original 'already asked' question you pointed out. – Madventures May 27 '20 at 03:31
Actually the accepted answer in the link I posted is probably a better fit for your use case: `` That way it will force refresh when the file is changed, but will cache otherwise. – jdaz May 27 '20 at 06:04
wow jdaz, thank you so much. That was what I was looking for! so much appreciated! – Madventures Jun 27 '20 at 06:02

Image (src) not refreshing after file-upload -> image

1 Answers1