SWFupload - passing variable from form with upload - variables

Question

I am refering to the simpledemo in this question http://demo.swfupload.org/v220/simpledemo/index.php
I want to be able to pass a variable which is set by a dropdown menu.
the uploader is initiated by
var swfu;
window.onload = function() {
var settings = {
flash_url : "<?php global_data::show_admin_dir(); ?>SWFUpload v2.2.0.1 Samples/demos/swfupload/swfupload.swf",
upload_url: "<?php global_data::show_admin_dir(); ?>upload.php",
post_params: {"PHPSESSID" : "<?php echo session_id(); ?>" },
file_size_limit : "100 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "images/TestImageNoText_65x29.png",
button_width: "95",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">UPLOAD</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
and the form is as follows
<form id="form1" action="index.php" method="post" enctype="multipart/form-data">
<p><label>Category: </label><input type="radio" name="for" class="radio" value="category" checked="checked" /><select name="foo"><option>...</option><?php global_data::show_breadcrum_list( 'option', " / " ); ?></select></p>
<p><label>Product: </label><input type="radio" name="for" class="radio" value="category" /><select disabled="disabled"><option name="foo">...</option><?php global_data::show_breadcrum_list( 'option', " / " ); ?></select></p>
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div>
</form>
if anyone could point me in the right direction it would be much appreciated.
###### EDIT #####
I may have found a way...
using post_params: {"PHPSESSID" : "<?php echo session_id(); ?>", "PR" : thing },
in the init settings and wrapping it all in a function
function loader( thing ) {
....
}
and then using
$(document).ready(function(){
$('select[name=foo]').change(function(){
loader( $(':selected', this).text() );
});
});
it will work, but if i change the select option a second time before uploading it will get an error and only send the first choice instead of the second...

Answer 1

I was trying to do a similar thing and after finding this solution and discussing it with my collegue, we solved it yet another way using the Javascript API available with swfupload.
We were trying to pass a quality setting along with video uploads. Ultimately the solutions to this problem involve how to change post_params. To start with post_params will be the default value of the dropdown:
var selected_quality = $('select#quality-".$dirId." option:selected').val();
...
post_params: {'quality' : selected_quality},
Then you can use the addPostParam method (located in swfupload.js) to update this when options are selected in your dropdown.
$('select#quality-".$dirId."').change(function () {
swfu.addPostParam('quality' , this.value);
});

Answer 2

I have solved this problem in two ways (both using jquery): cookies and mysql. The concept would be a
$('select[name=foo]').change(function(){
$.cookie('dropdown', $(this).val());
});
so that when you change the dropdown, you now have a cookie. in upload.php you can then call that cookie and use it as your variable.
The other option was
$('select[name=foo]').change(function(){
$.post('updatedatabase.php', {'dropdown': $(this).val()});
});
Then you'd call your database from upload.php to get the last value of your dropdown. neither way is very elegant, but I've gotten them working before. I would love if someone posted a more elegant solution.

Answer 3

######## EDIT #######
Right this works a charm.
$(function() {
function loader( thing ) {
var settings = {
flash_url : admin_dir + "SWFUpload v2.2.0.1 Samples/demos/swfupload/swfupload.swf",
upload_url: web_root + "pm_admin/upload_image",
post_params: { "aj" : "true", "PR" : thing },
file_size_limit : "100 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "images/TestImageNoText_65x29.png",
button_width: "95",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">UPLOAD</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
function pre_load(){
var data = '';
data += '<div class="fieldset flash" id="fsUploadProgress">';
data += ' <span class="legend">Upload Queue</span>';
data += '</div>';
data += '<div id="divStatus">0 Files Uploaded</div>';
data += '<div>';
data += ' <span id="spanButtonPlaceHolder"></span>';
data += ' <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />';
data += '</div>';
return data;
}
/* args stores the input/select/textarea/radio's name and then it's value and then passes a single serialised string when uploading */
/* then use a trigger to update the array, off focus, change, keyup... along thos lines on a class set for all inputs, selects and so on... works a treat */
var args = {};
$('.radio').click(function(){
var ob = $(this).siblings('select');
$('#uploader-wrapper').html(pre_load());
$('.radio').siblings('select').attr('disabled', 'disabled');
ob.removeAttr('disabled');
args[$(this).attr('name')] = $(this).val();
args[ob.attr('name')] = $(':selected', ob).text();
loader( $.param(args) );
})
$('select[name=foo]').change(function(){
var ob = $(this);
$('#uploader-wrapper').html(pre_load());
args[ob.attr('name')] = $(':selected', ob).text();
loader( $.param(args) );
});
});
with form:
<form id="form1" action="index.php" method="post" enctype="multipart/form-data">
<p><label>Category: </label><input type="radio" name="for" class="radio" value="category" checked="checked" /><select name="foo"><option>...</option><?php global_data::show_breadcrum_list( 'option', " / " ); ?></select></p>
<p><label>Product: </label><input type="radio" name="for" class="radio" value="category" /><select disabled="disabled"><option name="foo">...</option><?php global_data::show_breadcrum_list( 'option', " / " ); ?></select></p>
<div id="uploader-wrapper">
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div>
</div>
</form>