How can I create a JavaScript condition to display either image preview of a video or image preview of a picture?

Question

On image preview, when I select a video, an empty image box is displayed on the right side of the video image preview. And when I select a picture, an empty space is displayed on the left side of the picture image preview. So both <video> tag and <img> tag are displayed together.

Here is the code of the relevant HTML part, which is inside a form tag:

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 
    <video class="image_Preview"></video>
    <img class="image_Preview">
  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;">

</form>

Here is the relevant jQuery part:

$(document).on('click change', '.file, .submit', function() {

if ($(this).is('.file')) {
     $(this).closest('.input-group').find('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]))
      .css({"width":"250px","height":"150px"});

I want either <video> tag or <img> tag to be displayed, but not both.

Here I created the following code. First, I take the file extension from input tag to see whether it is jpg or mp4. If the file extension is jpg it goes to if condition, and if it is mp4 it goes to else condition. The problem is that I cannot make var ext global. It is local no matter how much I try to make it global.

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 

<script>
  function getFile(filePath) {
    return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];    
}

var ext;

function getoutput() {
  outputfile.value = getFile(image_name.value);
  ext = extension.value = image_name.value.split('.')[1];
  console.log(ext);
}

getoutput();
console.log(ext);   

if (ext == 'jpg') {
  document.write('<img class="image_Preview">');
  document.write('<h1>It worked for jpg!</h1>');

} else if (ext == 'mp4') {
  document.write('<video class="image_Preview"></video>');
  document.write('<h1>It worked for mp4!</h1>');
}
</script>

  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;"  onChange='getoutput()'> <br>
      Output Filename <input id='outputfile' type='text' name='outputfile'><br>
      Extension <input id='extension' type='text' name='extension'>

</form>

Answer 1

Give the img and video different classes, and hide and show image/video based on the file type/extension.

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 
  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;">

</form>

<video style="display: none;" class="video_Preview" controls></video>
<img style="display: none;" class="image_Preview">

Jquery

$('#image_name').on('change', function(event) {

  if (
    !event ||
    !event.target ||
    !event.target.files ||
    event.target.files.length === 0
  ) {
    return;
  }

  const fileUrl = window.URL.createObjectURL(event.target.files[0]);
  const imgExtensions = ['jpg', 'png'];
  const videoExtensions = ['mkv', 'mp4', 'webm'];
  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const ext = name.substring(lastDot + 1);

  if (imgExtensions.includes(ext)) {
    $(".video_Preview").hide(); // hide video preview
    $(".image_Preview").show().attr("src", fileUrl);
  } else if (videoExtensions.includes(ext)) {
    $(".image_Preview").hide(); // hide image preview
    $(".video_Preview").show().attr("src", fileUrl);
  }
});

 $('#image_name').on('change', function(event) { if ( !event || !event.target || !event.target.files || event.target.files.length === 0 ) { return; } const fileUrl = window.URL.createObjectURL(event.target.files[0]); const imgExtensions = ['jpg', 'png']; const videoExtensions = ['mkv', 'mp4', 'webm']; const name = event.target.files[0].name; const lastDot = name.lastIndexOf('.'); const ext = name.substring(lastDot + 1); if (imgExtensions.includes(ext)) { $(".video_Preview").hide(); // hide video preview $(".image_Preview").show().attr("src", fileUrl); } else if (videoExtensions.includes(ext)) { $(".image_Preview").hide(); // hide image preview $(".video_Preview").show().attr("src", fileUrl); } });

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="post" enctype="multipart/form-data"> <label class="input-group-prepend" for="image_name"> <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> </label> <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;"> </form> <video style="display: none;" class="video_Preview" controls></video> <img style="display: none;" class="image_Preview">