How to know if the do_upload is already started and done?

Question

I'm using CodeIgniter, and I created a form where the user can upload a video. I wanted to create a progress bar to show the user its still uploading and hides it after the upload is done. What I wanted to do is when the submit button is click it will call my loading gif and i want it to keep loading until the upload is finished. How can i detect if the upload is finish?

CSS

<?php echo form_open_multipart('video_controller/video_form');?>

<div class="form-group">
        <label for="title">Video</label>
        <input type="file" accept=".mp4" class="form-control" name="video_field" placeholder="Video"></input>
</div>

<button class="btn btn-success pull-right" type="submit" value="upload" id="btn-submit">Create</button> 

 <?php echo form_close();?>

CodeIgniter

public function video_form(){
   if (empty($_FILES['video_field']['name'])){
        $this->form_validation->set_rules('video_file', 'Video File', 'required');
    }

   if($this->form_validation->run() == FALSE){
    .....
   }else{
      $uploaderror = "";
      $video_info = $this->upload_videos();

     ..... 
     Insert query code here 
     .....
   }
}
private function upload_videos(){

    $config = array();
    $config['upload_path']          = './uploads/videos/';
    $config['allowed_types']        = 'mp4';

    $this->load->library('upload', $config);
    $this->upload->initialize($config);

    if ( ! $this->upload->do_upload('video_field'))
    {
        $error_msg = $this->upload->display_errors('','');
        error_log('UPLOAD ERROR: '.$error_msg);
        if($error_msg!='You did not select a file to upload.'){
            $filename = array('error' =>$error_msg.'('. $this->input->post('video_field') .')');
        }
    }
    else
    {
        $vid = $this->upload->data();
        $filename = array('video_field' =>$vid['file_name']);
    }

    return $filename;
}

Answer 1

You can use change event, XMLHttpRequest.upload.progress event

html

<input type="file" /><progress min="0" max="0" value="0"></progress>

javascript

var progress = $("progress");
$(":file").change(function(e) {
  var file = e.target.files[0];
  progress.val(0);
  var request = new XMLHttpRequest();
  if (request.upload) {
    request.upload.onprogress = function(event) {
      if (progress.val() == 0) {
        progress.attr("max", event.total)
      }
      if (event.lengthComputable) {
        // show `.gif` or update `progress` value here
        // if `event.loaded` === `event.total` 
        // set `.gif` `display` to `none`
        console.log(event.loaded, event.total);
        progress.val(event.loaded)
      }
    }
    request.onload = function() {
      // do stuff with response
    }
  };
  request.open("POST", "/path/to/server/");
  request.send(file)
});

jsfiddle https://jsfiddle.net/576wrxLg/

Answer 2

i did the same in my codeigniter project with this code in JS.. i am 100% sure this will work for you. :)

$('#importForm').submit(function(e) {

    var formData = new FormData(this);

    $.ajax({
        type:'POST',
        url: base_url + "student/importAjax",
        data:formData,
        xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progress, false);
                }
                return myXhr;
        },
        cache:false,
        contentType: false,
        processData: false,
        dataType : "json",
        success:function(data){
            //console.log(data);
            }
    });

    e.preventDefault();

});


function progress(e){

    if(e.lengthComputable){
        var max = e.total;
        var current = e.loaded;

        var Percentage = (current * 100)/max;
        console.log(Percentage);
        $('#progress-bar').css('width',Percentage+'%');
        $('.sr-only').html(Percentage+'%');
        if(Percentage >= 100)
        {
           // process completed  
        }
    }  
 }

and this is my view (Bootstrap theme)

 <form name="importForm" id="importForm" enctype="multipart/form-data"> 
                <?php //echo form_open_multipart('admin/upload/do_upload'); ?>


                <div class="box-body">
                    <div class="form-group">
                        <label for="exampleInputFile">Select File</label>
                        <input type="file" id="importInputFile" name="importInputFile" />
                        <p class="help-block">.xls / xlsx </p>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" name="mid_term" class="check"><label style="margin-left: 10px;"> Mid Term User</label>
                    </div>

                    <div class="progress progress-sm active">
                        <div style="width:0%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" id="progress-bar" class="progress-bar progress-bar-success progress-bar-striped">
                            <span class="sr-only"></span>
                        </div>
                    </div>



                    <div class="box-footer">
                        <button class="btn btn-primary" id="ajaxImportUpload" type="submit">Submit</button>
                    </div>
                </div>
            </form>

my Controller

public function importAjax() {

        $upload_path = './uploads/';
        $newname = rand(0000, 9999) . basename($_FILES["importInputFile"]["name"]);
        $target_file = $upload_path . $newname;

        $filename = $newname;
        $filenameArray = explode(".", $filename);
        $extension = end($filenameArray);
        if ($extension == 'xlsx' || $extension == 'xls') {
            if (move_uploaded_file($_FILES["importInputFile"]["tmp_name"], $target_file)) {
                // echo "The file ".$newname . " has been uploaded.";
            } else {
                //echo "Sorry, there was an error uploading your file.";
            }
            $this->load->library('Excel');
            $csvData = $this->excel->parseFile($target_file, false);
            $fileType = 'Excel';
        } else {
            echo json_encode(array('error' => true, 'msg' => 'xlsx and xls are allowed extnsion'));
            return false;
        }
        array_shift($csvData);
        $user = array();

        if (isset($_POST['mid_term']) && $_POST['mid_term'] == 'on') {
            $mid_term = 1;
        } else {
            $mid_term = 0;
        }

        $insertedCount=0;
        $totalCount=0;
        foreach ($csvData as $studentData) {
            $totalCount++;
            $id = $this->StudentModel->checkImportSchool($studentData[2]);
            $cid = $this->StudentModel->checkImportclass($studentData[7]);
            $sid = $this->StudentModel->checkImportStudentUsername($studentData[0]);

            if ($id > 0 && $sid=="notFound") {
                $fullname = explode(" ", $studentData[1]);
                if (isset($fullname[1]) == '')
                    $middlename = '';
                else
                    $middlename = $fullname[1];
                if (isset($fullname[2]) == '')
                    $lastname = '';
                else
                    $lastname = $fullname[2];

                $user['username'] = $studentData[0];
                $user['firstname'] = $fullname[0];
                $user['middlename'] = $middlename;
                $user['lastname'] = $lastname;
                $user['phone'] = $studentData[3];
                $user['email'] = $studentData[4];

                $password_salt = substr(sha1(uniqid(rand(), true)), 1, 20);
                $password = md5($studentData[5] . $password_salt);
                $parentPassword = md5($studentData[6] . $password_salt);

                $user['password'] = $password;
                $user['parentPassword'] = $parentPassword;
                $user['password_salt'] = $password_salt;
                $user['mid_term'] = $mid_term;
                $user['userType'] = 'student';
                $school = $id;
                $class = $cid;
                $this->StudentModel->importFromExcel($user, $class, $school);
                $insertedCount++;
            }
            else {
                    $skipData[]=$studentData;
            }
        }

        unlink($target_file);
        if(!empty($skipData)){
            $this->session->set_userdata(array('item'=>$skipData));    
        }
        else{
            $skipData=array();
        }
        $skipDataCount=count($skipData);
        echo json_encode(array('error' => false, 'msg' => 'Data Inserted Successfully','skipData'=>$skipData,'insertedCount'=>$insertedCount,'skipDataCount'=>$skipDataCount,'totalCount'=>$totalCount));
    }