0

<div class="image-preview" id="imagePreview">
            <img src="" class="image-preview__image">
          </div>

          <div class="image-preview" id="videoPreview">
            <video controls autoplay muted class="video-preview__image" id="video" src=""></video>
          </div>

        <br>
        <label for="inpFile"><img id="image_icon" src="http://localhost/mybook/images/images_icon.png"></label>
        <input id="inpFile" type="file" name="file" style="display:none;" >
        <input id="post_button" type="submit" value="Post" style="margin:5px;">

I want to show a preview of uploaded video file before submit. I have successfully done this with an image thanks to the following JS, but it is not working with video files...

const inpFile = document.getElementById("inpFile");
  const previewContainer = document.getElementById("imagePreview");
  const originalImage = document.getElementById("originalImage");
  const previewImage = previewContainer.querySelector(".image-preview__image");

  inpFile.addEventListener("change", function() {
    const file = this.files[0];

    if (file) {
      const reader = new FileReader();

      previewContainer.style.display = "block";
      previewImage.style.display = "block";
      originalImage.style.display = "none";

      reader.addEventListener("load", function() {
        previewImage.setAttribute("src", this.result);
      });

      reader.readAsDataURL(file);
    }else{
      previewImage.style.display = null;
      previewImage.setAttribute("src","");
    }
  });
rustyrice23
  • 9
  • 1
  • 3
  • `"message": "Uncaught TypeError: Cannot read property 'querySelector' of null",` That error seems to be triggered by the `const previewImage = previewContainer.querySelector(".image-preview__image");`, which means `previewContainer` is null. There doesn't seem to be an element with `imagePreview` id in your HTML. – José A. Zapata Aug 01 '21 at 03:02
  • This answer should solve your issue [Generate a thumbnail/snapshot of a video file selected by a file input at a specific time](https://stackoverflow.com/a/36883038/4828524) – Alen.Toma Aug 01 '21 at 14:08

1 Answers1

0

Answer from nikoss may help you.

Image uses img and video uses video.

idfurw
  • 5,727
  • 2
  • 5
  • 18