I am using fancy upload in my application. I easily integrate fancyupload in my page as per advised in the fancyupload website.

When i get response after uploading the file on server, i want to append the filename of uploaded file in multiple selectboxes in my page.

I found that onFileSuccess function i can retrieve the name of uploaded file by using using variable file.name but when i try to append this name as option value and name in my multple select boxes it won't allow me to do that.

Can some one guide me how can i do that. For better understanding my also pasting my code here as well.


window.addEvent('domready', function() {
	* Uploader instance
	var up = new FancyUpload3.Attach('demo-list', '#demo-attach, #demo-attach-2', {
		path: 'js/Swiff.Uploader.swf',
		url: 'upload-file.php',
		fileSizeMax: 2 * 1024 * 1024,
		verbose: true,
		onSelectFail: function(files) {
			files.each(function(file) {
				new Element('li', {
					'class': 'file-invalid',
					events: {
						click: function() {
					new Element('span', {html: file.validationErrorMessage || file.validationError})
				).inject(this.list, 'bottom');
			}, this);	
		onFileSuccess: function(file) {
			document.getElementById('demo-list').style.border="1px solid silver";
			new Element('input', {type: 'checkbox', 'checked': true}).inject(file.ui.element, 'top');
			//$("#temporary_file_to_assign_thumbnail").append('<option value="'+file.name+'" selected="selected">'+file.name+'</option>');
		onFileError: function(file) {
			file.ui.cancel.set('html', 'Retry').removeEvents().addEvent('click', function() {
				return false;
			new Element('span', {
				html: file.errorMessage,
				'class': 'file-error'
			}).inject(file.ui.cancel, 'after');
		onFileRequeue: function(file) {
			file.ui.cancel.set('html', 'Cancel').removeEvents().addEvent('click', function() {
				return false;

My multiple select boxes names are
1. temporary_file_to_assign_thumbnail
2. temporary_file_to_assign_preview

These are in my main page from where the script originate.

Here is my upload-file.php code

$result = array();
$result['time'] = date('r');
$result['addr'] = substr_replace(gethostbyaddr($_SERVER['REMOTE_ADDR']), '******', 0, 6);
$result['agent'] = $_SERVER['HTTP_USER_AGENT'];

if (count($_GET)) {
	$result['get'] = $_GET;
if (count($_POST)) {
	$result['post'] = $_POST;
if (count($_FILES)) {
	$result['files'] = $_FILES;
// we kill an old file to keep the size small
if (file_exists('script.log') && filesize('script.log') > 102400) {
$log = @fopen('script.log', 'a');
if ($log) {
	fputs($log, print_r($result, true) . "\n---\n");
// Validation
$error = false;
if (!isset($_FILES['Filedata']) || !is_uploaded_file($_FILES['Filedata']['tmp_name'])) {
	$error = 'Invalid Upload';
// Processing
move_uploaded_file($_FILES['Filedata']['tmp_name'], 'uploads/' . $_FILES['Filedata']['name']);
$return['src'] = '/uploads/' . $_FILES['Filedata']['name'];

if ($error){
	$return = array(
		'status' => '0',
		'error' => $error
	$return = array(
		'status' => '1',
		'name' => $_FILES['Filedata']['name']
	// Our processing, we get a hash value from the file
	$return['hash'] = md5_file($_FILES['Filedata']['tmp_name']);
	// ... and if available, we get image data
	$info = @getimagesize($_FILES['Filedata']['tmp_name']);
	if ($info) {
		$return['width'] = $info[0];
		$return['height'] = $info[1];
		$return['mime'] = $info['mime'];
// Output
if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml') {
	// header('Content-type: text/xml');
	// Really dirty, use DOM and CDATA section!
	echo '<response>';
	foreach ($return as $key => $value) {
		echo "<$key><![CDATA[$value]]></$key>";
	echo '</response>';
} else {
	// header('Content-type: application/json');
	echo json_encode($return);

kindly help me out to sort out my problem. I will be very thankful.


Member Avatar

This is js right? You get the correct response from the php file? You need to update the page with what?

This is js right? You get the correct response from the php file? You need to update the page with what?

Previously i told you about my js file code which included in my page and the php page where my request sent and in the same js file i get the response which is perfectly fine.

All what i want is that I want to append the uploaded file name in multiple select boxes.

Have a look on my page structure then you will get the idea of what i am saying about multiple select boxes.

                        	<div id="upload-container">
                                <ul id="demo-list"></ul>
                                <a href="#" id="demo-attach">Attach a file</a>
                                <a href="#" id="demo-attach-2" style="display: none;">Attach another file</a>
                        	<dl class="form-list">
                            	<dt class="pad-t-10">Thumbnail</dt>
                                    <select name="temporary_file_to_assign_thumbnail" id="temporary_file_to_assign_thumbnail">
                                        <option value=""></option>
                                    <small>JPEG or PNG 80x80px Thumbnail</small>
                                <dt class="pad-t-10">Theme Preview</dt>
                                    <select name="temporary_file_to_assign_preview" id="temporary_file_to_assign_preview">
                                        <option value=""></option>
                                    <small>ZIP file of images (png/jpg) w/ optional text descriptions for display on the site</small>
                                <dt class="pad-t-10">Main File(s)</dt>
                                    <select name="temporary_file_to_assign_source" id="temporary_file_to_assign_source">
                                        <option value=""></option>
                                    <small>ZIP - All Files For Download</small>
                                <dt class="pad-t-10">Preview Image Set</dt>
                                    <select name="temporary_files_to_assign_gallery_preview_source" id="temporary_files_to_assign_gallery_preview_source">
                                        <option value=""></option>
                                    <small>ZIP file of images (png/jpg) w/ optional text descriptions for display on the site</small>
                            <div class="notice">Please note we only accept file sizes of up to 500mb.</div>

In above code, you will see select boxes.
I want that when i get the name of uploaded file then i will append the filename in all above 4 select boxes; means filename become the option name and value of all the four select boxes. I hope you will get my problem now. Please try to help me out to fix that problem.

kind regards,

Member Avatar


Using jquery, this functionality could be trivial. Unfortunately, the use of fancybox's own object methods has got me flummoxed. Sorry. Good luck though.