How can i validate file type using ajax in codeigniter

Question

I am working on Codeigniter, i am facing one problem i have to show the user error message when he is uploading any other file type to server using ajax. I do not want to load view again to show the error message. My code is as follows: Please help me to solve my problem.'

View:

function upload_video_Data(a)
{ 

        var fd = new FormData(document.getElementById('posting_comment_'+a));
        fd.append("file_m_id",a);
        var bar = $('.bar');
        var xhr = new XMLHttpRequest();        
        xhr.upload.addEventListener("progress", uploadProgress, false);

     xhr.onreadystatechange=function() {
       if (xhr.readyState==4 && xhr.status==200) {
        document.getElementById("nameTest").value=xhr.responseText;
        }
      }   
        xhr.open("POST", "Dashboard/do_upload_video");
        xhr.send(fd);

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            $("#status").animate( { width: percentComplete.toString()+"%"}, 5);
            }
        }
}

Controller:

public function do_upload_video()
    {  
      $lecture_id=$_POST['file_m_id'];
      $output_dir = "./uploads/";
      $fileName = $_FILES["save_movie_".$lecture_id]["name"];

if(!move_uploaded_file($_FILES["save_movie_".$lecture_id]["tmp_name"],$output_dir.$fileName))
{
echo '0';
}
else
{
echo '1';
}
    }

Answer 1

Use this code before your ajax to validate the extension of file

var ext = $('#my_file_id').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
        alert('invalid extension!');
    }

Now your code look like this

function upload_video_Data(a)
{ 

   var ext = $('#my_file_id').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    return false;
}


        var fd = new FormData(document.getElementById('posting_comment_'+a));
        fd.append("file_m_id",a);
        var bar = $('.bar');
        var xhr = new XMLHttpRequest();        
        xhr.upload.addEventListener("progress", uploadProgress, false);

     xhr.onreadystatechange=function() {
       if (xhr.readyState==4 && xhr.status==200) {
        document.getElementById("nameTest").value=xhr.responseText;
        }
      }   
        xhr.open("POST", "Dashboard/do_upload_video");
        xhr.send(fd);

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            $("#status").animate( { width: percentComplete.toString()+"%"}, 5);
            }
        }
}