PHP $_POST not seeing data appended to FormData

Viewed 243

Okay so I have an uploader script that I customized and it works great. I have 2 more steps that I need to do for it to be complete and it is beyond my scope and I have read and tried numerous things and still am not getting the results that I want.

Again only code that is releative to my issue will be posted as the code works perfect and does not need any changing with the exception of trying to get a value from AJAX to PHP.

FULL JS FILE BELOW:

jQuery(document).ready(function () {
            var img_zone = document.getElementById('img-zone'),     
            collect = {
                filereader: typeof FileReader != 'undefined',
                zone: 'draggable' in document.createElement('span'),
                formdata: !!window.FormData
            }, 
            acceptedTypes = {
                'image/png': true,
                'image/jpeg': true,
                'image/jpg': true,
                'image/gif': true
            };
            
            // Function to show messages
            function ajax_msg(status, msg) {
                var the_msg = '<div class="alert alert-'+ (status ? 'success' : 'danger') +'">';
                the_msg += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
                the_msg += msg;
                the_msg += '</div>';
                $(the_msg).insertBefore(img_zone);
            }
            
            // Function to upload image through AJAX
            function ajax_upload(files) {                   
                $('.progress').removeClass('hidden');
                $('.progress-bar').css({ "width": "0%" });
                $('.progress-bar span').html('0% complete');    
            
              
                var productTestID = "333746240";
                var formData = new FormData(this);
                formData.append('productTestID',productTestID);
                //formData.append('any_var', 'any value');
                    for (var i = 0; i < files.length; i++) {
                    //formData.append('img_file_' + i, files[i]); 
                    formData.append('img_file[]', files[i]);
                }                       
        
                $.ajax({
                    url : "upload.php", // Change name according to your php script to handle uploading on server
                    type : 'post',
                    data : formData,
                    dataType : 'json',                      
                    processData: false,
                    contentType: false,
                    error : function(request){
                        ajax_msg(false, 'An error has occured while uploading photo.');                                 
                    },
                    success : function(json){
                        var img_preview = $('#img-preview');
                        var col = '.col-sm-2';
                        $('.progress').addClass('hidden');  
                        var photos = $('<div class="photos"></div>');
                        $(photos).html(json.img);                               
                        var lt = $(col, photos).length;
                        $('col', photos).hide();
                        $(img_preview).prepend(photos.html());
                        $(col + ':lt('+lt+')', img_preview).fadeIn(2000);                                                               
                        if(json.error != '') 
                            ajax_msg(false, json.error);
                    },
                    progress: function(e) {
                        if(e.lengthComputable) {
                            var pct = (e.loaded / e.total) * 100;
                            $('.progress-bar').css({ "width": pct + "%" }); 
                            $('.progress-bar span').html(pct + '% complete');                           
                        }
                        else {
                            console.warn('Content Length not reported!');
                        }
                    }
                });                 
            }
            
            // Call AJAX upload function on drag and drop event
            function dragHandle(element) {
                element.ondragover = function () { return false; };
                element.ondragend = function () { return false; };
                element.ondrop = function (e) { 
                    e.preventDefault();
                    ajax_upload(e.dataTransfer.files);
                }       
            }
            
            if (collect.zone) {         
                dragHandle(img_zone);
            } 
            else {
                alert("Drag & Drop isn't supported, use Open File Browser to upload photos.");          
            }
        
            // Call AJAX upload function on image selection using file browser button
            $(document).on('change', '.btn-file :file', function() {
                ajax_upload(this.files);            
            });
            
            // File upload progress event listener
            (function($, window, undefined) {
                var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());
            
                if (!hasOnProgress) {
                    return;
                }
                
                var oldXHR = $.ajaxSettings.xhr;
                $.ajaxSettings.xhr = function() {
                    var xhr = oldXHR();
                    if(xhr instanceof window.XMLHttpRequest) {
                        xhr.addEventListener('progress', this.progress, false);
                    }
                    
                    if(xhr.upload) {
                        xhr.upload.addEventListener('progress', this.progress, false);
                    }
                    
                    return xhr;
                };
            })(jQuery, window); 
        });

So the above code is from the .js file. The script uploads multiple selected files, which works fine. From what I have read, in order to get additional values sent to PHP you have to use the .append(), which is what I have done below. I created the var productTestID and gave it a value and then added it to the formData using the append().

My issue is how do I read it in PHP?

I have tried $_POST[productTestID] and get no results at all. I even tried doing an isset() and it comes back not set.

So what do I need to do in my PHP code to read or extract that value? Below is an excerpt from my upload.php file and like I said the file uploads work and this is how they are being accessed.

if($_SERVER['REQUEST_METHOD'] == "POST")
{
$error = '';
$img = '';

$dir = dirname($_SERVER['SCRIPT_FILENAME'])."/". DIR_WS_IMAGES . "upload/";
$extensions = array("jpeg","jpg","png");
foreach($_FILES['img_file']['tmp_name'] as $key => $tmp_name )

Further down in my upload.php file:

//MOVE TO FINAL LOCATION
          $uploaded_file = $dir.$file_name;
          if (rename($uploaded_file, $uniqueFileName))
          {
            $productTestID = $_POST['productTestID'];
          }
          
            
            $img .= '<div class="col-sm-2"><div class="thumbnail">';
            $img .= '<img src="'.$dir.$file_name.'" />'.$uploaded_file . '<br>' .$fileName.'<br>'.$uniqueFileName.'<br>This Product Id is:';
            $img .= $productTestID;
            $img .= '</div></div>';     
        }

Thank You, Shawn Mulligan

0 Answers
Related