fancy upload, response and Javascript

[neovantage]

Hello,
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.

upload-script.js

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() {
							this.destroy();
						}
					}
				}).adopt(
					new Element('span', {html: file.validationErrorMessage || file.validationError})
				).inject(this.list, 'bottom');
			}, this);	
		},
		onFileSuccess: function(file) {
			//alert(file.name);
			document.getElementById('demo-list').style.backgroundColor="#F0F0F0";
			document.getElementById('demo-list').style.border="1px solid silver";
			new Element('input', {type: 'checkbox', 'checked': true}).inject(file.ui.element, 'top');
			file.ui.element.highlight('#e6efc2');
			//$("#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() {
				file.requeue();
				return false;
			});
			new Element('span', {
				html: file.errorMessage,
				'class': 'file-error'
			}).inject(file.ui.cancel, 'after');
		},
		onFileRequeue: function(file) {
			file.ui.element.getElement('.file-error').destroy();
			file.ui.cancel.set('html', 'Cancel').removeEvents().addEvent('click', function() {
				file.remove();
				return false;
			});
			this.start();
		}
	});
});

My multiple select boxes names are
1. temporary_file_ to_assign_thumb nail
2. temporary_file_ to_assign_previ ew

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) {
	unlink('script.log');
}
$log = @fopen('script.log', 'a');
if ($log) {
	fputs($log, print_r($result, true) . "\n---\n");
	fclose($log);
}
// 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
	);
}else{
	$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.

regards,

[acoder]

When you say it won't allow you to do that, what do you mean? What happens? Is there an error? Have you tried some other string?

[neovantage]

Thank you acoder for your response. I fixed it now. Actually i was trying to use jQuery function in Mootools framework. But now i did it by using Mootools.

From Mootools we can do it very easily. Here is the solution of my problem.

var newoption1 = new Option(file.name,file.name);
			try{
				$('temporary_file_to_assign_thumbnail').add(newoption1, null);
			}catch (err){
				$('temporary_file_to_assign_thumbnail').add(newoption1);
			}