How to make sure the file input is video not anything else in Ajax

Question

I want to make sure the user is uploading video no anything else using ajax I using django in backend and I validated this step in Django but I wanna also valid the FileInput is video not anything else, and if this file not video then show alert in error, this javascript include uploading files with progress bar

my javascript code

  const file_input_label = document.getElementById('file_input_label')

function input_filename(){
  file_input_label.innerHTML = input.files[0].name;

}


 const uploadForm = document.getElementById('upload-form')
 const input = document.getElementById('formGroupExampleInput2')
 console.log(input)

 const alertBox = document.getElementById('alert-box')
 const imageBox = document.getElementById('image-box')
 const progressBox = document.getElementById('progress-box')
 const canceleBox = document.getElementById('cancel-box')
 const canceleBtn = document.getElementById('cancel-btn')

    

 const csrf = document.getElementsByName('csrfmiddlewaretoken')

 // whenever choose th file something happen
 input.addEventListener('change', ()=>{
     progressBox.classList.remove('d-none')
     canceleBox.classList.remove('d-none')

     const img_data = input.files[0]
     const url = URL.createObjectURL(img_data)
     console.log(img_data)

     const fd = new FormData()
     fd.append('csrfmiddlewaretoken', csrf[0].value)
     fd.append('video', img_data)

     $.ajax({
        type: 'POST',
        url: uploadForm.action,
        enctype: 'multipart/form-data',
        data: fd,
        beforeSend: function() {
            console.log('before')
            alertBox.innerHTML = ""
           // imageBox.innerHTML = ""
       },
        xhr: function() {
           const xhr = new window.XMLHttpRequest();
           xhr.upload.addEventListener('progress', e=>{
             // console.log(e)
             if (e.lengthComputable){
               const percent = e.loaded / e.total * 100
               console.log(percent);
               progressBox.innerHTML =
                                       `<div class="progress">
                                           <div class="progress-bar" role="progressbar" style="width: ${percent}%" aria-valuenow=" ${percent}" aria-valuemin="0" aria-valuemax="100"></div>
                                         </div>
                                         <p>${percent.toFixed(1)}%</p>`
             }
           })
           canceleBtn.addEventListener('click', ()=>{
             xhr.abort()
             setTimeout(()=>{
                 uploadForm.reset()
                 progressBox.innerHTML = ""
                 alertBox.innerHTML = ""
                 canceleBox.classList.add('d-none')
             }, 1000)
           })
           return xhr
       },
        success: function(response) {
           console.log(response)
           // imageBox.innerHTML = `<img src="${url}" width="300px">`

            // imageBox.innerHTML = `<video class="card" controls src="${url}">`
            alertBox.innerHTML = `<div class="alert alert-success" role="alert">Successfully uploaded your video. click upload to upload your video</div>`

        },
        error: function(error){
          console.log(error)
           alertBox.innerHTML = `<div class="alert alert-danger" role="alert">Ups something went wrong!</div>`
        },
        cache: false,
        contentType: false,
        processData: false,
     })
 })

Answer 1

input.addEventListener('change', () => { 
        var filePath = input.value; 
      
        // Allowing file type 
        var allowedTypes =  
                /(\.mp4|\.mkv|\.avi|\.flv)$/i; 
          
        if (!allowedTypes.exec(filePath)) { 
            alert('Invalid file type'); 
            input.value = ''; 
            return false; 
        }
})