The aim of the project is to create a lightweight 3D engine with a very low level of complexity; in other words, for dummies. The engine can render using <canvas>, <svg> and WebGL.

The three.js engine allows developers to create mindblowing 2D and 3D animations with Canvas and WebGL, from basic cubes to advanced animations so smooth you’ll wet yourself.

Favorite three.js Demos

The three.js repository comes with several dozens examples of the engine’s capabilities. Here are a few of my favorites:

• http://mrdoob.github.com/three.js/examples/webgl_trails.html
• http://mrdoob.github.com/three.js/examples/webgl_terrain_dynamic.html
• http://mrdoob.github.com/three.js/examples/webgl_shading_physical.html
• http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_refraction.html
• http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html
• http://mrdoob.github.com/three.js/examples/webgl_geometries.html

You can see all of the examples here: http://mrdoob.github.com/three.js/

Mind status: blown. three.js is an incredible project that allows developers to achieve amazing animations efficiently and without Flash. Mr.Doob: take a bow — three.js is ahead of its time.

Amazing 3D Animation with three.js is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

That’s where JavaScript Enlightenment comes in. JavaScript Enlightenment is an outstanding book by Cody Lindley, one of several members of the jQuery team. I’ll let book’s description speak for itself:

This book is not about JavaScript design patterns or implementing an object-oriented paradigm with JavaScript code. It was not written to distinguish the good features of the JavaScript language from the bad. It is not meant to be a complete reference guide. It is not targeted at people new to programming or those completely new to JavaScript. Nor is this a cookbook of JavaScript recipes. Those books have been written. It was my intention to write a book to give the reader an accurate JavaScript worldview through an examination of native JavaScript objects and supporting nuances: complex values, primitive values, scope, inheritance, the head object, etc. I intend this book to be a short and digestible summary of the ECMA-262, Edition 3 specification, focused on the nature of objects in JavaScript.

In short, JavaScript Enlightment takes JavaScript back to its basics. The chapter summary is really drives that point home:

1. Constructing Objects
2. Working with Objects and Properties
3. Object()
4. Function()
5. The Head/Global Object
6. The this Keyword
7. Scope and Closures
8. Prototype Property
9. Array()
10. String()
11. Number()
12. Boolean()
13. Null
14. Undefined
15. Math Function

There are a couple of things I really enjoyed about Cody’s writing style:

• Many authors write in a way to reinforce that they’re the smartest guy in the room. What people like them don’t understand is that eager-to-learn developers have already bought the book: they trust that you’re the expert, so you don’t have to use advanced verbiage to look intelligent. Cody skips that ego-centric exercise, explain JavaScript concepts in Leyman’s terms.
• Each section covers one JavaScript object/concept, so the book is very focused. Too often development books bleed into and out of topics without true explanation.
• Lindley’s book is packed full of code examples; if you’re anything like me, code examples tell you as much if not more than plan text. Every person has their own style of leaning, but there’s nothing like a solid code example you can play around with.

The books itself, when it comes to topics covered, is great for beginners and intermediates a like; there’s a lot of learning and reinforcing of core JavaScript concepts. Each code snippet provides a link to a working version of the code, which comes in handy if you want to quickly tinker with such code. Lastly, there’s plenty of personality in Lindley’s book; it’s not simply a reference to flick through — designers and developers will enjoy reading JavaScript Enlightenment.

Cody Lindley’s JavaScript Enlightenment is an essential resource for any designer or developer looking to to understand JavaScript at its core, regardless of skill level or JavaScript framework. Lindley’s ability to explain key JavaScript concepts with realistic, useful code examples is what really makes JavaScript Enlightenment shine. Don’t be a slave to your JavaScript framework, because copy’n'paste is no way to go through a development life! Get enlightened by JavaScript Enlightenment!

JavaScript Enlightenment by Cody Lindley is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The battery object is located at window.navigator.battery, but since this is Mozilla’s initial offering and the API is not yet cemented, you’ll need to use window.navigator.mozBattery. The helpful mozBattery properties include:

• charging: Represents if the system’s battery is charging. The attribute must be set to false if the battery is discharging, and set to true, if the battery is charging, full, the implementation is unable to report the state, or there is no battery attached to the system, or otherwise.
• chargingTime: Represents the time remaining in seconds until the system’s battery is fully charged.
• dischargingTime: Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended.
• level: Represents the current battery level scaled from 0 to 1.0. The attribute must be set to 0 if the system’s battery is depleted and the system is about to be suspended, and to 1.0 if the battery is full, the implementation is unable to report the battery’s level, or there is no battery attached to the system.

