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';
}
    }

Ricky · Accepted Answer · 2015-10-22 10:16:58Z

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);
            }
        }
}

edited Oct 22, 2015 at 10:16

answered Oct 22, 2015 at 10:02

Ricky

5683 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3653474 Over a year ago

Thanks Ricky for ur answer. I want to clear one more thing in the code above i have used XMLHttpRequest where in this code we will return the response from the controller. I am using this code but it is not working xhr.onreadystatechange=function() { if (xhr.readyState==4 && xhr.status==200) { document.getElementById("nameTest").value=xhr.responseText; } }

user3653474 Over a year ago

i have updated my code, i want to return these 0 and 1 to the xmlhttprequest function, how we can do it.

Ricky Over a year ago

write this code inside your function upload_video_Data(a) and update the ID of your input file if the validation fail add return false in place of alert('invalid extension!');

user3653474 Over a year ago

will i get 1 or 0 response from controller in xhr.responseText;

user3653474 Over a year ago

i am getting blank value in ext variable.

|

Collectives™ on Stack Overflow

How can i validate file type using ajax in codeigniter

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related