<div class="ossn-videos-add-button">
  <input type="file" name="ossnvideo[]" multiple class="hidden" id="add" accept="video/mp4" />
  <input type="hidden" id="mytext" name="mytext">
  <button type="button" id="ossn-videos-add-button-inner" class="btn btn-default"><i class="fa fa-copy"></i> <?php echo ossn_print('video:select'); ?></button>
  <div class="images"><i class="fa fa-video"></i> <span class="count">0</span></div>
</div>

<input type="submit" class="ossn-hidden" id="ossn-videos-submit" />

<img id="thumbnail" />
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    0%
  </div>
</div>

<script>
  var input = document.getElementById('add');
  var submitButton = document.getElementById('ossn-videos-submit');
  var img = document.getElementById('thumbnail');
  var progressBar = document.querySelector('.progress-bar');

  input.addEventListener('change', function (event) {
    var file = this.files[0];
    var url = URL.createObjectURL(file);

    if (file.type === 'video/mp4') {
      createThumbnail(url, img, file);
    } else {
      // Unsupported file type
      img.src = '';
      progressBar.style.width = '0%';
      progressBar.setAttribute('aria-valuenow', '0');
      progressBar.textContent = '0%';
    }
  });

  submitButton.addEventListener('click', function () {
    // Create a new FormData object
    var formData = new FormData();
    formData.append('ossnvideo[]', input.files[0]);
    formData.append('thumbnail', img.src); // Add the thumbnail to the form data

    // Create a new XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Set up the progress event listener
    xhr.upload.addEventListener('progress', function (event) {
      if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        progressBar.style.width = percentComplete + '%';
        progressBar.setAttribute('aria-valuenow', Math.round(percentComplete));
        progressBar.textContent = Math.round(percentComplete) + '%';
      }
    });

    // Set up the load event listener
    xhr.addEventListener('load', function () {
      if (xhr.status === 200) {
        console.log('File uploaded successfully');
      } else {
        console.error('Error uploading file');
      }
    });

    // Open the request and send the form data
    xhr.open('POST', 'your-upload-script.php', true);
    xhr.send(formData);
  });

  function createThumbnail(videoUrl, targetImg, file) {
    var video = document.createElement('video');
    video.preload = 'metadata';
    video.src = videoUrl;

    video.addEventListener('loadedmetadata', function () {
      var canvas = document.createElement('canvas');
      canvas.width = 150;
      canvas.height = 280;
      var context = canvas.getContext('2d');

      // Set the video's current time to the middle of the video
      video.currentTime = video.duration / 2;

      video.addEventListener('canplaythrough', function () {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        targetImg.src = canvas.toDataURL('image/png', 0.8);
        document.getElementById("mytext").value = targetImg.src;
      });
    });
  }
</script>

Why is it asking for progress from the script that will apply it works fine on chrome and no progress is visible on firefox <pre><nowiki><div class="ossn-videos-add-button"> <input type="file" name="ossnvideo[]" multiple class="hidden" id="add" accept="video/mp4" /> <input type="hidden" id="mytext" name="mytext"> <button type="button" id="ossn-videos-add-button-inner" class="btn btn-default"><i class="fa fa-copy"></i> <?php echo ossn_print('video:select'); ?></button> <div class="images"><i class="fa fa-video"></i> <span class="count">0</span></div> </div> <input type="submit" class="ossn-hidden" id="ossn-videos-submit" /> <img id="thumbnail" /> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 0% </div> </div> <script> var input = document.getElementById('add'); var submitButton = document.getElementById('ossn-videos-submit'); var img = document.getElementById('thumbnail'); var progressBar = document.querySelector('.progress-bar'); input.addEventListener('change', function (event) { var file = this.files[0]; var url = URL.createObjectURL(file); if (file.type === 'video/mp4') { createThumbnail(url, img, file); } else { // Unsupported file type img.src = ''; progressBar.style.width = '0%'; progressBar.setAttribute('aria-valuenow', '0'); progressBar.textContent = '0%'; } }); submitButton.addEventListener('click', function () { // Create a new FormData object var formData = new FormData(); formData.append('ossnvideo[]', input.files[0]); formData.append('thumbnail', img.src); // Add the thumbnail to the form data // Create a new XMLHttpRequest object var xhr = new XMLHttpRequest(); // Set up the progress event listener xhr.upload.addEventListener('progress', function (event) { if (event.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; progressBar.style.width = percentComplete + '%'; progressBar.setAttribute('aria-valuenow', Math.round(percentComplete)); progressBar.textContent = Math.round(percentComplete) + '%'; } }); // Set up the load event listener xhr.addEventListener('load', function () { if (xhr.status === 200) { console.log('File uploaded successfully'); } else { console.error('Error uploading file'); } }); // Open the request and send the form data xhr.open('POST', 'your-upload-script.php', true); xhr.send(formData); }); function createThumbnail(videoUrl, targetImg, file) { var video = document.createElement('video'); video.preload = 'metadata'; video.src = videoUrl; video.addEventListener('loadedmetadata', function () { var canvas = document.createElement('canvas'); canvas.width = 150; canvas.height = 280; var context = canvas.getContext('2d'); // Set the video's current time to the middle of the video video.currentTime = video.duration / 2; video.addEventListener('canplaythrough', function () { context.drawImage(video, 0, 0, canvas.width, canvas.height); targetImg.src = canvas.toDataURL('image/png', 0.8); document.getElementById("mytext").value = targetImg.src; }); }); } </script></nowiki></pre>