File Upload with Mootools

[craygo]

I am using a script from another developer. I have it working great in FireFox and Chrome, but will not work with IE9.

I have a from which pops up using another javascript, the form takes the file name and a short description of the file So i can store the description and the filename in a database table(just the name not the image). I am also using codeigniter so lookout for the functions

 

Here is the form page

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://192.168.20.13/wquality/assets/scripts/fileup.js"></script>
<script>
window.addEvent('domready', function(){
$("filesubmit").addEvent('click', function(){
var upload = new File.Upload({
  url: '/wquality/wq/do_upload',
  data: {
    CALLID: $('CALLID').value,
    DESC: $('DESC').value
  },
  images: ['userfile'],
	    onComplete: function(response) {
		    $('loading').setStyle('display','none');

        if(response == 'OK')
		    {
		      document.getElementById('fileUpload').reset();
            $('fstatus').set('html', '<div >File Uploaded!</div>');
		    } else {
            $('fstatus').set('html', '<div >'+response+'</div>');
          }
        }
});

upload.send();
});
});
</script>

<div class="sample_popup" id="lab_list" />
  <div class="lab_list_header" />
    <a href="#" onClick="hide_lab('lab_list');" /><img class="menu_form_exit" src="<?=base_url()?>assets/img/form_exit.png" alt="exit" border="0" /></a>   File Upload
  </div>
  <div style="width:300px;margin:0 auto 0 auto;" />
  <div id="fstatus"></div>
<?php
  echo form_open_multipart(base_url()."wq/do_upload", array("class" => "", "name" => "fileUpload", "id" => "fileUpload")).'
    <input type="hidden" name="CALLID" value="'.$cid.'" id="CALLID" />
    <p>Name '.form_input(array("name" => "DESC", "id" => "DESC")).'</p>
    <p style="margin-left: 48px;" >'.form_upload(array("name" => "userfile", "id" => "userfile")).'</p>
    <p style="margin-left: 48px;" >'.form_button(array("name" => "btn", "value" => "true", "id" => "filesubmit", "content" => "Upload File")).'</p>
    '.form_close();
    //<p style="margin-left: 48px;" >'.form_submit(array("value" => "Upload File", "id" => "filesubmit")).'</p>
    //<p style="margin-left: 48px;" >'.form_button(array("name" => "btn", "value" => "true", "id" => "filesubmit", "content" => "Upload File")).'</p>

?>
  <div id="loading" style="display: none;" ><img align="absmiddle" src="http://192.168.20.13/wquality/assets/img/spinner.gif"> Processing...</div>
  </div>
</div>

 

Here is the js file

File.Upload = new Class({

Implements: [Options, Events],

options: {
	onComplete: function(){}
},

initialize: function(options){
	var self = this;
	this.setOptions(options);
	this.uploadReq = new Request.File({
		onComplete: function(){
			self.fireEvent('complete', arguments);
			this.reset();
		}
	});
	if(this.options.data) this.data(this.options.data);
	if(this.options.images) this.addMultiple(this.options.images);
},

data: function(data){
	var self = this;
	if(this.options.url.indexOf('?') < 0) this.options.url += '?';
	Object.each(data, function(value, key){
		if(self.options.url.charAt(self.options.url.length - 1) != '?') self.options.url += '&';
		self.options.url += encodeURIComponent(key) + '=' + encodeURIComponent(value);
	});
},

addMultiple: function(inputs){
	var self = this;
	inputs.each(function(input){
		self.add(input);
	});
},

add: function(input){
	var input = document.id(input),
		name = input.get('name'),
		file = input.files[0];
	this.uploadReq.append(name, file);
},

send: function(input){
	if(input) this.add(input);
	this.uploadReq.send({
		url: this.options.url
	});
}

});

Request.File = new Class({

Extends: Request,

options: {
	emulation: false,
	urlEncoded: false
},

initialize: function(options){
	this.xhr = new Browser.Request();
	this.formData = new FormData();
	this.setOptions(options);
	this.headers = this.options.headers;
},

append: function(key, value){
	this.formData.append(key, value);
	return this.formData;
},

reset: function(){
	this.formData = new FormData();
},

send: function(options){
	var url = options.url || this.options.url;

	this.options.isSuccess = this.options.isSuccess || this.isSuccess;
	this.running = true;

	var xhr = this.xhr;
	xhr.open('POST', url, true);
	xhr.onreadystatechange = this.onStateChange.bind(this);

	Object.each(this.headers, function(value, key){
		try{
			xhr.setRequestHeader(key, value);
		}catch(e){
			this.fireEvent('exception', [key, value]);
		}
	}, this);

	this.fireEvent('request');
	xhr.send(this.formData);

	if(!this.options.async) this.onStateChange();
	if(this.options.timeout) this.timer = this.timeout.delay(this.options.timeout, this);
	return this;
}

});

 

The error I get in IE 9 is this

When I first load the page I get a 'File' is undefined error. This points to the first line, "File.Upload = new Class({".

The second error comes, probably because of the first. On the line "var upload = new File.Upload({" on the form page. I am a novice Javascript person so sorry if this may be a minor error.

 

I did not include the page to upload the image because that works fine.

 

I am just starting my Javascript/Ajax studies so please excuse my novice skills.

 

Thanks for the help

 

Ray

 

[craygo]

No Help??