title: How to make sure the file input is video not anything else in Ajax
body: <p>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 <code>FileInput</code> is video not anything else, and if this file not video then show alert in error, this javascript include uploading files with progress bar</p>
  <p>my javascript code</p>
  <pre><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', ()=&gt;{
       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 = &quot;&quot;
             // imageBox.innerHTML = &quot;&quot;
         },
          xhr: function() {
             const xhr = new window.XMLHttpRequest();
             xhr.upload.addEventListener('progress', e=&gt;{
               // console.log(e)
               if (e.lengthComputable){
                 const percent = e.loaded / e.total * 100
                 console.log(percent);
                 progressBox.innerHTML =
                                         `&lt;div class=&quot;progress&quot;&gt;
                                             &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: ${percent}%&quot; aria-valuenow=&quot; ${percent}&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
                                           &lt;/div&gt;
                                           &lt;p&gt;${percent.toFixed(1)}%&lt;/p&gt;`
               }
             })
             canceleBtn.addEventListener('click', ()=&gt;{
               xhr.abort()
               setTimeout(()=&gt;{
                   uploadForm.reset()
                   progressBox.innerHTML = &quot;&quot;
                   alertBox.innerHTML = &quot;&quot;
                   canceleBox.classList.add('d-none')
               }, 1000)
             })
             return xhr
         },
          success: function(response) {
             console.log(response)
             // imageBox.innerHTML = `&lt;img src=&quot;${url}&quot; width=&quot;300px&quot;&gt;`
  
              // imageBox.innerHTML = `&lt;video class=&quot;card&quot; controls src=&quot;${url}&quot;&gt;`
              alertBox.innerHTML = `&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;Successfully uploaded your video. click upload to upload your video&lt;/div&gt;`
  
          },
          error: function(error){
            console.log(error)
             alertBox.innerHTML = `&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;Ups something went wrong!&lt;/div&gt;`
          },
          cache: false,
          contentType: false,
          processData: false,
       })
   })
  </code></pre>