Upload image without form action using dropzone in codeigniter - codeigniter

Question

Upload image without form action using dropzone in CodeIgniter. I need to upload an image without the form action in dropzone. that means, there are one form, dropzone image and other fields are in the form. First when we selecting an image, automatically upload the image and save in the database. And add other fields then submit the form action.

Answer 1

you can Upload image using AJAX with button but a button must be under the form tag with id
View
<form action="<?php echo SURL; ?>admin/registered_students/" id="file_completion_form" class="form-horizontal" method="post" enctype="multipart/form-data">
<td>
<input type="file" data-validation="" style="display: inline" name="undertaking" id="undertaking" value="" placeholder="" multiple="">
</td>
<td>
<input type="hidden" id="student_id" name="student_id" value="<?=$student_id;?>">
<button type="button" class="btn btn-info chk2" id="upload_undertaking">
<i class="fa fa-upload"></i>
</button>
</td>
<td>
<span class="alert" style="display: none" id="msg">Updated</span>
</td>
<td id="download_undertaking">
<a href="<?php echo SURL.'file/download/'.$files[0]['undertaking'];?>">
<button type="button" class="btn btn-info chk2" id=""><i class="fa fa-download"></i></button>
</a>
</td>
</form>
JS
$('#upload_undertaking').click(function(e)
{
e.preventDefault();
var data = new FormData();
var form_data = $('#file_completion_form').serializeArray();
$.each(form_data, function (key, input)
{
data.append(input.name, input.value);
});
//input quatation
var quotation_wip = $('input[name="undertaking"]')[0].files;
if(quotation_wip.length>0)
{
for (var i = 0; i < quotation_wip.length; i++)
{
data.append("undertaking[]", quotation_wip[i]);
}
}
else
{
return 0;
exit;
}
data.append('key', 'value');
var student_id = $('#student_id').val();
$.ajax(
{
url:URL+'file_completion/'+student_id,
type:'POST',
data:data,
cache:false,
contentType: false,
processData: false,
success:function(data)
{
if(data==2)
{
window.location.href=URL+'index/'+student_id;
}
else
{
var obj = jQuery.parseJSON(data);
// alert( obj.undertaking );
$("#undertaking span").html(obj.undertaking);
$("#download_undertaking").html('<button type="button" class="btn btn-info chk2" id=""><i class="fa fa-upload"></i></button>');
$("#msg").show();
setTimeout(function()
{
$("#msg").hide();
},
10000);
}
}
});
});
Controller
public function file_completion1($student_id='',$document_name='')
{
// if($this->input->post('student_id'))
// {
// echo $this->input->post($student_id);
// echo($student_id).'-';
// echo($document_name);
// exit();
$filename=array();
if(count($_FILES['copy_of_paid_fee_challan']['name']) > 0 && $_FILES['copy_of_paid_fee_challan']['name'] !='')
{
$files = $_FILES['copy_of_paid_fee_challan'];
$count = count($_FILES['copy_of_paid_fee_challan']['name']);
//echo $_FILES['file']['name'];exit();
for($i=0; $i<$count;$i++)
{
$config = array();
$projects_folder_path = './assets/uploads/';
$thumb = $projects_folder_path . 'thumb';
$_FILES['copy_of_paid_fee_challan']['name'] = $files['name'][$i];
$_FILES['copy_of_paid_fee_challan']['type'] = $files['type'][$i];
$_FILES['copy_of_paid_fee_challan']['tmp_name'] = $files['tmp_name'][$i];
$_FILES['copy_of_paid_fee_challan']['error'] = $files['error'][$i];
$_FILES['copy_of_paid_fee_challan']['size'] = $files['size'][$i];
// $file_ext = ltrim(strtolower(strrchr($_FILES['copy_of_paid_fee_challan']['name'],'.')),'.');
// $file_name = 'oppein-'.date('YmdGis').'.'.$file_ext;
$config['upload_path'] = $projects_folder_path;
$config['allowed_types'] = '*';
$config['encrypt_name'] = TRUE;
$config['overwrite'] = TRUE;
$config['file_name'] = $_FILES['copy_of_paid_fee_challan']['name'];
$this->load->library('upload', $config);
$this->upload->initialize($config);
if(!$this->upload->do_upload('copy_of_paid_fee_challan'))
{
$error_file_arr = array('error' => $this->upload->display_errors());
$this->session->set_flashdata('err_message', $error_file_arr['error']);
$r=2;
echo json_encode($r);
exit();
}
else
{
$data['delete_record'] = $this->Common_model->select_single_records('uploads',$where=array('student_id'=>$student_id));
if(file_exists($projects_folder_path.$data['delete_record']['undertaking']))
{
unlink($projects_folder_path.$data['delete_record']['undertaking']);
}
$data_image_upload = array('upload_image_data' => $this->upload->data());
$image_name =$data_image_upload['upload_image_data']['file_name'];
$full_path = $data_image_upload['upload_image_data']['full_path'];
// ------------------------------------------------------------------------
$this->load->library('image_lib');
$config['image_library'] = 'GD2';
$config['source_image'] = './assets/uploads/' . $image_name;
$config['maintain_ratio'] = TRUE;
$config['master_dim'] = 'auto';
$config['quality'] = 70;
$config['width'] = 1024;
$config['height'] = 768;
$config['new_image'] = './assets/uploads/' . $image_name;
$this->image_lib->initialize($config);
$this->image_lib->resize();
// ------------------------------------------------------------------------
}
$filename[] = $image_name;
} // end for loop
}
foreach ($filename as $key => $value)
{
$insert_image=array(
'copy_of_paid_fee_challan'=> $value,
// 'student_id' => $student_id,
// 'stage_id' => $stage_id,
'update_date' => date("Y-m-d g:i:s"),
// 'category_status' => 1,
// 'user_id' =>$this->session->userdata('user_id'),
);
// echo "<pre>";
// print_r ($insert_image);
// echo "</pre>";
// exit();
$add_image = $this->Common_model->update_table('uploads',$where=array('student_id'=>$student_id),$insert_image);
}
if ($add_image)
{
$record = $this->Common_model->select_single_records('uploads',$where=array('student_id'=>$student_id));
echo json_encode($record);
}
// }
// else
// {
// $data['active']='registered_students';
// $this->load->view('admin/header',$data);
// $data['student_id']=$student_id;
// $data['error']='';
// $this->load->view('registration/file_completion',$data);
// $this->load->view('admin/footer',$data);
// }
}