check if file is image or video with JS or JQUERY?

Question

Good night! I’m doing an image/video preview before the user posts it, I’m wanting to do it with a single input and would let JS check the file and return the extension so I can display the desired preview... I did this with the image and it worked, but when I upload a video instead of the image, the image preview (without any image) and the video preview with it running.

<!-- Div de preview da imagem -->
<div class="imagem_prepost">
    <a class="excluir-foto_prepost" id="excluir-foto_prepost"><i class="fas fa-times"></i></a>
    
    <!-- preview da img -->
    <img class="img_preview" alt="">
    
    <!-- preview video -->
    <video class="vid_preview" autoplay muted loop></video>
</div>

<!-- input que receberá video ou imagem -->
<input name="arquivo" accept="video/mp4" id="input_preview" type="file"  />

<script>
    $(function(){
        
        $('#input_preview').change(function(){
            const file = $(this)[0].files[0]

            const fileReader = new FileReader()

            // Se algum arquivo foi passado
            if (file) {
                $('.img_preview').show();
                $('#excluir-foto_prepost').show();
                
           //Excluindo a foto caso não queira postar
                fileReader.readAsDataURL(file);
                $("#excluir-foto_prepost").click(function(){
                    $('.img_preview').hide(); 
                    $('#excluir-foto_prepost').hide();
                    $('#input_preview').val(null);
                    });
            }
            // Se não foi passado nenhum arquivo
            else if(!file){
                $('.img_preview').hide();
                $('#excluir-foto_prepost').hide();
            }

            fileReader.onloadend = function(){
                $('.img_preview').attr('src',fileReader.result);
            }
        })
      })
</script>

Answer 1

Good evening friend, I had a similar problem and this solution helped me:

https://www.aspdotnet-suresh.com/2012/12/jquery-validate-file-upload-extension.html

I adapted to your need below basically checks the array of image extensions and other video, okay? I hope I helped

$("#FilUploader").change(function () {
   // imagens
   var fileExtension_img = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
   //videos         
   var fileExtension_vid = ['mp4', 'mpeg', 'wmv'];

   if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension_img) > 0) {
alert("É imagem : "+fileExtension_img.join(', '));
   }

   if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension_vid) > 0) {
alert("É Vídeo : "+fileExtension_vid.join(', '));
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="FilUploader" />