Undefined index when trying to upload image ( with jquery validate and steps ) - php

Question

I'm using form steps with jquery steps and jquery validate. But when i try to upload image, it show "Undefined Index: picture". When i try without both of jquery, it works.
register.php
<form class="form-contact contact_form" id="register" enctype="multipart/form-data">
<input name="remarks" id="remarks" type="hidden" value="SMP">
<div class="row">
<h3> Profil </h3>
<section>
<div class="col-md-3">
<p class="katapen">NISN</p>
</div>
<div class="col-md-9">
<input class="form-control required number" name="nisn" id="nisn" type="text" placeholder='Please enter your NISN'>
</div>
<div class="col-md-3">
<p class="katapen">School Status</p>
</div>
<div class="col-md-4">
<div class="switch-wrap d-flex justify-content-between">
<div class="primary-radio">
<input type="radio" name="schoolstatus" value="A" id="primary-radio" required>
<label for="primary-radio"></label>
</div>
<p class="spasidrradio">A</p>
</div>
</div>
<div class="col-md-4">
<div class="switch-wrap d-flex justify-content-between">
<div class="primary-radio">
<input type="radio" name="schoolstatus" value="B" id="primary-radio">
<label for="primary-radio"></label>
</div>
<p class="spasidrradio">B</p>
</div>
</div>
</section>
<h3> Personal Data </h3>
<section>
<div class="col-md-3">
<p class="katapen">Full Name</p>
</div>
<div class="col-md-9">
<input class="form-control required" name="fullname" id="fullname" type="text" placeholder='Please enter your fullname' required>
<div class="col-md-3">
<p class="katapen">Picture</p>
</div>
<div class="col-md-9">
<input class="form-control" name="picture" id="picture" type="file">
</div>
</section>
test.js
var former = $("#register");
former.validate
({
errorPlacement: function errorPlacement(error, element)
{
element.before(error);
},
rules:
{
}
});
former.children("div").steps
({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
former.validate().settings.ignore = ":disabled,:hidden";
return former.valid();
},
onFinishing: function (event, currentIndex)
{
former.validate().settings.ignore = ":disabled";
return former.valid();
},
onFinished: function (event, currentIndex)
{
studentregister();
}
});
function studentregister()
{
var remarks = document.getElementById('remarks');
$.ajax
({
type: "POST",
url : base_url + "register/" + remarks.value,
data: $('#register').serialize(),
dataType: 'json',
success: function(data)
{
if(data.log.status == '1')
{
swal
({
title: "",
type: "success",
text: data.log.ket,
confirmButtonClass: "btn-success",
confirmButtonText: "Con"
},function(){
});
}else{
swal
({
title: "",
type: "error",
text: data.log.ket,
confirmButtonClass: "btn-default",
confirmButtonText: "Back"
},function(){
});
}
$("#register")[0].reset();
},
error: function(ts)
{
alert(ts.responseText);
}
});
return false;
};
base_url + "register/" + remarks.value will be route to saveregister and remarks.value as uri2
This is my adm.php
public function saveregister()
{
$uri1 = $this->uri->segment(1);
$uri2 = $this->uri->segment(2);
$uri3 = $this->uri->segment(3);
$uri4 = $this->uri->segment(4);
//var post from json
$p = json_decode(file_get_contents('php://input'));
$_log = array();
if($uri2 == "SD")
{
}else if($uri2 == "SMP"){
$p = $this->input->post();
$folder = "./upload/register/";
$allowed_type = array("image/jpeg", "image/jpg", "image/png", "image/gif",
"audio/mpeg", "audio/mpg", "audio/mpeg3", "audio/mp3", "audio/x-wav", "audio/wave", "audio/wav","video/mp4", "application/octet-stream", "application/pdf", "application/doc");
$file_name = $_FILES['picture']['name'];
$file_type = $_FILES['picture']['type'];
$file_tmp = $_FILES['picture']['tmp_name'];
$file_error = $_FILES['picture']['error'];
$file_size = $_FILES['picture']['size'];
$ekstensi = explode("/", $file_type);
$time = date("Yhsms");
$filename= $this->db->escape($p['nisn'])."_".$time .".".$ekstensi[1];
#move_uploaded_file($file_tmp, $folder .$filename);
}else{
}
}

Answer 1

If you look at the jquery serialize() Documentation, it says the data from file select elements is not serialized. You could use FormData to send file input through ajax :
function studentregister()
{
var remarks = document.getElementById('remarks');
var form = $("#register")[0]; // use the form ID
var formData = new FormData(form);
$.ajax
({
type: "POST",
url : base_url + "register/" + remarks.value,
data: formData,
dataType: 'json',
contentType: false, // required
processData: false, // required
success: function(data)
{
if(data.log.status == '1')
{
swal
({
title: "",
type: "success",
text: data.log.ket,
confirmButtonClass: "btn-success",
confirmButtonText: "Con"
},function(){
});
}else{
swal
({
title: "",
type: "error",
text: data.log.ket,
confirmButtonClass: "btn-default",
confirmButtonText: "Back"
},function(){
});
}
$("#register")[0].reset();
},
error: function(ts)
{
alert(ts.responseText);
}
});
return false;
};