How to retrieve the name of the file's name from the server using javascript?

Question

I have a function below where when the file stops uploading, it displays a message whether upload was successful or not and then more importantly displays the name of the file uploaded using this code below:

 $('.listImage').append(nameimagefile + '<br/>');

This code above retrieves the name of the file selected from the file input. The problem with this though is that I don't want the name of the file entered in the file input. Instead I want the name of the file which is uploaded into the server.

For example if I have uploaded 2 files which are both tulips.png, in the server they are saved and uploaded as tulips.png and tulips2.png but because I am using $('.listImage').append(nameimagefile + '<br/>'); , it displays both file names as 'tulips.png' which is not what I want.

So this is where I decided i want to retireve the name of the file not from the value of the input file but the name saved when uploaded in the file.

How can I code this in the javascript function?

The javascript function and php script are on seperate pages but I do use a call back function in the php script to the javascript function:

Below is the form code:

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
    <p>Image File: <input name='fileImage' type='file' class='fileImage' />
    <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' />
    </p> 
    <ul class='list'></ul>
    </form>

Below is the javascript function which gets the name of the file and displays a message if file is successful or not:

   function stopImageUpload(success){

          var nameimagefile = $('.fileImage').val();
          var result = '';
          if (success == 1){
             result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
             $('.listImage').append(nameimagefile + '<br/>');
          }
          else {
             result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
          }

 return true;

}

Finally below is the php script with the javascript call back function. aLl it does is upload file if file exists or not in server's folder. If it exists then it gives it a different file name by adding a name at end of file name, if it doesn't exist then it uploads file with same name:

if( file_exists("ImageFiles/".$_FILES['fileImage']['name'])) {
    $parts = explode(".",$_FILES['fileImage']['name']);
    $ext = array_pop($parts);
    $base = implode(".",$parts);
    $n = 2;

    while( file_exists("ImageFiles/".$base."_".$n.".".$ext)) $n++;
    $_FILES['fileImage']['name'] = $base."_".$n.".".$ext;

    move_uploaded_file($_FILES["fileImage"]["tmp_name"],
    "ImageFiles/" . $_FILES["fileImage"]["name"]);
    $result = 1;

}
    else
      {
      move_uploaded_file($_FILES["fileImage"]["tmp_name"],
      "ImageFiles/" . $_FILES["fileImage"]["name"]);
      $result = 1;

      }


?>

<script language="javascript" type="text/javascript">window.top.window.stopImageUpload(<?php echo $result;?>);</script>

Hopefully that is all the info you need and thank you.

Answer 1

You could pass $_FILES["fileImage"]["name"] as argument to your js function. Javascript is a client side language, and thus, unable to handle files on the server.