different data in the modal

[Klarez]

Hi ,

please i need help
I created a php upload function to upload some photos to the database. Created a form
<form action="upload.php" enctype="multipart/form-data" method="POST">
            <input class="pl-2 input" type="file" name="image" id="image"><br>
            <input class="send" type="submit" value="upload picture" name="upload">
    </form>
and in another file called upload.php
<?php
if (isset($_POST['upload'])){
    $filename=$_FILES['image']['name'];
    $tempname=$_FILES['image']['tmp_name'];
    $filesize=$_FILES['image']['size'];
    $filetype=$_FILES['image']['type'];
    
        $folder="images/" . $filename;

    $conn=mysqli_connect("localhost","root","","mojeslike");
    mysqli_query($conn,"INSERT INTO photos(image) VALUES ('{$filename}')");
    if(move_uploaded_file($tempname,$folder)){
        echo "image uploaded successfully";
    }else{
        echo "failed to upload";
    }
}
?>
 in a body tag
    <section class="container first">
<h1>PICTURE GALLERY</h1>

    <article>
        <?php
            $rez=mysqli_query($conn,"SELECT * FROM photos");
            while($row=mysqli_fetch_array($rez)){
        ?>
                <div class="photo">
                    <img src="<?php echo $row['image']; ?>" >
                    <div>
  
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    <h4>about picture</h4>
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Image details</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
            
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
</div>
                </div>
        <?php
}
        ?>
    </article>
<div class="clearfix"></div>
</section>

there is also a css file with styling, which is why this clearfix was included

means, in one div tag I have an image and a bootstap modal. Another image is always displayed, and when I click on the button below the image, I would like them to show me data about the image. if I put echo $filesize and echo $filetype in the body of the modal, I get data about the last upload picture. I want to always have another data, each picture to display its own data, but I don't know that, so please help me with this problem. Thank you.

Edited July 15, 2022 by Klarez

[dsonesuk]

The trouble is you are creating multiple modals with the same id, the id should be unique within the document. When click the button the last modal with id "myModal" is shown.

IF you want a modal for every image use a counter variable $modalCount and increment using $modalCount++; within the while loop and add variable to anything referring to modal id.

Example

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal<?php echo $modalCount;?>">
  
  //and
  
  <div class="modal fade" id="myModal<?php echo $modalCount;?>">

The modal id will now be unique and related to the button with matching target id.

#myModal1 to id="myModal1"

#myModal2 to id="myModal2"

#myModal3 to id="myModal3"... and so on.

IF you want a single modal,  take modal out of while loop, then you need to store the data and one way is to use custom data- attributes to store this data in a element itself. The button itself already uses this with data-target="#myModal", so just expand on this for filesize and filetype with data-filesize="<?php echo $filesize; ?>" and data-filetype="<?php echo $filetype; ?>" you can then read these custom data- values within the modal.

Edited July 16, 2022 by dsonesuk