Events for each of these statuses are provided, including onchargingchange, onchargingtimechange, ondischargingtimechange, and onlevelchange. Basic usage is simple:

// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);

// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
	console.warn("Battery charge change: ", battery.charging);
}, false);
battery.addEventListener("chargingtimechange", function(e) {
	console.warn("Battery charge time change: ", battery.chargingTime);
}, false);
battery.addEventListener("dischargingtimechange", function(e) {
	console.warn("Battery discharging time change: ", battery.dischargingTime);
}, false);
battery.addEventListener("levelchange", function(e) {
	console.warn("Battery level change: ", battery.level);
}, false);

I promised a simple API, didn’t I? The battery API is the perfect API: simple, effective, and focused!

So why use the battery API? Since many mobile apps live inside a browser wrapper (aren’t completely “native”), it’s great to have access to system information. Some processes are power-intensive and it may bear warning the user before starting the process that their device is low on battery. Either way, this simple API’s true usefulness should become apparent soon!

JavaScript Battery API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The DOM Tree Events

Here are the DOM tree events you can listen for:

Table provided by MDN documentation.

The DOM event you’ll probably recognize is DOMContentLoaded, which is used to signal the domready we’re all used to seeing within our JavaScript toolkits. The event names are all fairly self-explanatory. Adding these events is as easy as adding any other type of event:

// Notify us when any node within the document is modified, added removed, etc.
document.addEventListener("DOMSubtreeModified", function(e) {
	// Notify of change!
	console.warn("change!", e);
}, false);

// Now create a new element to see what it will look like
var a = document.createElement("a");
document.body.appendChild(a);

/*
	Result:

	{
		ADDITION: 2,
		MODIFICATION: 1,
		REMOVAL: 3,
		attrChange: 0,
		attrName: "", 
		defaultPrevented: false,
		newValue: "",
		prevValue: "",
		relatedNode: null,
		initMutationEvent: initMutationEvent(),
		bubbles: true,
		cancelable: false,
		constructor: MutationEvent { MODIFICATION=1, ADDITION=2, REMOVAL=3},
		currentTarget: Document en,
		eventPhase: 3,
		explicitOriginalTarget: body.home,
		isTrusted: true,
		originalTarget: body.home,
		target: body.home,
		timeStamp: 0,
		type: "DOMSubtreeModified"
	}

*/

What if you want to listen to simple node changes?

// Listen to when an image src or alt gets changed (ex: slideshow, etc.)
document.getElementById("slideshowImage").addEventListener("DOMAttrModified", function(e) {
	// Record the occurrence
	console.warn(e.attrName + " changed from ", e.prevValue," to: ", e.newValue);
}, false);

The attrName, prevValue, and newValue values tell you which attribute changed and its previoius and current values. Each event type has its own custom event properties so experiment with events when creating them. You can also learn the event properties by checking out the spec list.

These DOM events are really nice to plug into if you’re looking for complete control over Document. The one caution to throw to you is that since these events can fire so often, attaching to them can be heavy on your app. The ability to attach to them when needed is incredibly useful in a sophisticated web application.

DOM Events in JavaScript is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

document.hidden

This new document property, document.hidden, returns true the page is currently not visible.

document.visibilityState

The visibilityState will either be visibile (the page is the foreground tab of a non-minimized window), hidden (document is either a background tab or part of a minimized window), or prerender (the page content is being prerendered and is not visible to the user).

visibilitychange Event

Listening for changes in window visibility is as easy as:

// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
	state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
	state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
	state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
	state = "webkitVisibilityState";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);

// Set the initial value
document.title = document[state];

The example above changes the document.title property during every visibility change!

Supporting visibilityChange in MooTools

MooTools doesn’t support visibilityChange out of the box, so you’ll need to add this bit of JavaScript:

// Set it up!
Element.NativeEvents[visibilityChange] = 2;
Element.Events[visibilityChange] = {
	base: visibilityChange,
	condition: function(event) {
		event[state] = document[state];
		event.visibilityState = document[state];
		return true;
	}
};

// Now use it!
document.addEvent(visibilityChange, function(e) {
	document.title = document[state];
});

Don’t you love it when it’s that easy?! This mirror the code needed to add onMessage events to the list of supported events.

So what could visibilitychange be used for? You could stop periodically refreshing content when the page is no longer visible, then pull new content when the page becomes visible again. You could pause and resume a video during visibility changes. Audio too. You could adjust your site statistics to count only time spent on site while the page is visible. There’s loads you can do! So…the question is…what would you do with this?

Page Visibility API is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

iScroll requires a two-DIV pattern for declaring where iScroll will be used. The first DIV is the wrapper, the second DIV is the scrollable area:

