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>

I did look at w3schools.com/jsref/jsref_if.asp, but I couldn't make it work in my own program. — Brian
– Brian, Commented Mar 4, 2020 at 21:26
How are you selecting between img and video like a radio button etc — CognitiveDesire
– CognitiveDesire, Commented Mar 4, 2020 at 23:19
No, when I click the image preview icon, there is a choice between uploading a picture or a video. Just similar to FaceBook. The problem is when I select either video or picture, the other tag is displayed along side of it. — Brian
– Brian, Commented Mar 4, 2020 at 23:47

Junius L · Accepted Answer · 2020-03-08 08:58:05Z

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">

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related