CODEWITHSUNDEEP
jqueryuploadify
pavolve
pavolve

Reputation: 225

Uploadify formData: Why jquery won't send parameters via post?

There is my code:

$('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php',
        'onSelect' : function(file) {
            $('#start').removeClass('hidden');
        },
        'method'   : 'post',
        'formData' : {
            'to': $('input#to').val(),
            'from': $('input#from').val(),
            'subject': $('input#subject').val()
        },
        'onQueueComplete' : function(queueData) {
            window.location.replace("index.php?success=uploaded");
        },
        'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        }
        // Your options here
    });

as you can see I'm sending three parameters TO, FROM, SUBJECT via POST method.

There is server script

if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (move_uploaded_file($tempFile, $targetFile)) {

    echo $_REQUEST['subject'];
} else {
    echo "Something wrong";
}
}

and echo $_REQUEST['subject']; return nothing Where is my mistake?

If I change for example 'subject': $('input#subject').val() to 'subject': 'test subject' it's works. But I need send a values from inputs. How I can do it?

Thx a lot

Upvotes: 3

Views: 5612

Answers (3)

user2390733
user2390733

Reputation: 509

Uploadify is a bit tricky. The Event we are interested in is "onUploadStart". This should actually be named "onBeforeUploadStart", because it is indeed fired before sending the POST data. Thus it is a perfect spot to update the formData (which is the only data Uploadify sends - it does really not care what inputs you have in your elsewhere).

So, I like to init Uploadify without any options. Before the send (== "onUploadStart") I update the form data.

My code adds a keyed element to the POST data and assigns its value.

var ts = '<?php $t = time(); echo $t; ?>';
var hs = '<?php echo md5($t . $fileupload_securityhash); ?>';

$("#fileUploadInput").uploadify({
  'formData'      : {},
  'onUploadStart' : function(file) {
     uploadify_update_formdata();       
  }
});

function uploadify_update_formdata(){
    $("#fileUploadInput").uploadify('settings','formData', {
        'token'          : hs,
        'ts'             : ts, 
        'gallery[title]' : $('input[name="gallery[title]"]').val()
    });
}

On the server side: All Uploadify-Form-Data is sent in the $_POST.

Important: The uploadify form data does not look up the variable values on send. Meaning, if you have something like:

'formData' : { 'myInputVal' : $(input[name=myInput]).val() }

this will NOT be updated on send. All variables are set ON INIT of Uploadify, and then are NEVER changed UNLESS you set the $.uploadify.settings.

I also like to have an event listener for the inputs, to go sure:

$('form input').on('change', function(){
  uploadify_update_formdata()
});

Hope this helps.

Upvotes: 2

RonnieSan
RonnieSan

Reputation: 182

You're setting the formData when Uploadify is first instantiated instead of when you submit the upload. If you do it this way, you'll be setting the formData as whatever the value are for those fields when the page is loaded.

Instead, use the onUploadStart option to set the formData right before the file uploads...

$('#file_upload').uploadify({
    'swf'      : 'uploadify.swf',
    'uploader' : 'uploadify.php',
    'onSelect' : function(file) {
        $('#start').removeClass('hidden');
    },
    'method'   : 'post',
    'onQueueComplete' : function(queueData) {
        window.location.replace("index.php?success=uploaded");
    },
    'onUploadStart' : function(file) {
        $('#file_upload').uploadify('settings','formData',{
            'to': $('input#to').val(),
            'from': $('input#from').val(),
            'subject': $('input#subject').val()
        });
    }
    'onUploadSuccess' : function(file, data, response) {
        alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
    }
    // Your options here
});

Upvotes: 4

antoniovassell
antoniovassell

Reputation: 1032

If your input is called "#to" then in the jquery selector just use "#to" instead of "input#to". That should do the it. :)

Upvotes: 0

Related Questions