<div id="wrapper">
	<div id="scroller">
		<div style="padding:15px 30px;"> <!-- padding for content -->
		
			<!-- content goes here -->
			
		</div>
	</div>
</div>

iScroll will create and inject the scrollbar within the wrapper DIV. The content is held within the scroller DIV.

The CSS

The CSS is where iScroll can get a bit fuzzy. For iScroll to work optimally, both the wrapper and scroller DIVs need to be positioned absolutely and be styled to widths of 100%:

#wrapper {
	position:absolute;
	z-index:1;
	top:0; 
	bottom:0; 
	left:0;
	width:100%;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

As a result, the third DIV of the structure needs the contain enough padding-right to keep the text and scrollbar far enough way from each other. Be sure to position those elements properly or iScroll wont work at all (as I found out the hard way)!

The JavaScript

The most obvious piece of using iScroll is including its .js file:

<script type="text/javascript" src="iscroll/src/iscroll.js"></script>

With iScroll now available within the page, the next step is creating the iScroll instance that suits the needs of your desired usage. The most simple of uses provides only the wrapper ID:

var scroller = new iScroll('wrapper');

Awesome; the page’s native scrollbar disappears and is replaced by an iOS-style scrollbar! But like every good JavaScript lib, iScroll provides a host of features that allow you to customize your scrollbar. Options include setting flags for bounce, momentum, fade and hide settings, and whether scrollbars should be allowed both vertically and horizontally. Here’s another example of how you can create a pull-to-refresh scrollbar:

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

Since we live in the world of AJAX-driven websites that allow content to come and go, calling the refresh method is all you need to do for iScroll to reevaluate the scrollbar position and size:

// When the AJAX is done, refresh the scrollbar sizing and positioning...
scroller.refresh();

It’s also important to point out that iScroll allows zooming and pinching, as well as snapping to elements:

var myScroll = new iScroll('wrapper', {
	/* snap: true, */ 		// Would snap logically
	snap: "p",				// Snaps to each "P" tag
	momentum: false,
	hScrollbar: false,
	vScrollbar: false 
});

Lastly, iScroll-Lite is available for those looking to support only mobile browsers (iScroll allows for desktop support as well). The mischievous part of me would prefer iOS-style scrollbars instead of native browser scrollbars!

Possibly my favorite part of iScroll is that it’s a standalone library; no external JavaScript library is required. iScroll has many configuration parameters so I encourage you to visit the iScroll page to check out everything you can do. Matteo Spinelli’s iScroll is an outstanding piece of work; grab iScroll and start controlling your scrollbars today!

iPhone Scrollbars with iScroll is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The CSS

The element we create for measurement will need to be positioned off screen so the user doesn’t notice it:

/* way the hell off screen */
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

You could add these styles directly to the element, but they’d bloat the JavaScript portion a bit.

The JavaScript

The obvious parts is creating a DIV to inject into the DOM and adding the CSS class we created above:

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

With the element in the page, subtracting the clientWidth from the offsetWidth gives the scrollbar size! The last step is removing the DIV from the DOM and done!

Since the scrollbar size is different between Mac and Windows (and even Internet Explorer 7 vs. other IE versions), this small but dynamic snippet is just what I needed to find the true content area of the container. Feel free to convert this JavaScript snippet into whatever JavaScript framework your prefer!

Detect Scrollbar Width with JavaScript is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it’s voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I cannot fathom how it’s all done. Since I already covered booby nudity detection with JavaScript, I thought it would be worth some time to explore face detection. Facebook uses it, so maybe it has application in your websites.

One face detection library I found is Face Detection by Jay Salvat and Liu Liu. This is a standard jQuery plugin that receives an image and returns an array of coordinates of faces found within the image. Let’s have a look at how to use it!

jQuery.faceDetection

Four JS files are required for this jQuery plugin:

%MINIFYHTML6d0d016c2c19f02f35e3835699b764790%%MINIFYHTML6d0d016c2c19f02f35e3835699b764791%%MINIFYHTML6d0d016c2c19f02f35e3835699b764792%%MINIFYHTML6d0d016c2c19f02f35e3835699b764793%

The faceDetection plugin wraps functionality within the first two JavaScript files, and returns an array of objects which represent the coordinates of the faces within the photo (if any are found). An example would be:

var coords = jQuery("#myImage").faceDetection();
/* Returns:
	{
		x: 525
		y: 435,
		width: 144,
		height: 144,
		positionX: 532.6353328125226,
		positionY: 443.240976080536,
		offsetX: 532.6353328125226,
		offsetY: 443.240976080536,
		confidence: 12.93120119,
		neighbour: undefined,
	}
*/

