Undefined index error while uploading the PDF file through PHP & AJAX

Question

I am working on a project where the requirement is to upload a PDF file to the server in file format, e.g. /home/xyz/proect_dir/upload/file_name.pdf, and store the file path to MySQL Database. I am uploading a PDF file using PHP & AJAX. I am getting a following error.

Notice: Undefined index: uploaded_pdf

Here is my code:

upload.html

<form action="#" method="post" id="frm_upload_pdf" enctype="multipart/form-data">
    <input type="file" name="uploaded_pdf" id="uploaded_pdf" accept="application/pdf" class="upload" />
    <button type="submit" id="btnUploadPaper">Save</button>       
</form>

upload.js

$('#frm_upload_pdf').validate({
    rules: {
        uploaded_pdf: { required: true }
    },
    messages: {
        uploaded_pdf: { required: "Select pdf file" }
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element);
    },
    submitHandler: function() {
        uploadPDF();
    }
});

function uploadPDF() {
    $.ajax({
        url: 'upload_processor.php',
        type: 'POST',
        data: $('#frm_upload_pdf').serialize(),
        success: function (data) {
            alert(data);
        }
    });
}

upload_processor.php

public function uploadPaper() {
    $fileName   = $_FILES['uploaded_pdf']['name'];
    $temp_name  = $_FILES['uploaded_pdf']['tmp_name'];

    if (isset($fileName)) {
        if (!empty($fileName)) {
            $fileType = pathinfo(FILE_UPLOAD_ROOT.$fileName, PATHINFO_EXTENSION);
            $allowTypes = array('pdf');
            if (in_array($fileType, $allowTypes, true)) {
                //upload file to server
                return move_uploaded_file($temp_name, FILE_UPLOAD_ROOT.$fileName) ? true : false;
            }
            return false;
        }
        return false;
    }
    return false;
}

While debugging I found that ajax does not post the file data as $_FILES, hence it is giving above error of undefined index. Any idea why it is not posting the file data as $_FILES or am I missing anything here.

Possible duplicate of [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — , Feb 25 '19 at 21:08

score 0 · Answer 1 · answered Feb 26 '19 at 06:45

I have Re-written your ajax and php codes as follows.

First you will need to create a folder called pdf in the same directory where your php codes resides.

Run the following tested codes below and its working. Let me know that its working for you

<html>
<head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload_processor.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
                        $("#errorLayer").html(data);
            },
            error: function() 
            {
            }           
       });
    }));
});
</script>
</head>
<body>
<div>
<form id="uploadForm" action="upload_processor.php" method="post">
<div id="targetLayer"></div>

<div id="errorLayer"></div>

<div id="uploadFormLayer">
<input name="uploaded_pdf" type="file" class="inputFile" /><br/>
<input type="submit" value="Submit" class="btnSubmit" />
</form>
</div>
</div>
</body>
</html>

php

<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['uploaded_pdf']['tmp_name'])) {

$fileName   = $_FILES['uploaded_pdf']['name'];

$sourcePath = $_FILES['uploaded_pdf']['tmp_name'];
$targetPath = "pdf/".$_FILES['uploaded_pdf']['name'];

if($fileName ==''){
echo "<div id='errorLayer'>Please select file</div>";
exit;
}

$fileType = pathinfo($fileName, PATHINFO_EXTENSION);
            $allowTypes = array('pdf');
            if (!in_array($fileType, $allowTypes, true)) {
               echo "<div id='errorLayer'>File type is invalid</div>";
exit;
            }


if(move_uploaded_file($sourcePath,$targetPath)) {
echo "<div id='targetLayer'>File  uploaded successfully</div>";
?>

<?php
}
}
}
?>

Undefined index error while uploading the PDF file through PHP & AJAX

1 Answers1