where to display $_SESSION variable below - php

Question

I am trying to retrieve a name of the file uploaded and append it into .list. The problem is that the file name it is retrieving from the $_SESSION variable is always the last file updated and then it doesn't change.
For example if I upload these files below in the server:
desert.jpg
tulips.jpg
lighthouse.jpg
desert_2.jpg
Then the file names it should append from $_SESSION should be:
desert.jpg
tulips.jpg
lighthouse.jpg
desert_2.jpg
But instead it is appending this below for file names retrieved from $_SESSION on screen:
desert.jpg
desert.jpg
desert.jpg
desert.jpg
How can it be fixed so that when a file is uploaded onto the server, it's file name is appended onto .list?
Below is the javascript function where $_SESSION variable is in the json code which displays the name of the file on the screen by appending it onto .list:
function stopImageUpload(success){
var imagename = <?php echo json_encode(isset($_SESSION ['fileImage']['name']) ? $_SESSION ['fileImage']['name'] : null); ?>;
if (success == 1){
$('.listImage').append(imagename + '<br/>');
}
else {
$('.listImage').append('No File');
}
return true;
}
Below is the php code where it uploads the file:
<?php
session_start();
$result = 0;
$errors = array ();
$dirImage = "ImageFiles/";
$allowedTypes = array (
"image/jpeg",
"image/gif",
"image/pjpeg",
"image/jpg",
"image/png",
"image/tif"
);
if (isset ( $_FILES ['fileImage'] ) && $_FILES ["fileImage"] ["error"] == UPLOAD_ERR_OK) {
$fileName = $_FILES ['fileImage'] ['name'];
$fileSize = $_FILES ['fileImage'] ['size'];
$fileTemp = $_FILES ['fileImage'] ['tmp_name'];
$fileType = $_FILES ['fileImage'] ['type'];
$fileExt = pathinfo ( $fileName, PATHINFO_EXTENSION );
$fileExt = strtolower ( $fileExt );
if (empty ( $fileName ))
continue;
if (! in_array ( $fileType, $allowedTypes )) {
$errors [] = "File Type is not accepted";
}
if(!is_writable($dirImage ))
{
$errors [] = "File Destination not writeable";
}
$fileDst = $dirImage . DIRECTORY_SEPARATOR . $fileName;
$filePrifix = basename ( $fileName, "." . $fileExt );
$i = 0;
while ( file_exists ( $fileDst ) ) {
$i ++;
$fileDst = $dirImage . DIRECTORY_SEPARATOR . $filePrifix . "_" . $i . "." . $fileExt;
}
// Move the file
if (count ( $errors ) == 0) {
if (move_uploaded_file ( $fileTemp, $fileDst )) {
$result = 1;
}
}
}
$_SESSION ['fileImage'][] = $_FILES ['fileImage']['name'];
?>
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result;?>);</script>
On seperate page I have a JSON which retrieves the $_SESSION:
function stopImageUpload(success){
var imagename = <?php echo json_encode(isset($_SESSION ['fileImage']) ? $_SESSION ['fileImage'] : null); ?>;
if (success == 1){
$('.listImage').append(imagename + '<br/>');
}
else {
$('.listImage').append('<br/>');
}
return true;
}

Answer 1

$_SESSION ['fileImage'][] = $_FILES ['fileImage']['name']; instead of $_SESSION ['fileImage']['name'] = $_FILES ['fileImage']['name'];