Can't upload image using ajax in codeigniter - php

Question

I'm trying to upload an image to server but every time i get an error that "you did not select a file to upload"
I have created a form in my View where user details are asked and if candidate option is selected so user would be asked to select an image.
When I'm uploading an image and using jQuery to get a file path i'm getting "C://fakepath/filename.png" but for that also i also configured many things which worked and only return the file name.
I have already created a directory in root folder named upload but still i can't upload any image neither in upload folder nor on server.
View.php
<form method="POST" id="userForm" enctype="multipart/form-data">
<div class="form-row">
<div class="form-group col-sm-12 col-md-6">
<label>First Name *</label>
<input type="text" name="firstName" class="form-control" value="<?php echo set_value('firstName'); ?>">
<span class="text-danger" id="name_error"><?php echo form_error('firstName'); ?></span>
</div>
<div class="form-group col-sm-12 col-md-6">
<label>Last Name *</label>
<input type="text" name="lastName" class="form-control" value="<?php echo set_value('lastName'); ?>">
<span class="text-danger"><?php echo form_error('lastName'); ?></span>
</div>
</div>
<h5 class="bg-dark text-white p-3 text-center mt-2 mb-4">User Credentials</h5>
<div class="form-group">
<label>Email *</label>
<input type="email" name="email" class="form-control" value="<?php echo set_value('email'); ?>">
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="form-group">
<label>Password *</label>
<input type="password" name="password" class="form-control" value="<?php echo set_value('password'); ?>">
<span class="text-danger"><?php echo form_error('password'); ?></span>
</div>
<div class="form-group">
<label>Confirm Password *</label>
<input type="password" name="passwordMatch" class="form-control">
<span class="text-danger"><?php echo form_error('passwordMatch'); ?></span>
</div>
<h5 class="bg-dark text-white p-3 text-center mt-2 mb-4">User Status</h5>
<div class="form-group">
<label>User Status *</label>
<select class="form-control" id="userStatus" name="userStatus">
<option value="voter">Voter</option>
<option value="candidate">Candidate</option>
<option value="admin">Admin</option>
</select>
<span class="text-danger"><?php echo form_error('userStatus'); ?></span>
</div>
<div class="form-group" id="candidateSlogan">
<label>Candidate Slogan *</label>
<input type="file" name="userSlogan" class="form-control">
</div>
<button type="submit" class="btn btn-success">Add User</button>
</form>
ajax Response
<script type="text/javascript">
$("#userForm").submit(function(e){
e.preventDefault();
var firstName = $("input[name='firstName']").val();
var lastName = $("input[name='lastName']").val();
var email = $("input[name='email']").val();
var password = $("input[name='password']").val();
var passwordMatch = $("input[name='passwordMatch']").val();
var userStatus = $("#userStatus").val();
var slogan = $("input[name='userSlogan']").val();
if (userStatus == 'candidate') {
if(slogan == ''){
alert("Please Attach Candidate Slogan");
}
}
$.ajax({
method: 'POST',
url: '<?php echo base_url(); ?>welcome/add_user_validation',
data: {
firstName: firstName,
lastName: lastName,
email: email,
password: password,
passwordMatch: passwordMatch,
userStatus: userStatus,
slogan: slogan
},
success: function(data){
$('#message').html(data);
if(data == 'User Added Successfully'){
$('#message').addClass("alert alert-success");
$('#message').removeClass("alert-danger");
$('#userForm')[0].reset();
$("input[name = 'firstName']").focus();
}
else{
$('#message').addClass("alert alert-danger");
$('#message').removeClass("alert-success");
}
},
error: function(data){
// alert(data);
$('#message').html(data);
}
});
});
</script>
Controller.php
public function add_user_validation(){
// $this->load->helper(array('form', 'url')) // already loaded in autoload.php;
// $this->load->library('form_validation') // declared in autoload.php;
$this->form_validation->set_rules("firstName", "First Name", "required|trim|alpha");
$this->form_validation->set_rules("lastName", "Last Name", "required|trim|alpha");
$this->form_validation->set_rules("email", "Email", "required|trim|valid_email");
$this->form_validation->set_rules("password", "Password", "required");
$this->form_validation->set_rules("passwordMatch", "Password Comfirmation", "required|matches[password]");
$this->form_validation->set_rules("userStatus", "User Status", "required");
if($this->input->post('userStatus') == 'candidate'){
$this->form_validation->set_rules("slogan", "Candidate Slogan", "required");
if(isset($_POST['slogan'])){
$config['upload_path'] = './upload/';
$config['upload_types'] = 'png|jpg|jpeg';
$this->load->library('upload', $config);
echo "<script>alert('hello')</script>";
if($this->upload->do_upload('slogan')){
$candidateSlogan = $this->upload->data();
// print_r($candidateSlogan);
}
else{
// echo $this->upload->display_erorrs();
// echo "This File type is not allowed";
// $candidateSlogan = NULL;
$error = array('error' => $this->upload->display_errors());
echo $error['error'];
// print_r($error);
}
}
}
else{
$candidateSlogan = NULL;
}
if ($this->form_validation->run()) {
$this->load->model('main_model');
$data = array(
"first_name" => $this->input->post('firstName'),
"last_name" => $this->input->post('lastName'),
"email" => $this->input->post('email'),
"password" => $this->input->post('password'),
"user_status" => $this->input->post('userStatus'),
// "slogan" => $this->input->post('userSlogan')
"slogan" => $candidateSlogan
);
// echo "<script>alert(" . $data . ")</script>";
print_r($data);
if($this->main_model->add_user($data)){
echo "User Added Successfully";
}
else{
// $error_msg = $this->db->error();
// echo $error_msg;
echo "User Already Exists";
// echo $this->db->error();
}
}
else{
echo validation_errors();
}
}

Answer 1

you need this in your form tag for files
enctype="multipart/form-data"
the in ajax call add following for files
cache:false,
contentType: false,
processData: false,
and use formdata instead of doing manually for each input
var formData = new FormData(this);
now your ajax should look like this
var formData = new FormData(this); // this will get all inputs from your form
$.ajax({
type:'POST',
url: '<?php echo base_url(); ?>welcome/add_user_validation',
data:formData,
cache:false,
contentType: false,
processData: false,
error: function(data){
console.log("error");
console.log(data);
},
success:function(data){
console.log("success");
console.log(data);
},
});