bennadel/index.cfm

## index.cfm
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />

	<title>
		Using Plupload For Drag &amp; Drop File Uploads In ColdFusion
	</title>

	<!-- Style our demo. -->
	<link rel="stylesheet" type="text/css" href="./assets/css/demo.css"></link>

	<!-- Load RequireJS and our bootstrap file. -->
	<script
		type="text/javascript"
		src="./assets/require/require.js"
		data-main="./assets/main.js">
	</script>
</head>
<body>

	<h1>
		Using Plupload For Drag &amp; Drop File Uploads In ColdFusion
	</h1>


	<!-- BEGIN: Uploader. -->
	<div id="pluploadContainer" class="uploader">

		<!-- BEGIN: Dropzone + Browse Button. -->
		<a id="pluploadDropzone" class="dropzone html5Dropzone">

			<!-- If the HTML5 runtime engine is enabled, show this. -->
			<span class="instructions html5Instructions">
				Drag &amp; Drop Your Files Here!
			</span>

			<!-- If the Flash runtime engine is enabled, show this. -->
			<span class="instructions flashInstructions">
				Click Here To Select Files!
			</span>

		</a>
		<!-- END: Dropzone + Browse Button. -->


		<!-- BEGIN: File Queue. -->
		<div class="queue emptyQueue">

			<div class="noFiles">
				Please select some files to upload!
			</div>

			<ul class="files">
				<!-- To be populated dynamically. -->
			</ul>

		</div>
		<!-- END: File Queue. -->


		<!-- BEGIN: Templates For Uploader. -->
		<script type="application/template" class="templates">

			<li class="file">
				<span class="name">FILE-NAME</span>
				<span class="progress">
					(
						<span class="percentComplete">0%</span> of
						<span class="totalSize">0</span>
					)
				</span>
			</li>

		</script>
		<!-- END: Templates For Uploader. -->

	</div>
	<!-- END: Uploader. -->


</body>
</html>

## main.js
// Configure our RequireJS paths.
require.config({

	// Since Plupload doesn't support AMD loading, we can use the shim
	// configuration to define a just-in-time module that exports the
	// Plupload library as the named-module, "plupload".
	shim: {
		plupload: {
			exports: "plupload"
		}
	},

	// Set up the paths to our various modules. Be sure to include the
	// "full" plupload file - otherwise, you'll get a -500 Init Error.
	paths: {
		domReady: "require/domReady",
		jquery: "jquery/jquery-1.8.0.min",
		plupload: "plupload/js/plupload.full",
		views: "views"
	},

	// To help prevent JS caching while we're developing.
	urlArgs: ("v=" + (new Date()).getTime())

});


// Run our boostrap file once the DOM-Ready event has fired. Notice
// that I am running domReady as a plugin (ie. ends with "!").
require(
	[
		"jquery",
		"views/uploader",
		"domReady!"
	],
	function( $, Uploader ){


		// Create an instance of our upload view giving it the root
		// module node and the server-side end-point for the uploads.
		// Since we want to use the Flash runtime, we have to give
		// it the URL to the Flash engine SWF file to fallback to if
		// the user's browser doesn't support the HTML5 file API.
		var uploader = new Uploader(
			$( "div.uploader" ),
			"upload_files.cfm",
			"assets/plupload/js/plupload.flash.swf"
		);


	}
);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />

	<title>
	Using Plupload For Drag & Drop File Uploads In ColdFusion
	</title>

	<!-- Style our demo. -->
	<link rel="stylesheet" type="text/css" href="./assets/css/demo.css"></link>

	<!-- Load RequireJS and our bootstrap file. -->
	<script
	type="text/javascript"
	src="./assets/require/require.js"
	data-main="./assets/main.js">
	</script>
	</head>
	<body>

	<h1>
	Using Plupload For Drag & Drop File Uploads In ColdFusion
	</h1>


	<!-- BEGIN: Uploader. -->
	<div id="pluploadContainer" class="uploader">

	<!-- BEGIN: Dropzone + Browse Button. -->
	<a id="pluploadDropzone" class="dropzone html5Dropzone">

	<!-- If the HTML5 runtime engine is enabled, show this. -->
	<span class="instructions html5Instructions">
	Drag & Drop Your Files Here!
	</span>

	<!-- If the Flash runtime engine is enabled, show this. -->
	<span class="instructions flashInstructions">
	Click Here To Select Files!
	</span>

	</a>
	<!-- END: Dropzone + Browse Button. -->


	<!-- BEGIN: File Queue. -->
	<div class="queue emptyQueue">

	<div class="noFiles">
	Please select some files to upload!
	</div>

	<ul class="files">
	<!-- To be populated dynamically. -->
	</ul>

	</div>
	<!-- END: File Queue. -->


	<!-- BEGIN: Templates For Uploader. -->
	<script type="application/template" class="templates">

	<li class="file">
	<span class="name">FILE-NAME</span>
	<span class="progress">
	(
	<span class="percentComplete">0%</span> of
	<span class="totalSize">0</span>
	)
	</span>
	</li>

	</script>
	<!-- END: Templates For Uploader. -->

	</div>
	<!-- END: Uploader. -->


	</body>
	</html>
	// Configure our RequireJS paths.
	require.config({

	// Since Plupload doesn't support AMD loading, we can use the shim
	// configuration to define a just-in-time module that exports the
	// Plupload library as the named-module, "plupload".
	shim: {
	plupload: {
	exports: "plupload"
	}
	},

	// Set up the paths to our various modules. Be sure to include the
	// "full" plupload file - otherwise, you'll get a -500 Init Error.
	paths: {
	domReady: "require/domReady",
	jquery: "jquery/jquery-1.8.0.min",
	plupload: "plupload/js/plupload.full",
	views: "views"
	},

	// To help prevent JS caching while we're developing.
	urlArgs: ("v=" + (new Date()).getTime())

	});


	// Run our boostrap file once the DOM-Ready event has fired. Notice
	// that I am running domReady as a plugin (ie. ends with "!").
	require(
	[
	"jquery",
	"views/uploader",
	"domReady!"
	],
	function( $, Uploader ){


	// Create an instance of our upload view giving it the root
	// module node and the server-side end-point for the uploads.
	// Since we want to use the Flash runtime, we have to give
	// it the URL to the Flash engine SWF file to fallback to if
	// the user's browser doesn't support the HTML5 file API.
	var uploader = new Uploader(
	$( "div.uploader" ),
	"upload_files.cfm",
	"assets/plupload/js/plupload.flash.swf"
	);


	}
	);