How to append the name of the file which has just been uploaded?

Question

I have a problem appending the imageNameArray where it is suppose to display file names which have been uploaded.

The problem is that lets say I previously uploaded a file (pig.png), when I refresh page and upload another file (panda.png), then when I upload the file, it should display 'panda.png'. But instead it is appending the name of the previous uploaded file (pig.png) and it does not append panda.png.

If I refresh page again and upload another file (tiger.png), then when I upload the file, it should display 'tiger.png'. But instead it is still just appending the name of the previously uploaded files (panda.png) and it does not append tiger.png.

If I upload another file (not refreshing page) such as monkey.png, then again it appends panda.png. No monkey.png. So it should of append tiger.png and monkey.png but instead it appends panda.png and panda.png.

All I want is that when a file is uploaded, it's name is appended. But how can this be achieved? Please show a coded example of how to fix it as I find it easier than an explanation saying why this is happening :)

Below is the javascript code where the appending occurs:

    <?php
    session_start();

    $idx = count($_SESSION ['fileImage'] - 1);
    $output = isset($_SESSION ['fileImage'][$idx]) ?
        $_SESSION ['fileImage'][$idx]['name'] : "";

    ?>

<script type="text/javascript">

 function imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          return startImageUpload(imageuploadform); 
      } 
      return false;
  }

function startImageUpload(imageuploadform){

              $(".imageCancel").click(function() {
              $('.upload_target').get(0).contentwindow
          return stopImageUpload();
    });

      return true;
}

    function stopImageUpload(success){
        var imageNameArray = new Array();
        imageNameArray = <?php echo $output ?>;
        var result = '';

        if (success == 1){
            result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

            for(var i=0;i<imageNameArray.length;i++)
            {
                $('.listImage').append(imageNameArray[i]+ '<br/>');
            }
        }
        else {
            result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
        }
        return true;
    }

</script>

<body>

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>
<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
</p><ul class='listImage' align='left'></ul>
<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");



</body>

Below is the php script (imageupload.php) where it uploads a file which is on another page from the javascript function above:

<?php
session_start();

$result = 0;
$errors = array ();
$dirImage = "ImageFiles/";

if (isset ( $_FILES ['fileImage'] ) &&
    $_FILES ["fileImage"] ["error"] == UPLOAD_ERR_OK) {

    $fileName = $_FILES ['fileImage'] ['name'];

    $fileExt = pathinfo ( $fileName, PATHINFO_EXTENSION );
    $fileExt = strtolower ( $fileExt );

    $fileDst = $dirImage . DIRECTORY_SEPARATOR . $fileName;

        if (count ( $errors ) == 0) {
            if (move_uploaded_file ( $fileTemp, $fileDst )) {
                $result = 1;
        }
    }
}

$_SESSION ['fileImage'][] = array('name' => $_FILES ['fileImage']['name']);
?>
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result;?>);</script>

Wait for someone to answer this one first: http://stackoverflow.com/questions/10374158/it-is-not-appending-the-variable/10374223#10374223 — Tom Hallam, Apr 29 '12 at 23:10
Can you include the relevant form tag and file input HTML? This will help us understand the flow of your code. — Nate Pinchot, Apr 29 '12 at 23:23
@tomhallam sorry, tom, I forgot to mark that answer you gave me on that previous question :) — user1364441, Apr 29 '12 at 23:26
@NatePinchot Give me 5 mins to edit the code above to include the form code — user1364441, Apr 29 '12 at 23:27
@NatePinchot I have updated code to include the relevant information you may need :) — user1364441, Apr 29 '12 at 23:31

Nate Pinchot · Accepted Answer · 2012-04-30T01:18:16.480

The problem is that you are outputting the name of the uploaded file when the PHP code renders the page, which is before the (next) image is uploaded.

This happens on this line in the stopImageUpload() JavaScript function:

imageNameArray = <?php echo $output ?>;

There are a couple ways you can resolve this, but I would go for the straightforward way of passing the file name back via the stopImageUpload() function.

// stolen from http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding
function htmlEncode(value) { return $('<div/>').text(value).html(); }

function stopImageUpload(success, filename) {
  var imageNameArray = new Array();
  var result = '';

  if (success) {
    result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

    $('.listImage').append(htmlEncode(filename) + '<br/>');
  } else {
    result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
  }
}

Then you simply need to adjust the last line of imageupload.php:

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>

Note: If you have the option turned on to allow <?= ?> blocks you can make the above code look much nicer:

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?= $result ? 'true' : 'false'; ?>, <?= $_FILES['fileImage']['name'] ?>);</script>

Thank you very much for solving this problem for me :) – user1364441 Apr 30 '12 at 00:59 — user1364441, Apr 30 '12 at 00:59

How to append the name of the file which has just been uploaded?

1 Answers1