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?

Possible duplicate of [jQuery file upload with additional data](https://stackoverflow.com/questions/12661566/jquery-file-upload-with-additional-data) — M. Eriksson, Aug 26 '19 at 05:38
added this line `formData.append("refNum", $("#refNum").val());` but still i've got same error/ — Borgy ES, Aug 26 '19 at 07:04
You don't need to "add" that line. You need to use it in replacement of `var refNum = $("#refNum").val();` and inside the Ajax just leave `data: formData,` — user3153340, Aug 26 '19 at 07:43
Oh yes, forgot to tell. I replaced `var refNum = $("#refNum").val();` with `formData.append("refNum", $("#refNum").val());` and kept `data: formData,` but still the same issue. — Borgy ES, Aug 26 '19 at 08:05
Finally, (from the above codes)I have solved the issue by replacing, `var refNum = $("#refNum").val();` to, ` formData.append("refNum", $("#refNum").val());` and adding this line, `enctype: "multipart/form-data",` Hope this will be useful to others. — Borgy ES, Sep 02 '19 at 10:49

score 0 · Answer 1 · answered Aug 26 '19 at 08:34

0

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},

answered Aug 26 '19 at 08:34

Mahfuzur Rahman

27
4

Thanks for the answer. But nothing happened when I drag the file. – Borgy ES Aug 26 '19 at 09:08

How to get the value when DIV is set?

1 Answers1