path: root/js/dojo/dojox/form/Uploader.js

//>>built
require({cache:{
'url:dojox/form/resources/Uploader.html':"<span class=\"dijit dijitReset dijitInline\"\n\t><span class=\"dijitReset dijitInline dijitButtonNode\"\n\t\tdojoAttachEvent=\"ondijitclick:_onClick\"\n\t\t><span class=\"dijitReset dijitStretch dijitButtonContents\"\n\t\t\tdojoAttachPoint=\"titleNode,focusNode\"\n\t\t\trole=\"button\" aria-labelledby=\"${id}_label\"\n\t\t\t><span class=\"dijitReset dijitInline dijitIcon\" dojoAttachPoint=\"iconNode\"></span\n\t\t\t><span class=\"dijitReset dijitToggleButtonIconChar\">&#x25CF;</span\n\t\t\t><span class=\"dijitReset dijitInline dijitButtonText\"\n\t\t\t\tid=\"${id}_label\"\n\t\t\t\tdojoAttachPoint=\"containerNode\"\n\t\t\t></span\n\t\t></span\n\t></span\n\t><!--no need to have this for Uploader \n\t<input ${!nameAttrSetting} type=\"${type}\" value=\"${value}\" class=\"dijitOffScreen\" tabIndex=\"-1\"\n\t\tdojoAttachPoint=\"valueNode\"\n/--></span>\n"}});
define("dojox/form/Uploader", [
	"dojo/_base/kernel",
	"dojo/_base/declare",
	"dojo/_base/lang",
	"dojo/_base/array",
	"dojo/_base/connect",
	"dojo/_base/window",
	"dojo/dom-style",
	"dojo/dom-geometry",
	"dojo/dom-attr",
	"dojo/dom-construct",
	"dojo/dom-form",
	"dijit",
	"dijit/form/Button",
	"dojox/form/uploader/Base",
	"dojo/i18n!./nls/Uploader",
	"dojo/text!./resources/Uploader.html"
],function(kernel, declare, lang, array, connect, win, domStyle, domGeometry, domAttr, domConstruct, domForm, dijit, Button, uploader, res, template){

	kernel.experimental("dojox.form.Uploader");
	//
	// TODO:
	//		i18n
	//		label via innerHTML
	//		Doc and or test what can be extended.
	//		Doc custom file events
	//		Use new FileReader() for thumbnails
	//		flashFieldName should default to Flash
	//		get('value'); and set warning
	//		Make it so URL can change (current set to Flash on build)
	//

	/*=====
		uploader = dojox.form.uploader.Base;
		WidgetsInTemplateMixin = dijit._WidgetsInTemplateMixin;
	=====*/
declare("dojox.form.Uploader", [uploader, Button], {
	//
	// Version: 1.6
	//
	// summary:
	//		A widget that creates a stylable file-input button, with optional multi-file selection,
	//		using only HTML elements. Non-HTML5 browsers have fallback options of Flash or an iframe.
	//
	//	description:
	//		A bare-bones, stylable file-input button, with optional multi-file selection. The list
	//		of files is not displayed, that is for you to handle by connecting to the onChange
	//		event, or use the dojox.form.uploader.FileList.
	//
	//		Uploader without plugins does not have any ability to upload - it is for use in forms
	//		where you handle the upload either by a standard POST or with Ajax using an iFrame. This
	//		class is for convenience of multiple files only. No progress events are available.
	//
	//		If the browser supports a file-input with the "multiple" attribute, that will be used.
	//		If the browser does not support "multiple" (ergo, IE) multiple inputs are used,
	//		one for each selection.
	//
	//
	//	uploadOnSelect: Boolean
	//		If true, uploads imediately after a file has been selected. If false,
	//		waits for upload() to be called.
	uploadOnSelect:false,
	//	tabIndex: Number|String
	//		The tab order in the DOM.
	tabIndex:0,
	//	multiple: Boolean
	//		If true and flash mode, multiple files may be selected from the dialog.
	multiple:false,
	//
	//	label: String
	//		The text used in the button that when clicked, opens a system Browse Dialog.
	label:res.label,
	//
	// url: String
	//		The url targeted for upload. An absolute URL is preferred. Relative URLs are
	//		changed to absolute.
	url:"",
	//
	//	name: String
	//		The name attribute needs to end with square brackets: [] as this is the standard way
	//		of handling an attribute "array". This requires a slightly different technique on the
	//		server.
	name:"uploadedfile",
	//
	//	flashFieldName: String
	//		If set, this will be the name of the field of the flash uploaded files that the server
	//		is expecting. If not set, "Flash" is appended to the "name" property.
	flashFieldName:"",
	//
	//	uploadType: String [readonly]
	//		The type of uploader being used. As an alternative to determining the upload type on the
	//		server based on the fieldName, this property could be sent to the server to help
	//		determine what type of parsing should be used.
	uploadType:"form",
	//
	//	showInput: String [const]
	//		Position to show an input which shows selected filename(s). Possible
	//		values are "before", "after", which specifies where the input should
	//		be placed with reference to the containerNode which contains the
	//		label). By default, this is empty string (no such input will be
	//		shown). Specify showInput="before" to mimic the look&feel of a
	//		native file input element.
	showInput: "",

	_nameIndex:0,

	templateString: template,

	baseClass: 'dijitUploader '+Button.prototype.baseClass,

	postMixInProperties: function(){
		this._inputs = [];
		this._cons = [];
		this.inherited(arguments);
	},
	buildRendering: function(){
		console.warn("buildRendering", this.id)
		this.inherited(arguments);
		domStyle.set(this.domNode, {
			overflow:"hidden",
			position:"relative"
		});
		this._buildDisplay();
		//change the button node not occupy tabIndex: the real file input
		//will have tabIndex set
		domAttr.set(this.titleNode, 'tabIndex', -1);
	},
	_buildDisplay: function(){
		if(this.showInput){
			this.displayInput = dojo.create('input', {
				  'class':'dijitUploadDisplayInput',
				  'tabIndex':-1, 'autocomplete':'off'},
				this.containerNode, this.showInput);
			//schedule the attachpoint to be cleaned up on destroy
			this._attachPoints.push('displayInput');
			this.connect(this,'onChange', function(files){
				var i=0,l=files.length, f, r=[];
				while((f=files[i++])){
					if(f && f.name){
						r.push(f.name);
					}
				}
				this.displayInput.value = r.join(', ');
			});
			this.connect(this,'reset', function(){
				this.displayInput.value = '';
			});
		}
	},

	startup: function(){
		if(this._buildInitialized){
			return;
		}
		this._buildInitialized = true;
		this._getButtonStyle(this.domNode);
		this._setButtonStyle();
		this.inherited(arguments);
	},

	/*************************
	 *	   Public Events	 *
	 *************************/

	onChange: function(/* Array */fileArray){
		//	summary:
		// 		stub to connect
		// 		Fires when files are selected
		// 		Event is an array of last files selected
	},

	onBegin: function(/* Array */dataArray){
		// summary:
		// 		Fires when upload begins
	},

	onProgress: function(/* Object */customEvent){
		// summary:
		// 		Stub to connect
		// 		Fires on upload progress. Event is a normalized object of common properties
		// 		from HTML5 uploaders and the Flash uploader. Will not fire for IFrame.
		// customEvent:
		// 		bytesLoaded: Number
		// 			Amount of bytes uploaded so far of entire payload (all files)
		//		bytesTotal: Number
		//			Amount of bytes of entire payload (all files)
		//		type: String
		//			Type of event (progress or load)
		//		timeStamp: Number
		//			Timestamp of when event occurred
	},

	onComplete: function(/* Object */customEvent){
		// summary:
		// 		stub to connect
		// 		Fires when all files have uploaded
		// 		Event is an array of all files
		this.reset();
	},

	onCancel: function(){
		// summary:
		// 		Stub to connect
		// 		Fires when dialog box has been closed
		//		without a file selection
	},

	onAbort: function(){
		// summary:
		// 		Stub to connect
		// 		Fires when upload in progress was canceled
	},

	onError: function(/* Object or String */evtObject){
		// summary:
		//		Fires on errors
		//
		//FIXME: Unsure of a standard form of error events
	},

	/*************************
	 *	   Public Methods	 *
	 *************************/

	upload: function(/*Object ? */formData){
		// summary:
		// 		When called, begins file upload. Only supported with plugins.
	},

	submit: function(/* form Node ? */form){
		// summary:
		//		If Uploader is in a form, and other data should be sent along with the files, use
		//		this instead of form submit.
		form = !!form ? form.tagName ? form : this.getForm() : this.getForm();
		var data = domForm.toObject(form);
		this.upload(data);
	},

	reset: function(){
		// summary
		// 		Resets entire input, clearing all files.
		// 		NOTE:
		// 		Removing individual files is not yet supported, because the HTML5 uploaders can't
		// 		be edited.
		// 		TODO:
		// 		Add this ability by effectively, not uploading them
		//
		delete this._files;
		this._disconnectButton();
		array.forEach(this._inputs, domConstruct.destroy, dojo);
		this._inputs = [];
		this._nameIndex = 0;
		this._createInput();
	},

	getFileList: function(){
		// summary:
		// 		Returns a list of selected files.
		//
		var fileArray = [];
		if(this.supports("multiple")){
			array.forEach(this._files, function(f, i){
				fileArray.push({
					index:i,
					name:f.name,
					size:f.size,
					type:f.type
				});
			}, this);
		}else{
			array.forEach(this._inputs, function(n, i){
				if(n.value){
					fileArray.push({
						index:i,
						name:n.value.substring(n.value.lastIndexOf("\\")+1),
						size:0,
						type:n.value.substring(n.value.lastIndexOf(".")+1)
					});
				}
			}, this);

		}
		return fileArray; // Array
	},

	/*********************************************
	 *	   Private Property. Get off my lawn.	 *
	 *********************************************/

	_getValueAttr: function(){
		// summary:
		//		Internal. To get disabled use: uploader.get("disabled");
		return this.getFileList();
	},

	_setValueAttr: function(disabled){
		console.error("Uploader value is read only");
	},

	_setDisabledAttr: function(disabled){
		// summary:
		//		Internal. To set disabled use: uploader.set("disabled", true);
		if(this._disabled == disabled){ return; }
		this.inherited(arguments);
		domStyle.set(this.inputNode, "display", disabled ? "none" : "");
	},

	_getButtonStyle: function(node){
		this.btnSize = {w:domStyle.get(node,'width'), h:domStyle.get(node,'height')};
	},

	_setButtonStyle: function(){
		this.inputNodeFontSize = Math.max(2, Math.max(Math.ceil(this.btnSize.w / 60), Math.ceil(this.btnSize.h / 15)));
		this._createInput();
	},

	_createInput: function(){
		if(this._inputs.length){
			domStyle.set(this.inputNode, {
				top:"500px"
			});
			this._disconnectButton();
			this._nameIndex++;
		}

		var name;
		if(this.supports("multiple")){
			// FF3.5+, WebKit
			name = this.name+"s[]";
		}else{
			// <=IE8
			name = this.name + (this.multiple ? this._nameIndex : "");
		}
		// reset focusNode to the inputNode, so when the button is clicked,
		// the focus is properly moved to the input element
		this.focusNode = this.inputNode = domConstruct.create("input", {type:"file", name:name}, this.domNode, "first");
		if(this.supports("multiple") && this.multiple){
			domAttr.set(this.inputNode, "multiple", true);
		}
		this._inputs.push(this.inputNode);

		domStyle.set(this.inputNode, {
			position:"absolute",
			fontSize:this.inputNodeFontSize+"em",
			top:"-3px",
			right:"-3px",
			opacity:0
		});
		this._connectButton();
	},

	_connectButton: function(){
		this._cons.push(connect.connect(this.inputNode, "change", this, function(evt){
			this._files = this.inputNode.files;
			this.onChange(this.getFileList(evt));
			if(!this.supports("multiple") && this.multiple) this._createInput();
		}));

		if(this.tabIndex > -1){
			this.inputNode.tabIndex = this.tabIndex;

			this._cons.push(connect.connect(this.inputNode, "focus", this, function(){
				this.titleNode.style.outline= "1px dashed #ccc";
			}));
			this._cons.push(connect.connect(this.inputNode, "blur", this, function(){
				this.titleNode.style.outline = "";
			}));
		}
	},

	_disconnectButton: function(){
		array.forEach(this._cons, connect.disconnect);
		this._cons.splice(0,this._cons.length);
	}
});

	dojox.form.UploaderOrg = dojox.form.Uploader;
	var extensions = [dojox.form.UploaderOrg];
	dojox.form.addUploaderPlugin = function(plug){
		// summary:
		// 		Handle Uploader plugins. When the dojox.form.addUploaderPlugin() function is called,
		// 		the dojox.form.Uploader is recreated using the new plugin (mixin).
		//
		extensions.push(plug);
		declare("dojox.form.Uploader", extensions, {});
	}

	return dojox.form.Uploader;
});