You may also add event callbacks to every call:

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	},
	error: function() {
		console.warn("Could not process image");
	}
});

It’s up to you what you’d like to do when the faces have been found. You could add a square around the person’s face:

jQuery("img").each(function() {
	var img = this;
	// Get faces cooridnates
	var coordinates = jQuery(img).faceDetection();
	// Make boxes if faces are found
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("
", {
				css: {
					position: "absolute",
					left: coord.positionX + 5 + "px",
					top: coord.positionY + 5 + "px",
					width: coord.width + "px",
					height: coord.height + "px",
					border: "3px solid white"
				}
			}).appendTo(img.parentNode);
		});
	}
});

There’s not much more to it than that!

I tried to vary the photos I used faceDetection on and as I expected, the results are the not perfect. They are, however, quite good; no software will be perfect for all cases. The software also does not do facial comparison, so you would need to provide suggestions as to the face’s identity via another method. For what this plugin is meant to do, however, it does pretty well. I encourage you to give this a try!

Face Detection with jQuery is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Creating DOM Nodes

Creating new nodes is just about as simple as it gets:

// Create an empty DIV
var div = put("div");

Boom, there’s your new DIV element! And if you want your new code to have a few CSS classes:

// Create a DIV with some CSS classes
var div2 = put("div.classOne.classTwo");

How about creating nodes with attributes?

// Create a DIV with some CSS classes and attributes
var div3 = put("div.classOne.classTwo[title=Hover over me][style=display:inline-block]");

The syntax for inserting the DOM node is a bit different because the parent then becomes the first argument in the put signature:

// Create an INPUT with an ID and an attribute, place it into the body
// The body text goes into the third argument;  not(!) innerHTML, just text
var div4 = put(document.body, "input[type=text]#myInput", "This is inner html");

Manipulating Existing DOM Nodes

Manipulating DOM nodes is actually very much like creating the nodes themselves:

var myInput = document.getElementById("myInput");
put(myInput, ".anotherClass");

// Add CSS classes attributes to the element
put(myInput, "[placeholder=first name][required=true][title=first name element].yetAnotherClass");

Just remove the tagName and you can modify the node.

Node, Class, and Attribute Deletion

The “!” character is meaningful in that it represents deletion within put. Let’s remove a few classes and attributes from a given node, then let’s remove the node itself:

// Remove a CSS class from the INPUT element
put(myInput, "!anotherClass");

// Remove attributes from the INPUT element
put(myInput, "[!required][!title]");

// Delete a node!
put(myInput, "!");

The syntax for deletion is short but sweet. The only criticism I have is that if this could create a maintenance problem if developers are not experience with put.

Creating and Managing Child Nodes

Creating childNodes for an existing node is another functionality made easier by put:

// Create a base node so we can add nodes around it
var baseNode = put(document.body, "div#baseNode");

// Add two DIVs *after* the baseNode
put(baseNode, "+div +div");

// Add a SPAN element *before* the baseNode
put(baseNode, "-span");

// Create the parent list element 
var ul = put(document.body, "ul");

// Create a child list item
var firstItem = put(ul, "li");

Moving and ReParenting Nodes

Reparenting and moving elements within the DOM is another basic task that, when you use JavaScript’s native functions, takes far too much code. Let’s have a look at moving nodes around with put:

// Move one node to another parent
// parent > child
put(ul, ">", firstItem);

// Put one element after the first
put(div1, "+", div2);

A simple series of symbols designates where within the node try an element should go!

More Traditional Node Property Management

For those who prefer a more verbose element creation syntax, put-selector provides that as well:

var span = put(parent, "span", {
	title: "Hover over me!",
	style: "font-style: italic;"
});

Kris’ tool is great in that it’s ultra-efficient, modular, and easy to learn. On the other side, it’s possible that the syntax may be a bit too compact for persons try to maintain an application that they didn’t write. What do you think of put? An easy to use utility or a “simple but complicated” resource? If I’m honest, I’m teetering on the fence — maybe you can convince me?

DOM Manipulation with put-selector is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

After doing some research, I found this blog post, which explained:

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is C:\fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

That made sense; essentially the browser is feeding that lame C:\fakepath\ text in. Luckily all I needed to do was fix the issue by doing a simple string replace call:

// Change the node's value by removing the fake path
inputNode.value = fileInput.value.replace("C:\\fakepath\\", "");

Whew — dodged a bullet there. Just wanted to post this for everyone in case you run into it in the future.

File Uploads and C:\fakepath\ is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.