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

Question

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

RonnieSan · Accepted Answer · 2012-07-03 23:25:49Z

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
});

user2390733 · Accepted Answer · 2013-11-11 15:30:10Z

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.

antoniovassell · Accepted Answer · 2012-06-30 17:59:30Z

0

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

answered Jun 30, 2012 at 17:59

antoniovassell

1,03215 silver badges25 bronze badges

2 Comments

pavolve Over a year ago

<section> <label for="subject">Subject:</label> <input type="text" name="subject" value="" id="subject" /> </section>

antoniovassell Over a year ago

try alert the values in the form first and see if it is printing out the values, like so alert($('#subject').val()); Place this in a click event or something. Other random suggestions could be: make sure you place the jquery code in a document.ready function, also could try placing the jquery code at the bottom of the page.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related