String replacement of file.name

[Mahngiel]

Greetings,

 

I am barely literate in JavaScript, but I have done my best to try figuring this out on my own. 

 

I am playing with a Drag & Drop uploading script for HTML 5 that i found here: http://www.sitepoint.com/html5-file-drag-and-drop/

 

I have been able to get the script 95% set up to allow uploads, but it has a problem parsing when it comes to dealing with white space.  If an uploaded file has spaces in the name, the name output stops at the first whitespace.

 

As I said above, i have gone through many blogs and posts in the past several hours trying to figure the best way to do a string replace, but my ignorance of JS limits me on how to find the proper place for this.  However, I think it has to belong in here:

		// Output link
	Output(			
		"<div class='link'><a href=links/[QuickSeed]" + file.name +">" + file.name + "</a></div>" 
	);

 

/*
filedrag.js - HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
(function() {

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

// output information
function Output(msg) {
	var m = $id("messages");
	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) {}


// upload .Torrent 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 == "application/x-bittorrent" && file.size <= $id("MAX_FILE_SIZE").value) {

	// Output link
	Output(			
		"<div class='link'><a href=links/[QuickSeed]" + file.name +">" + file.name + "</a></div>" 
	);

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

		// 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);

	// 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();
}


})();

Example with whitespace in name, followed by one without.

http://

[Mahngiel]

Well, I solved it.  Simple really.  Just changed every instance of 'file.name' to 'file.name.replace(/ /g,"_")'.