Upload 3 images from different input type file in codeigniter using ajaxFileUpload.js

Question

I need to upload a three images from different input type file along with text field in single submit button function, here i upload my code, this code is working when i upload only one input type file, but i have some issues while upload a more than one input type file,

my view file

                    <form method="POST" action="" id="employees" enctype="multipart/form-data">                 
                    <div class="col-md-8">
                          <input type="text" class="form-control" name="e_blood" id="e_blood" value=""/>
                        </div>
                      </div>
                    </div>

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">ID Proof</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_idproof" id="e_idproof"/>
                        </div>
                      </div>
                    </div>  

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">Photo</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_photo" id="e_photo"/>
                        </div>
                      </div>
                    </div>

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">Pre-Employment proof</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_preemp" id="e_preemp"/>
                        </div>
                      </div>
                </form>
                <button type="submit" class="btn red" onclick="add_employee();" name="submit" data-dismiss="modal">Submit</button>
        </div>

My ajax code

$.ajaxFileUpload({
            url             :'<?php echo base_url(); ?>index.php?/employee_master_table/addemployee', 
            secureuri       :false,
            fileElementId   :'e_idproof',
            dataType        : 'json',
            data            : {                         'e_blood':$("#e_blood").val(),
                                'e_exp':$("#e_exp").val(),
                                'e_group':$("#e_group").val(),
                                },
            success : function (data, status)
            {
                alert(data.msg);
            }
        });

My Controller is

public function addemployee(){                  
        $this->load->helper('url');
        $status = "";
        $msg = "";
        $file_element_name = 'e_idproof';            
        if (empty($_POST['e_blood']))
        {
            $status = "error";
            $msg = "Please enter a e_blood";
        }            
        if ($status != "error")
        {   $config['upload_path'] = './assets/uploads/';
            $config['allowed_types'] = 'gif|jpg|png|doc|txt';
            $config['max_size'] = 1024 * 8;
            //$config['encrypt_name'] = TRUE;
            //$config['encrypt_name'] = false;
            $newname=$_POST['e_id']."_".$_POST['e_name'];
            $config['file_name'] = $newname;

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

            if (!$this->upload->do_upload($file_element_name))
            {
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
            else
            {
                $data = $this->upload->data();                  
                $this->load->database();        
                $this->load->model('kaspon_employee_table');
                $file_id = $this->kaspon_employee_table->addemployee($data['file_name'],$_POST['e_blood'], $_POST['e_exp'], $_POST['e_group']);                 
                if($file_id)
                {
                    $status = "success";
                    $msg = "File successfully uploaded";
                }
                else
                {
                    unlink($data['full_path']);
                    $status = "error";
                    $msg = "Something went wrong when saving the file, please try again.";
                }
            }
            @unlink($_FILES[$file_element_name]);   
            }               
        }
        echo json_encode(array('status' => $status, 'msg' => $msg));

My model is

public function addemployee($filename,$e_id,$e_name,$r_man,
    $dateofbirth,$doj,$e_qual,$e_address,$e_paddress,$e_email,
    $e_mobile,$e_e_con,$e_blood,$e_exp,$e_group){   
        $data=array(    
            'photo'      => $filename,
            'bloodgrp'=>$e_blood,
            'experience'=>$e_exp,
            'division'=>$e_group,
        );
        $this->db->insert('employeemanager', $data);
        return $this->db->insert_id();
    }

score 0 · Answer 1 · answered Oct 06 '16 at 13:15

ajaxFileUpload does not support uploading multiple files at once. You have two options:

Use a different uploading plugin, such as - http://hayageek.com/docs/jquery-upload-file.php

Call your ajaxFileUpload code three times:

function upload_file (file_input_id, callback) {
    $.ajaxFileUpload({
        url : '<?php echo base_url(); ?>index.php?/employee_master_table/addemployee', 
        secureuri: false,
        fileElementId: file_input_id,
        dataType: 'json',
        data: {
            'e_blood':$("#e_blood").val(),
            'e_exp':$("#e_exp").val(),
            'e_group':$("#e_group").val(),
        },
        success: function (data, status) {
            callback()
        }
    })
}

upload_file('e_idproof')
upload_file('e_photo')
upload_file('e_preemp')

If you want to know when all three files are uploaded you can use async, promises or just go simple with callbacks:

upload_file('e_idproof', function () {
    upload_file('e_photo', function () {
        upload_file('e_preemp', function () {
            console.log('all three files uploaded')
        })
    })
})

Upload 3 images from different input type file in codeigniter using ajaxFileUpload.js

1 Answers1