Skip to content
Advertisement

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

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{

        }
    }

Advertisement

Answer

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;
};
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement