Php error showing while accessing input type = file using jquery/ajax method

Question

I need to access input type=file using jquery/ajax so that I can pass the value/file to php page. but It's showing me following error message :

Notice: Undefined index: file in D:\software installed\xampp\htdocs\contact-management
\editContactDetails.php on line 16 

Is there any problem in my following code or Is there anyway to access it ?

My html code:

<form enctype="multipart/form-data">
<input type="file" name="file" id="file" class="file"/>
<input type="button" name="submit" value="Update Details" class="submit" id="UpdateDetails"/>
</form>

Jquery/Ajax code:

$(document).ready(function() {
        $("#UpdateDetails").click(function() {                
         var fn = $('#family_name').val();
         var cdid = $('#cdid').val();
         var family_name = $('#family_name').val();
         var given_name = $('#given_name').val();
         var work_phone = $('#work_phone').val();
         var mobile_phone = $('#mobile_phone').val();
         var email = $('#email').val();
         var email_private = $('#email_private').val();

         var file_des_1 = $('#file_des_1').val();
         var file = $('#file').val(); 

          $.ajax({    //create an ajax request to load_page.php
                type: "POST",
                url: "editContactDetails.php",             
                data : {

                    'cdid' : cdid,                  
                    'family_name' : fn,                 
                    'given_name' : given_name, 
                    'work_phone' : work_phone, 
                    'mobile_phone' : mobile_phone, 
                    'email' : email, 
                    'email_private' : email_private, 

                    'file_des_1' : file_des_1,
                    'file' : file

                    },
                dataType: "html",   //expect html to be returned                
                success: function(response){                    
                    $("#successUpdate").html(response); 
                    //alert(response);
                }

            });
        });
    });

Php file Code:

//uoload first docuement with description...
$file_des_1 = $_POST['file_des_1']; 
$did = mt_rand(100000, 999999);     
$file =  $_FILES["file"]["name"];
$type =  $_FILES["file"]["type"];
$size =  ($_FILES["file"]["size"] / 1024);
$temp =  $_FILES["file"]["tmp_name"];       
//require file formate 
$allowedExts = array("doc", "docx", "xls", "pdf");  
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);    
//rename uploaded docuement
echo $doc_1 = $did.".".$extension;  
$contacts_doc_directory = "contact_directory";

Answer 1

Before you start to work with data passed to a php script you should check that these data are actually passed to script... you can do it using isset() and empty() that checks if a value is set of variable you pass as an argument.

so your script becomes:

if (isset($_POST['file_des_1']) && !empty($_POST['file_des_1']) && isset( $_FILES["file"] ) && !empty( $_FILES["file"]["name"] )) {
    //uoload first docuement with description...
    $file_des_1 = $_POST['file_des_1']; 
    $did = mt_rand(100000, 999999);     
    $file =  $_FILES["file"]["name"];
    $type =  $_FILES["file"]["type"];
    $size =  ($_FILES["file"]["size"] / 1024);
    $temp =  $_FILES["file"]["tmp_name"];       
    //require file formate 
    $allowedExts = array("doc", "docx", "xls", "pdf");  
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);    
    //rename uploaded docuement
    echo $doc_1 = $did.".".$extension;  
    $contacts_doc_directory = "contact_directory";
}

Answer 2

Try this for file upload

<form enctype="multipart/form-data" >
<input type="file" name="file" id="file" class="file"/>
<input type="button" name="submit" value="Update Details" class="submit" id="UpdateDetails"/>
</form>


<script src="http://code.jquery.com/jquery-latest.min.js"

        type="text/javascript"></script>



<script>
$(document).ready(function() {
        $("#UpdateDetails").click(function() {                

 var formData = new FormData($('form')[0]);
 alert(formData);
    $.ajax({
        url: 'editContactDetails.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
          //      myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
      //  beforeSend: beforeSendHandler,
       // success: completeHandler,
        //error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });//ajax
    });
    });
</script>