How can I enable user to select one image from the multiple images that he has just uploaded without refreshing the page?

Question

I have a form where user can upload multiple images. I need a way to enable user to select one image from the images he just uploaded as his main picture before submitting the form.

I have loaded the previews using JavaScript file reader. I have tried to add a name via JavaScript to the image user has selected, so it can be accessed as a post element in the PHP script. But it is not working since it cannot be accessed as a file. I have spent 3 full days over this before posting this question. It'll be a huge help I anyone could tell me on how to approach this problem.

Following is the form :

<input type="file" name="files[]" multiple="true" id="file">
<div class="list"></div>

Javascript code for loading previews:

    var imagesPreview = function(input, p) {
    var id=1;
    if (input.files) {
      var filesAmount = input.files.length;
      for (i = 0; i < filesAmount; i++) {
          var reader = new FileReader();
          reader.onload = function(event) {
              $($.parseHTML('<img class="thumb" id="'+id+'">')).attr('src', event.target.result).appendTo(p);
              id++;
          }
          reader.readAsDataURL(input.files[i]);
      }
     } 
    };

PHP code for uploading files:

    $total = count($_FILES['files']['name']);
    // Loop through each file
    for($i=0; $i<$total; $i++) {
      //Get the temp file path
      $tmpFilePath = $_FILES['files']['tmp_name'][$i];
      //Make sure we have a filepath
      if ($tmpFilePath != ""){
        //Setup our new file path
        $newFilePath = "gig_pics/" . $_FILES['files']['name'][$i];
        //Upload the file into the temp dir
        move_uploaded_file($tmpFilePath, $newFilePath);
        $file_sql = "INSERT INTO `gig_pics`(id,gig_id,pic) VALUES ('','$gid','$newFilePath')";
        $file_res = mysqli_query($conn,$file_sql);
      }
    }

And after adding the name with jquery, I tried accessing the image as post

    $main_img_path = $_POST['selectImage'];
    $main_img_path = $_FILES['selectImage'];

But I could do anything.

Answer 1

I think your problem lies in the way you are selecting the specific file from the list of files:

$main_img_path = $_FILES['selectImage'];

I've not used PHP in a while, but in my opinion if you are already looping through the files on the server, why not check for the main image while looping? Something like this (assuming $_POST['selectImage'] contains the temp file name of the selected image):

$total = count($_FILES['files']['name']);
// Loop through each file
for($i=0; $i<$total; $i++) {
  //Get the temp file path
  $tmpFilePath = $_FILES['files']['tmp_name'][$i];
  //Make sure we have a filepath
  if ($tmpFilePath != ""){

    if ($tmpFilePath === $_POST['selectImage']) {
        // This is the selected image
    }
    //Setup our new file path
    $newFilePath = "gig_pics/" . $_FILES['files']['name'][$i];
    //Upload the file into the temp dir
    move_uploaded_file($tmpFilePath, $newFilePath);
    $file_sql = "INSERT INTO `gig_pics`(id,gig_id,pic) VALUES ('','$gid','$newFilePath')";
    $file_res = mysqli_query($conn,$file_sql);
  }
}

Like I said, this depends on what $_POST['selectImage'] contains as I'm not sure what you are storing there.