Multiple image upload with caption

[esu]

Im trying to upload multiple image with caption, caption where user can edit and update the caption.
i dont have any problem for multiple image upload but couldn’t figure our how add caption for each upload image with edit/update option.

Image index page for uploading form

<div class="container">
  <div class="row">
     <div class="col-md-3"></div>
      <div class="col-md-6">
        <div class="alert alert-success alert-dismissible" id="success" style="display: none;">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          File uploaded successfully
        </div>
      <form id="submitForm">
        <div class="form-group">
          <div class="custom-file mb-3">
            <input type="file" class="custom-file-input" name="multipleFile[]" id="multipleFile" required="" multiple>
            <label class="custom-file-label" for="multipleFile">Choose Multiple Images to Upload</label>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" name="upload" class="btn btn-success btn-block">Upload File</button>
        </div>  
      </form>
    </div>
  </div>
  <!-- gallery view of uploaded images -->
  <div id="gallery"></div>
</div>

Multiple image upload code

$sernamename = "localhost";
    $username    = "root";
    $passoword   = "";
    $databasename= "my_db";

    // Create database connection
    $con = mysqli_connect($sernamename, $username,$passoword,$databasename);

    // Check connection
    if ($con->connect_error) {
        die("Connection failed". $con->connect_error);
    }

  // Upload multiple image in Database using PHP MYSQL

  if (!empty($_FILES['multipleFile']['name'])) {

    $multiplefile = $_FILES['multipleFile']['name'];

    foreach ($multiplefile as $name => $value) {
      
    $allowImg = array('png','jpeg','jpg',''); 

    $fileExnt = explode('.', $multiplefile[$name]);

    if (in_array($fileExnt[1], $allowImg)) {

        if ($_FILES['multipleFile']['size'][$name] > 0 && $_FILES['multipleFile']['error'][$name]== 0) {
          
      $fileTmp = $_FILES['multipleFile']['tmp_name'][$name];
          
      $newFile =  rand(). '.'. $fileExnt[1];

      $target_dir = 'uploads/'.$newFile; 

      if (move_uploaded_file($fileTmp, $target_dir)) {
          $query  = "INSERT INTO table_images (images) VALUES('$newFile')";
          mysqli_query($con, $query);
      }
        }
    }
      }
  } 

Fetch data for display submitted image from database

  $query = "SELECT * FROM table_images";

  $result = mysqli_query($con, $query);
  
  if (mysqli_num_rows($result) > 0) {

      while ($row = mysqli_fetch_assoc($result)) {
    $images = $row['images'];
   
      

      ?>
        <div class="image" style="display:inline-block;width: 320px;">
          <div class="rt">
            <img src="uploads/<?php echo $images; ?>" class="img-thumbnail" width="220px" height="220px" style="margin:10px;" />;
          </div>
          <div class="caption">
            <label>Caption</label><br>
            <input type="text" name="caption" placeholder="caption to be insert/update">
            <input type="submit" name="submit" value="update" >
          </div>
          

        </div>

      <?php
}
  }else{
      echo "<h3 style='text-align:center'>No Image found</h3>";
  }

Image can be uploaded and displayed easily, but how can i add caption for images that user can edit/update it.

how can i get this caption option with multiple image upload option where user can edit the caption and update

[mabismad]

@esu

name="caption"

The field name needs to be an array, like what the field name of the type=‘file’ field is, with the array index being the id (autoincrement primary index) corresponding to the database table row that the image is in. When the data is submitted, you can use a foreach() loop to get both the array index (id) and the submitted value.

Your upload file handling code MUST detect if the total size of the form data has exceed the post_max_size setting (both the $_FILES and $_POST arrays will be empty), and then it must test to make sure that each individual file was uploaded without any error, the [‘error’] element will be a zero, before using any for the uploaded file information.

@esu

rand()

Computers don’t do random very well. Your existing code must detect and handle duplicates.

A better way to uniquely name things is to insert the row of data, get the autoincrement last insert id from that query, and use the id as part of the name. Since the autoincrement primary index is guaranteed to be unique, there’s no chance of duplicates.

You should also use a prepared query whenever you are supplying external, unknown, dynamic values to a query when it gets executed so that any sql special characters in a value won’t break the sql query syntax, which is how sql injection is accomplished. If you are avoiding doing this because of how hard it is with the mysqli extension, switch to the much simpler PDO extension.

Edit: Another issue with the upload code is you need to display a helpful error message for each uploaded file that has either failed to upload or to validate, so that the user can correct the problem and re-upload the failed file(s.)

[esu]

how does this give user the edit ability to update caption…???

i tried to insert form and try update with following code but its doesnt have any update effects

if (mysqli_num_rows($result) > 0) {

      while ($row = mysqli_fetch_assoc($result)) {
    $images = $row['images'];
   $caption= $row['caption'];
   $id = $row['id'];
      

      ?>
        <div class="image" style="display:inline-block;width: 320px;">
          <div class="rt">
            <img src="uploads/<?php echo $images; ?>" class="img-thumbnail" width="220px" height="220px" style="margin:10px;" />;
          </div>
          
          <?php 
          if(isset($_POST['update'])){
              $id      = $_POST['id'];
              $caption  = $_POST['caption'];
              
           $query= "UPDATE `table_images` SET `caption` ='hello' WHERE `id` = 7 ";
           $result = mysqli_query($con, $query);

           if(!$result){
              die('Query failed' . mysqli_error($con));
           }
         }
          ?>
          <div class="caption">
            <p><?php echo $caption;?></p>
            <form method="post" action="">
              <input type="text" name="id" value="<?php echo $id; ?>">
            <label>Caption</label><br>
            <input type="text" name="caption"  value="<?php echo $caption;?>">
            <input type="submit" name="update" value="update" >
            </form>
          </div>
          

        </div>

      <?php

is update query not affected due ajax…???

[Drummin]

@esu

its doesnt have any update effects

@esu

UPDATE table_imagesSETcaption='hello' WHEREid= 7

Hard coded values in update query instead of post values.

[esu]

i was just checking randomly entering hard code value…

[mabismad]

@esu

is update query not affected due ajax…???

Given that the <form… tag in the upload code won’t upload files, I’m guessing you are using ajax to submit that upload form data?

If you are also using ajax to submit the caption edit/update form data, what debugging have you done to find out if any data was submitted, what values were submitted, and what the server-side code did?

And, actually that just caused me to see the most likely problem. When using ajax to submit a form, the submit button isn’t a successful form field, and won’t automatically be set in the form data. This is the reason why we continually tell people to instead always detect if a post method form was submitted.

Also, putting the form processing code in the middle of the form ‘can’ work (the current code will break the output of the caption forms due to reusing variable names), but the post method form processing code should always be above the start of the html document and in the case of using ajax you would then need to output any user/validation errors or success messages back to the ajax code, and end php code execution.

[esu]

im solve it by inserting image name in caption rows in database but not sure will it work with page id, i developing the project…

add new page…
title field, content field others field and lastly multiple upload field

page-table
insert into parent_page (field-1 field-2,field-3) values (field-1 field-2,field-3)
lastinsert->id is generated

gallery-table
insert into gallery-image (multiple-image) values (multiple-image) where parent_id = lastinsert->id

i will update result once i reach this section.

Multiple image with caption is solved without link to any others tables id…

[esu]

in database im just storing image name without it’s extension… e.g pciture-1 but i want name with extension in database table like picture-1.jpg how can i achieve image with extension