Context Navigation

source: Dev/trunk/src/client/dojox/form/Uploader.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 12.0 KB

Rev	Line
[483]	1	define([
	2	"dojo/_base/kernel",
	3	"dojo/_base/declare",
	4	"dojo/_base/lang",
	5	"dojo/_base/array",
	6	"dojo/_base/connect",
	7	"dojo/_base/window",
	8	"dojo/dom-style",
	9	"dojo/dom-class",
	10	"dojo/dom-geometry",
	11	"dojo/dom-attr",
	12	"dojo/dom-construct",
	13	"dojo/dom-form",
	14	"dijit",
	15	"dijit/form/Button",
	16	"./uploader/_Base",
	17	"./uploader/_HTML5",
	18	"./uploader/_IFrame",
	19	"./uploader/_Flash",
	20	"dojo/i18n!./nls/Uploader",
	21	"dojo/text!./resources/Uploader.html"
	22	],function(kernel, declare, lang, array, connect, win, domStyle, domClass, domGeometry, domAttr, domConstruct,
	23	domForm, dijit, Button, Base, HTML5, IFrame, Flash, res, template){
	24
	25	// TODO:
	26	// i18n
	27	// label via innerHTML
	28	// Doc and or test what can be extended.
	29	// Doc custom file events
	30	// Use new FileReader() for thumbnails
	31	// flashFieldName should default to Flash
	32	// get('value'); and set warning
	33	// Make it so URL can change (current set to Flash on build)
	34	//
	35
	36	return declare("dojox.form.Uploader", [Base, Button, HTML5, IFrame, Flash], {
	37	// summary:
	38	// A widget that creates a stylable file-input button, with optional multi-file selection,
	39	// using only HTML elements. Non-HTML5 browsers have fallback options of Flash or an iframe.
	40	//
	41	// description:
	42	// A bare-bones, stylable file-input button, with optional multi-file selection. The list
	43	// of files is not displayed, that is for you to handle by connecting to the onChange
	44	// event, or use the dojox.form.uploader.FileList.
	45	//
	46	// Uploader without plugins does not have any ability to upload - it is for use in forms
	47	// where you handle the upload either by a standard POST or with Ajax using an iFrame. This
	48	// class is for convenience of multiple files only. No progress events are available.
	49	//
	50	// If the browser supports a file-input with the "multiple" attribute, that will be used.
	51	// If the browser does not support "multiple" (ergo, IE) multiple inputs are used,
	52	// one for each selection.
	53	//
	54	// Version: 1.6
	55
	56
	57	// uploadOnSelect: Boolean
	58	// If true, uploads immediately after a file has been selected. If false,
	59	// waits for upload() to be called.
	60	uploadOnSelect:false,
	61
	62	// tabIndex: Number\|String
	63	// The tab order in the DOM.
	64	tabIndex:0,
	65
	66	// multiple: Boolean
	67	// If true and flash mode, multiple files may be selected from the dialog.
	68	multiple:false,
	69
	70	// label: String
	71	// The text used in the button that when clicked, opens a system Browse Dialog.
	72	label:res.label,
	73
	74	// url: String
	75	// The url targeted for upload. An absolute URL is preferred. Relative URLs are
	76	// changed to absolute.
	77	url:"",
	78
	79	// name: String
	80	// The name attribute needs to end with square brackets: [] as this is the standard way
	81	// of handling an attribute "array". This requires a slightly different technique on the
	82	// server.
	83	name:"uploadedfile",
	84
	85	// flashFieldName: String
	86	// If set, this will be the name of the field of the flash uploaded files that the server
	87	// is expecting. If not set, "Flash" is appended to the "name" property.
	88	flashFieldName:"",
	89
	90	// force: String
	91	// options: form, html5, iframe, flash
	92	// Empty string defaults to html5 if available, and iframe if not.
	93	// Use "flash" to always use Flash (and hopefully force the user to download the plugin
	94	// if they don't have it).
	95	// Use "iframe" to always use an iframe, and never flash nor html5. Sometimes preferred
	96	// for consistent results.
	97	// Use "form" to not use ajax and post to a page.
	98	force:"",
	99
	100	// uploadType: String [readonly]
	101	// The type of uploader being used. As an alternative to determining the upload type on the
	102	// server based on the fieldName, this property could be sent to the server to help
	103	// determine what type of parsing should be used.
	104	// This is set based on the force property and what features are available in the browser.
	105	uploadType:"",
	106
	107	// showInput: String [const]
	108	// Position to show an input which shows selected filename(s). Possible
	109	// values are "before", "after", which specifies where the input should
	110	// be placed with reference to the containerNode which contains the
	111	// label). By default, this is empty string (no such input will be
	112	// shown). Specify showInput="before" to mimic the look&feel of a
	113	// native file input element.
	114	showInput: "",
	115
	116	// focusedClass: String
	117	// The class applied to the button when it is focused (via TAB key)
	118	focusedClass:"dijitButtonHover",
	119
	120	_nameIndex:0,
	121
	122	templateString: template,
	123
	124	baseClass: 'dijitUploader '+Button.prototype.baseClass,
	125
	126	postMixInProperties: function(){
	127	this._inputs = [];
	128	this._cons = [];
	129	this.force = this.force.toLowerCase();
	130	if(this.supports("multiple")){
	131	this.uploadType = this.force === 'form' ? 'form' : 'html5';
	132	}else{
	133	this.uploadType = this.force === 'flash' ? 'flash' : 'iframe';
	134	}
	135
	136	this.inherited(arguments);
	137	},
	138	buildRendering: function(){
	139	this.inherited(arguments);
	140	domStyle.set(this.domNode, {
	141	overflow:"hidden",
	142	position:"relative"
	143	});
	144	this._buildDisplay();
	145	//change the button node not occupy tabIndex: the real file input
	146	//will have tabIndex set
	147	domAttr.set(this.titleNode, 'tabIndex', -1);
	148	},
	149	_buildDisplay: function(){
	150	if(this.showInput){
	151	this.displayInput = domConstruct.create('input', {
	152	'class':'dijitUploadDisplayInput',
	153	'tabIndex':-1, 'autocomplete':'off',
	154	'role':'presentation'},
	155	this.containerNode, this.showInput);
	156	//schedule the attachpoint to be cleaned up on destroy
	157	this._attachPoints.push('displayInput');
	158	this.connect(this,'onChange', function(files){
	159	var i=0,l=files.length, f, r=[];
	160	while((f=files[i++])){
	161	if(f && f.name){
	162	r.push(f.name);
	163	}
	164	}
	165	this.displayInput.value = r.join(', ');
	166	});
	167	this.connect(this,'reset', function(){
	168	this.displayInput.value = '';
	169	});
	170	}
	171	},
	172
	173	startup: function(){
	174	if(this._buildInitialized){
	175	return;
	176	}
	177	this._buildInitialized = true;
	178	this._getButtonStyle(this.domNode);
	179	this._setButtonStyle();
	180	this.inherited(arguments);
	181	},
	182
	183	/*************************
	184	* Public Events *
	185	*************************/
	186
	187	onChange: function(/Array/ fileArray){
	188	// summary:
	189	// stub to connect
	190	// Fires when files are selected
	191	// Event is an array of last files selected
	192	},
	193
	194	onBegin: function(/Array/ dataArray){
	195	// summary:
	196	// Fires when upload begins
	197	},
	198
	199	onProgress: function(/Object/ customEvent){
	200	// summary:
	201	// Stub to connect
	202	// Fires on upload progress. Event is a normalized object of common properties
	203	// from HTML5 uploaders and the Flash uploader. Will not fire for IFrame.
	204	// customEvent:
	205	// - bytesLoaded: Number:
	206	// Amount of bytes uploaded so far of entire payload (all files)
	207	// - bytesTotal: Number:
	208	// Amount of bytes of entire payload (all files)
	209	// - type: String:
	210	// Type of event (progress or load)
	211	// - timeStamp: Number:
	212	// Timestamp of when event occurred
	213	},
	214
	215	onComplete: function(/Object/ customEvent){
	216	// summary:
	217	// stub to connect
	218	// Fires when all files have uploaded
	219	// Event is an array of all files
	220	this.reset();
	221	},
	222
	223	onCancel: function(){
	224	// summary:
	225	// Stub to connect
	226	// Fires when dialog box has been closed
	227	// without a file selection
	228	},
	229
	230	onAbort: function(){
	231	// summary:
	232	// Stub to connect
	233	// Fires when upload in progress was canceled
	234	},
	235
	236	onError: function(/Object or String/ evtObject){
	237	// summary:
	238	// Fires on errors
	239
	240	// FIXME: Unsure of a standard form of error events
	241	},
	242
	243	/*************************
	244	* Public Methods *
	245	*************************/
	246
	247	upload: function(/Object?/ formData){
	248	// summary:
	249	// When called, begins file upload. Only supported with plugins.
	250	formData = formData \|\| {};
	251	formData.uploadType = this.uploadType;
	252	this.inherited(arguments);
	253	},
	254
	255	submit: function(/form Node?/ form){
	256	// summary:
	257	// If Uploader is in a form, and other data should be sent along with the files, use
	258	// this instead of form submit.
	259	form = !!form ? form.tagName ? form : this.getForm() : this.getForm();
	260	var data = domForm.toObject(form);
	261	data.uploadType = this.uploadType;
	262	this.upload(data);
	263	},
	264
	265	reset: function(){
	266	// summary:
	267	// Resets entire input, clearing all files.
	268	// NOTE:
	269	// Removing individual files is not yet supported, because the HTML5 uploaders can't
	270	// be edited.
	271	// TODO:
	272	// Add this ability by effectively, not uploading them
	273	//
	274	delete this._files;
	275	this._disconnectButton();
	276	array.forEach(this._inputs, domConstruct.destroy, dojo);
	277	this._inputs = [];
	278	this._nameIndex = 0;
	279	this._createInput();
	280	},
	281
	282	getFileList: function(){
	283	// summary:
	284	// Returns a list of selected files.
	285
	286	var fileArray = [];
	287	if(this.supports("multiple")){
	288	array.forEach(this._files, function(f, i){
	289	fileArray.push({
	290	index:i,
	291	name:f.name,
	292	size:f.size,
	293	type:f.type
	294	});
	295	}, this);
	296	}else{
	297	array.forEach(this._inputs, function(n, i){
	298	if(n.value){
	299	fileArray.push({
	300	index:i,
	301	name:n.value.substring(n.value.lastIndexOf("\\")+1),
	302	size:0,
	303	type:n.value.substring(n.value.lastIndexOf(".")+1)
	304	});
	305	}
	306	}, this);
	307
	308	}
	309	return fileArray; // Array
	310	},
	311
	312	/*********************************************
	313	* Private Property. Get off my lawn. *
	314	*********************************************/
	315
	316	_getValueAttr: function(){
	317	// summary:
	318	// Internal. To get disabled use: uploader.get("disabled");
	319	return this.getFileList();
	320	},
	321
	322	_setValueAttr: function(disabled){
	323	console.error("Uploader value is read only");
	324	},
	325
	326	_setDisabledAttr: function(disabled){
	327	// summary:
	328	// Internal. To set disabled use: uploader.set("disabled", true);
	329	if(this.disabled == disabled \|\| !this.inputNode){ return; }
	330	this.inherited(arguments);
	331	domStyle.set(this.inputNode, "display", disabled ? "none" : "");
	332	},
	333
	334	_getButtonStyle: function(node){
	335	this.btnSize = {w:domStyle.get(node,'width'), h:domStyle.get(node,'height')};
	336	},
	337
	338	_setButtonStyle: function(){
	339	this.inputNodeFontSize = Math.max(2, Math.max(Math.ceil(this.btnSize.w / 60), Math.ceil(this.btnSize.h / 15)));
	340	this._createInput();
	341	},
	342
	343	_getFileFieldName: function(){
	344	var name;
	345	if(this.supports("multiple") && this.multiple){
	346	name = this.name+"s[]";
	347	}else{
	348	// <=IE8
	349	name = this.name + (this.multiple ? this._nameIndex : "");
	350	}
	351	return name;
	352	},
	353
	354	_createInput: function(){
	355	if(this._inputs.length){
	356	domStyle.set(this.inputNode, {
	357	top:"500px"
	358	});
	359	this._disconnectButton();
	360	this._nameIndex++;
	361	}
	362	var name = this._getFileFieldName();
	363	// reset focusNode to the inputNode, so when the button is clicked,
	364	// the focus is properly moved to the input element
	365	this.focusNode = this.inputNode = domConstruct.create("input", {type:"file", name:name, "aria-labelledby":this.id+"_label"}, this.domNode, "first");
	366	if(this.supports("multiple") && this.multiple){
	367	domAttr.set(this.inputNode, "multiple", true);
	368	}
	369	this._inputs.push(this.inputNode);
	370
	371	domStyle.set(this.inputNode, {
	372	position:"absolute",
	373	fontSize:this.inputNodeFontSize+"em",
	374	top:"-3px",
	375	right:"-3px",
	376	opacity:0
	377	});
	378	this._connectButton();
	379	},
	380
	381	_connectButton: function(){
	382	this._cons.push(connect.connect(this.inputNode, "change", this, function(evt){
	383	this._files = this.inputNode.files;
	384	this.onChange(this.getFileList(evt));
	385	if(!this.supports("multiple") && this.multiple) this._createInput();
	386	}));
	387
	388	if(this.tabIndex > -1){
	389	this.inputNode.tabIndex = this.tabIndex;
	390
	391	this._cons.push(connect.connect(this.inputNode, "focus", this, function(){
	392	domClass.add(this.domNode, this.focusedClass);
	393	}));
	394	this._cons.push(connect.connect(this.inputNode, "blur", this, function(){
	395	domClass.remove(this.domNode, this.focusedClass);
	396	}));
	397	}
	398	},
	399
	400	_disconnectButton: function(){
	401	array.forEach(this._cons, connect.disconnect);
	402	this._cons.splice(0,this._cons.length);
	403	}
	404	});
	405
	406	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: