Resize Image from Client-side for multiple HTML input

I find this helpful article for resizing images before uploading them to the server. I want to use it for some repetitive HTML input but I’m having a problem altering the javascript code since I’m not really good in javascript.

This is what I’ve tried so far. But as can see, I didn’t get the value for that imagefiles

function fileChange(e) { 

    for (var i = 1; i <= e.target.files.length; i++) { 
      document.getElementsByClassName('inp_img[i]').value = '';
      var file = e.target.files[i-1];
      alert(file);
      if (file.type == "image/jpeg" || file.type == "image/png") {

        var reader = new FileReader();  
        reader.onload = function(readerEvent) {

          var image = new Image();
          image.onload = function(imageEvent) { 

            var max_size = 800;
            var w = image.width;
            var h = image.height;

            if (w > h) {  if (w > max_size) { h*=max_size/w; w=max_size; }
          } else     {  if (h > max_size) { w*=max_size/h; h=max_size; } }

          var canvas = document.createElement('canvas');
          canvas.width = w;
          canvas.height = h;
          canvas.getContext('2d').drawImage(image, 0, 0, w, h);
          if (file.type == "image/jpeg") {
            var dataURL = canvas.toDataURL("image/jpeg", 1.0);
          } else {
            var dataURL = canvas.toDataURL("image/png");    
          }
          document.getElementsByClassName('inp_img[i]').value += dataURL + '|';
        }
        image.src = readerEvent.target.result;
      }
      reader.readAsDataURL(file);
    } else {
      document.getElementsByClassName('inp_files[i]').value = ''; 
      alert('Please only select images in JPG- or PNG-format.');   
      return false;
    }
  }

}

var imagefiles = document.getElementsByClassName('inp_files');
console.log(imagefiles);
for (var i=0; i<imagefiles.length; i++)
{
  alert(imagefiles[i].value);
  imagefiles[i].addEventListener('change',fileChange, false);
}

while ($row = mysql_fetch_array($result))
    { ?>
      <div class="w3-quarter">
        <div class="w3-card w3-container" style="min-height:150px">
          <header class="w3-container w3-blue w3-row-padding w3-center w3-margin-top">
           <label><b>Instruction <?php echo $counter; ?></b></label>
         </header><br>
         <b><?php echo $row['cf_941']; ?></b><br>
         <?php echo $row['productname']." (".number_format($row['cf_949'])."%) - ".$row['cf_953']." ".$row['cf_955']; ?><br>
         <?php echo "Area: ".$row['cf_951']." sm ";?>
         <hr>
         <label><b>Remarks</b></label><br>
          <?php echo $row['cf_945']; ?><br>
         <hr>
         <b>Attached Photo</b><br>
         <input class="inp_files[<?php echo $counter; ?>]" type="file">
         <!--<?php echo $row['instructionsid']?> -->
         <input class="inp_img[<?php echo $counter; ?>]" name="img[<?php echo $row['instructionsid']?>]" type="hidden" value="">
         <p><strong>Note:</strong> Only .jpg, .jpeg,png formats allowed <br><hr>
          <input class="w3-check" type="checkbox" name="itemStatus[<?php echo $row['instructionsid']?>]" 
          <?php if ($row['cf_947']=='1') {
            echo "checked";
          } ?> >
          <label> Work completed</label><br><br>
        </div>
      </div>
      <?php
      $counter++;
    }

    ?>

How can I alter this code to be able to resize the images from multiple input file and then send to PHP side?

Answer

That’s because you are mixing the name and class attributes when you create your HTML code. Instead of:

<input class="inp_files[<?php echo $counter; ?>]" type="file">

it should read …

<input class="inp_files" name="inp_files[<?php echo $counter; ?>]" type="file">

If you want to receive the proper instructionsid when you post the files back to the server, I would recommend to create a loop similar to this one:

<?php
while ($row = mysql_fetch_array($result)) {
?>
    ...
  <input class="inp_files" id="<?php echo $row['instructionsid']?>" name="inp_files[<?php echo $row['instructionsid']?>]" type="file">
  <input class="inp_img" name="inp_img[<?php echo $row['instructionsid']?>]" type="hidden" value="">
  <input class="w3-check" name="itemStatus[<?php echo $row['instructionsid']?>]" type="checkbox" <?php print ($row['cf_947']=='1') ? 'checked' : ''?>>
    ... 
<?php
}
?>

Your JS code will also need some rewrites as it contains several errors (i.e. document.getElementsByClassName('inp_img[i]').value = ''; searches for an element like <input class="inp_img[i]">, the i needs to be escaped properly).

function fileChange(e) { 

    for (let i = 0; i < e.target.files.length; i++) { 
      let self= this;
      self.field= e.target.id;
      let file = e.target.files[i];
      console.log(self.field, file);
      if (file.type == "image/jpeg" || file.type == "image/png") {

        let reader = new FileReader();  
        reader.onload = function(readerEvent) {

          let image = new Image();
          image.onload = function(imageEvent) { 

            let max_size = 800;
            let w = image.width;
            let h = image.height;

            if (w > h) {  if (w > max_size) { h*=max_size/w; w=max_size; }
          } else     {  if (h > max_size) { w*=max_size/h; h=max_size; } }

          let canvas = document.createElement('canvas');
          canvas.width = w;
          canvas.height = h;
          canvas.getContext('2d').drawImage(image, 0, 0, w, h);
          let dataURL = '';
          if (file.type == "image/jpeg") {
            dataURL = canvas.toDataURL("image/jpeg", 1.0);
          } else {
            dataURL = canvas.toDataURL("image/png");    
          }
          document.getElementsByName('inp_img[' + self.field + ']')[0].value += dataURL + '|';
        }
        image.src = readerEvent.target.result;
      }
      reader.readAsDataURL(file);
    } else {
      alert('Please only select images in JPG- or PNG-format.');   
      return false;
    }
  }
}

var imagefiles = document.getElementsByClassName('inp_files');
console.log(imagefiles);
for (var i=0; i<imagefiles.length; i++)
{
  imagefiles[i].addEventListener('change',fileChange, false);
}