Ciao a tutti ragazzi,

sto cercando di implementare sul mio sito un uploader in ajax e html5 (con il drag 'n drop). Fin qui tutto bene, su una pagina di prova funziona perfettamente ma sul mio sito da questo errore:

codice:
 Uncaught TypeError: Cannot call method 'addEventListener' of null
Come potete vedere dice di non poter usare il metodo 'addEventListener' se si tratta di un valore nullo. Il fatto è che il div a cui si riferisce esiste nella pagina. Ho fatto una verifica in questo modo:

codice:
 
if ( $("#fileselect").length > 0 && $("#filedrag").length > 0 && $("#submitbutton").length > 0 )
{
	alert("Esistono tutti i div");
}
else
{
	alert("Non esiste almeno un div");
}

Vi posto il resto del codice javascript:

codice:
(function() {

	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}


	// output information
	function Output(msg) {
		$("#filedrag").html('');
		var m = $id("filedrag");
		m.innerHTML = msg + m.innerHTML;
	}


	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}


	// file selection
	function FileSelectHandler(e) {

		// cancel event and hover styling
		FileDragHover(e);

		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;

		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
			UploadFile(f);
		}

	}


	// output file information
	function ParseFile(file) {

		// display an image
		if (file.type.indexOf("image") == 0) {
			var reader = new FileReader();
			reader.onload = function(e) {
				Output('<td style="padding:7px;">[img]' + e.target.result + '[/img]</td>');
			}
			reader.readAsDataURL(file);
		}

	}


	// upload JPEG files
	function UploadFile(file) {

		// following line is not necessary: prevents running on SitePoint servers
		if (location.host.indexOf("sitepointstatic") >= 0) return

		var xhr = new XMLHttpRequest();
		if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {

			// create progress bar
			var o = $id("progress");
			var progress = o.appendChild(document.createElement("p"));


			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
			}, false);

			// file received/failed
			xhr.onreadystatechange = function(e) {
				if (xhr.readyState == 4) {
					progress.className = (xhr.status == 200 ? "success" : "failure");
				}
			};

			// start upload
			xhr.open("POST", $id("upload").action, true);
			xhr.setRequestHeader("X_FILENAME", file.name);
			xhr.send(file);

		}

	}


	// initialize
	function Init() {

		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("submitbutton");

		// file select
		//fileselect.addEventListener("change", FileSelectHandler, false);
		$("#fileselect").change(FileSelectHandler);
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {

			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";

			// remove submit button
			submitbutton.style.display = "none";
		}

	}

	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
	

})();
Nella riga 104 Chrome mi segnalava lo stesso problema ed ho risolto sostituendolo con la funzione jQuery. Purtroppo però non sono riuscito a fare lo stesso con gli altri eventi come 'dragover', 'dragleave' e 'drop'.

Grazie mille in anticipo.