errors with uploadExtraData

Web Tips Q & ACategory: Krajee Pluginserrors with uploadExtraData
rhinorck asked 3 months ago

I am using the Bootstrap Fileinput at plugin for a wordpress photo contest website. I am trying to upload a batch of photos and capture form input with the upload and send it to the server. I have configured the plugin settings as below:

jQuery("#storyUpload").fileinput({
    uploadUrl: '<?php echo $site_url; ?>/upload-story/', // you must set a valid URL here else you will get an error

    allowedFileTypes: ['image'],
    allowedFileExtensions: ['jpg', 'jpeg'],
    overwriteInitial: false,
    maxFileSize: 10240000,
    maxFilesNum: 20,
    browseOnZoneClick: true,
    showClose : false,
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    },
    uploadExtraData: (function($) {

            var obj = {};
            $('#storyUpload').on('filepreajax', function(event, previewId, index) {
                $('.uploadStoryForm').find('input').each(function() {
                var id = $(this).attr('id'), val = $(this).val();
                obj[id] = val;
                });
            });
            console.info(obj);
            return obj;


    })(jQuery), 

});

My PHP file looks like this. I’ve put the code up to the point where I get an error from the plugin.

if( !empty($_FILES['uploadStory'] ) ) {

$uploaded_files     =   $_FILES['uploadStory'];
$uploaded_filenames =   $uploaded_files['name'];
$storyTitle         =   $_POST['storyTitle'];
$storyNumber        =   $_POST['storyNumber'];
$storyDescription   =   $_POST['storyDescription'];
$categoryID         =   $_POST['story_id'];
$contest_id         =   $_POST['contest_id'];
$userID             =   $_POST['userID'];

// loop all files
foreach ( $uploaded_filenames as $i => $name ){


    // remove spaces and commas from and set file name
    $file_Name = strtolower( preg_replace('/\s/', '', $uploaded_filenames[$i]) );
    $file_Name = str_replace(',', '', $file_Name );

    if (strlen($file_Name) > 10) {  
        $file_Name = substr($file_Name, 0, 10);
    }

    $file_Name = round(microtime(true)) . $file_Name.'.jpg';

    $uploadedFile = $userUploadDir . $file_Name;

    //Set uploadOk
    $uploadOk = 1;



    // Extract Exif Data and Check if image file is an actual image and is of minimum dimensions
    $exifData = exif_read_data( $uploaded_files["tmp_name"][$i], 0, true );
    $imageCheck = $exifData["FILE"]["FileType"];
    $photoWidth = $exifData["COMPUTED"]["Width"];
    $photoHeight = $exifData["COMPUTED"]["Height"];


    if( $imageCheck != 2 ) {
        /* $submit_success = 0;
        $message = $messages['file_type_error'];
        $uploadOk = 0; */
        echo json_encode(['error'=>'File is not a JPEG/JPG image file.']); 
        return; // terminate
    }

    if ( !($photoWidth > 2999 || $photoHeight > 2999 )) {
        /* $submit_success = 0;
        $message = $messages['dimensions_error'];
        $uploadOk = 0; */
        echo json_encode(['error'=>'The uploaded image does not meet the minimum dimension specifications. Please ensure that your image is at least 3000 pixels wide or tall.']); 
        return; // terminate
    }

    // Check if file already exists
    if( file_exists($uploadedFile) ) {
        /* $submit_success = 0;
        $message = $messages['file_exists_error'];
        $uploadOk = 0; */
        echo json_encode(['error'=>'By some freak of nature, a file with the same name as the one you are trying to upload already exists on the server. Please rename your file and try again.']); 
        return; // terminate
    }

    // Check File Size
    if ($uploaded_files["size"][$i] > 10485760  ) {
        /* $submit_success = 0;
        $message = $messages['file_size_error'];
        $uploadOk = 0; */
        echo json_encode(['error'=>'Your file exceeds the size limit of 10Mb. Please compress your image and try again.']); 
        return; // terminate

    }

    // Check userID to remove bug
    if ($userID == 0) {
        /* $submit_success = 0;
        $message = $messages['not_registered_user'];
        $uploadOk = 0; */
        echo json_encode(['error'=>'Please login to submit your photos.']); 
        return; // terminate

    }

When I click the upload button on the plugin page after selecting my photos, I get the ‘Please login and submit your photos’ error:-
Plugin Output plus console info
I’ve checked the data sent to the server and realised that despite the console showing that the plugin captures the data after hitting the upload button, it sends an empty array or doesn’t send the data at all. When I output the values of the _POST[] like $userID = $_POST['userID']; it shows that the value is NULL. What could be going on?
If instead of the above plugin settings, I use these:-

jQuery("#storyUpload").fileinput({
    uploadUrl: '<?php echo $site_url; ?>/upload-story/', // you must set a valid URL here else you will get an error
    allowedFileTypes: ['image'],
    allowedFileExtensions: ['jpg', 'jpeg'],
    overwriteInitial: false,
    maxFileSize: 10240000,
    maxFilesNum: 20,
    browseOnZoneClick: true,
    showClose : false,
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    },
    uploadExtraData: (function($) {

            var obj = {};
            $('.uploadStoryForm').find('input').each(function() {
            var id = $(this).attr('id'), val = $(this).val();
            obj[id] = val;
            });
            console.info(obj);
            return obj;


    })(jQuery),

});

The photos are uploaded successfully and the uploadextraData is sent to the server but I cannot capture form data that is typed in by the user, I can only capture data that is within hidden form inputs,basically data that exists when the page is loaded.
Plugin Output and Console Info
How can I configure this correctly to capture form data that is input by the user? What am I doing wrong? Honestly it’s taken me a while (trial and error) to get to the point where I can actually capture the data from the form but I’m frustrated that now I can’t get it sent to the server.

Login or register to contribute or comment.

Login   Register