Uploading image through PHP form

Question

For the project I am working on I am trying to get thumbnails generated when a video is uploaded. This is done by doing the following:

HTML Form:

    <form action='videoUpload.php' id="videoUpload" method='post' enctype="multipart/form-data">    

<input type='hidden' name='id' value='<?php echo $row['videoID'];?>'>
<p><label>Title</label><br />

<input type='text' name='videoTitle' required value='<?php if(isset($error)){ echo $_POST['videoTitle'];}?>'></p>

<p><label>Video</label><br />

<input type="file" name='video' id="video" class="video" required value='<?php if(isset($error)){ echo $_POST['video'];}?>'></p>

        <input type="hidden" id="thumbnail" name="thumbnail" src="" >

         <script src="thumbnail.js"></script>

<input type="hidden" name='videoDuration' id="videoDuration" required value='<?php if(isset($error)){ echo $_POST['videoDuration'];}?>'></p>

        <div id="duration" name="duration">Please choose a video</div>
          <script src="duration.js"></script>

<p><input type='submit' name='submit' id='submit' value='Submit'></p>

The JS file thumbnail.js is what I'm using to generate an image:

const thumbnail = document.querySelector('.video');
    thumbnail.addEventListener('change', function(event) {
for (let i= document.images.length; i-->0;)
    document.images[i].parentNode.removeChild(document.images[i]);
      let file = event.target.files[0];
      let fileReader = new FileReader();
      if (file.type.match('image')) {
        fileReader.onload = function() {
          let img = document.createElement('img');
          img.src = fileReader.result;
          document.getElementsByTagName('div')[0].appendChild(img);
        };
        fileReader.readAsDataURL(file);
      } else {
        fileReader.onload = function() {
          let blob = new Blob([fileReader.result], {type: file.type});
          let url = URL.createObjectURL(blob);
          let video = document.createElement('video');
          let timeupdate = function() {
            if (snapImage()) {
              video.removeEventListener('timeupdate', timeupdate);
              video.pause();
            }
          };
          video.addEventListener('loadeddata', function() {
            if (snapImage()) {
              video.removeEventListener('timeupdate', timeupdate);
            }
          });
          let snapImage = function() {
            let canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            let image = canvas.toDataURL();
            console.log(image);
            let success = image.length > 100000;
            if (success) {
              document.getElementById("thumbnail").src = image;
              URL.revokeObjectURL(url);
            }
            return success;
          };
          video.addEventListener('timeupdate', timeupdate);
          video.preload = 'metadata';
          video.src = url;
          // Load video in Safari / IE11
          video.muted = true;
          video.playsInline = true;
          video.play();
        };
        fileReader.readAsArrayBuffer(file);
      }
    });

I am then trying to upload the image through my form by doing:

$target_dir = "../thumbnails/";

$target_file = $target_dir . basename($_FILES["thumbnail"]["name"]);

$uploadOk = 1;

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

        if(isset($_POST["submit"])) {
    
    
        //collect form data
    
        extract($_POST);
    
    $check = getimagesize($_FILES["thumbnail"]["tmp_name"]);

    if($check !== false) {

        echo "File is an image - " . $check["mime"] . ".";

        $uploadOk = 1;

    } else {

        echo "File is not an image.";

        $uploadOk = 0;

    }

}

// Check if file already exists

if (file_exists($target_file)) {

    echo "Sorry, file already exists.";

    $uploadOk = 0;

}

// Check file size

if ($_FILES["thumbnail"]["size"] > 2000000) {

    echo "Sorry, your file is too large.";

    $uploadOk = 0;

}

// Allow certain file formats

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"

&& $imageFileType != "gif" ) {

    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";

    $uploadOk = 0;

}

// Check if $uploadOk is set to 0 by an error

if ($uploadOk == 0) {

    echo "Sorry, your file was not uploaded.";

// if everything is ok, try to upload file

} else {

    if (move_uploaded_file($_FILES["thumbnail"]["tmp_name"], $target_file)) {

        echo "The file ". basename( $_FILES["thumbnail"]["name"]). " has been uploaded.";

    } else {

        echo "Sorry, there was an error uploading your file.";

    }

(there is more to the file but it's unnecessary to the question).

Now what I'm getting is errors saying that 'thumbnail' is undefined and I'm not sure why? Not sure where it is I've gone wrong with this, it seems that the image isn't getting passed through the form for some reason? Any help would be greatly appreciated

Answer 1

This JS creates a canvas and copy the video frame to it, than push the image visible on the canvas to the element's src attribute. While it'll display an image in the browser, the input element will only send value attribute when sending the form.

See some other question with about the same conclusion: How to replace a file input's content by the result of canvas.toDataURL?