How to get the value when DIV is set?

Question

I have drag-and-drop multiple uploads of the file, aside from this I have an input text field that I need the value when the files are uploaded. I have checked this question (jQuery file upload with additional data) and doesn't fit what I need.

Below is my HTML code.

<script type="text/javascript" src="custom/js/uploader.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-6">
            <h3 class="alert alert-info">Drag and drop Multiple PDF Files</h3><br />
            <div id="uploaded_file"></div>
            <div class="file_drag_area alert alert-warning">
                Drop Files Here
            </div>

        </div>
        <input type="text" class="form-control" id="refNum" name="refNum"/>
    </div>
</div>

My jQuery;

$(document).ready(function(){

    $('.file_drag_area').on('dragover', function(){
        $(this).addClass('file_drag_over');
        return false;
    });
    $('.file_drag_area').on('dragleave', function(){
        $(this).removeClass('file_drag_over');
        return false;
    });
    $('.file_drag_area').on('drop', function(e){
        e.preventDefault();
        $(this).removeClass('file_drag_over');
        var formData = new FormData();
        var files_list = e.originalEvent.dataTransfer.files;

        var refNum = $("#refNum").val();


        for(var i=0; i<files_list.length; i++)
        {
            formData.append('file[]', files_list[i]);
        }

        $.ajax({
            url:"php_action/upload.php",
            method:"POST",
            data: formData, refNum: refNum,
            contentType:false,
            cache: false,
            processData: false,
            success:function(data){
                $('#uploaded_file').html(data);

                $(".alert-success").delay(500).show(10, function() {
                    $(this).delay(3000).hide(10, function() {
                        $(this).remove();
                    });
                }); // /.alert
            }
        })
    });
});

and last, my PHP.

$output = '';
if(isset($_FILES['file']['name'][0]))
{
    $refNum = $_POST["refNum"];

    foreach($_FILES['file']['name'] as $keys => $values)
    {
        $random_no        = rand();
        $split_file_name  = explode('.',$values);
        $new_file_name    = $random_no.$split_file_name[0].'.'.$split_file_name[1];

        if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'PDFUpload/' . $new_file_name))
        {
            $sql        = "INSERT INTO upload (order_id, file_name, uploaded_date) 
                           VALUES('$refNum','".$new_file_name."','$dateTimeNiBorgy')";

            $result     = mysqli_query($connect, $sql);

            if($result == 1)
            {
                $msg    = '<div class="alert alert-success">Files uploaded successfully!</div>';
            }
            else
            {
                $msg    = '<div class="alert alert-danger">Some error occurred, Please try again!</div>';
            }
            $output = $msg;

        }
    }
}

echo $output;

Now the script for uploading and saving to the database is working fine. But after dragging the files, I've got an error

Notice: Undefined index: refNum in C:\xampp\htdocs\php_action\upload.php on line 21

My question is, how to get the value of the refNum input field right after the upload?

Answer 1

In your js file: The property data needs to be a string or an object.

change the data property using the following:

data:{"formData":formData, "refNum":refNum},