Work in progress on file upload

etemplate/js/et2_widget_date.js

@@ -77,11 +77,17 @@ var et2_date = et2_inputWidget.extend({
 			node.addClass("et2_date");
 
 			var _this = this;
+			var dateformat = egw.preference("dateformat");
+			if (!dateformat) dateformat = "Y-m-d";
+			dateformat = dateformat.replace("Y","%Y").replace("d","%d").replace("m","%m").replace("M", "%b");
+
 			var setup = {
 				inputField: this.options.id,
 				button: this.button.attr("id"),
 				showsTime: false,
-				onUpdate: function(_value) {_this.set_value(_value)}
+				onUpdate: function(_value) {_this.set_value(_value)},
+				daFormat: dateformat,
+				firstDay: egw.preference("weekdaystarts","calendar")
 			};
 			window.setTimeout(function() {
 				Calendar.setup(setup);

etemplate/js/et2_widget_file.js

@@ -0,0 +1,130 @@
+/**
+ * eGroupWare eTemplate2 - JS Number object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	et2_core_inputWidget;
+*/
+
+/**
+ * Class which implements file upload
+ */ 
+var et2_file = et2_inputWidget.extend({
+
+	attributes: {
+		"multiple": {
+			"name": "Multiple files",
+			"type": "boolean",
+			"default": false,
+			"description": "Allow the user to select more than one file to upload at a time.  Subject to browser support."
+		},
+		"max_file_size": {
+			"name": "Maximum file size",
+			"type": "integer",
+			"default":"8388608",
+			"description": "Largest file accepted, in bytes.  Subject to server limitations.  8Mb = 8388608"
+		},
+		"blur": {
+                        "name": "Placeholder",
+                        "type": "string",
+                        "default": "",
+                        "description": "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
+		},
+		"progress": {
+			"name": "Progress node",
+			"type": "string",
+			"default": et2_no_init,
+			"description": "The ID of an alternate node (div) to display progress and results."
+		}
+	},
+
+	init: function() {
+		this._super.apply(this, arguments)
+
+		this.node = null;
+
+		this.createInputWidget();
+	},
+	
+	createInputWidget: function() {
+		this.node = $j(document.createElement("div")).addClass("et2_file");
+		this.input = $j(document.createElement("input"))
+			.attr("type", "file").attr("placeholder", this.options.blur)
+			.appendTo(this.node)
+			.change(this, this.change);
+		this.progress = this.options.progress ? 
+			$j(document.getElementById(this.options.progress)) : 
+			$j(document.createElement("div")).appendTo(this.node);
+		this.progress.addClass("progress");
+
+		if(this.options.multiple) {
+			this.input.attr("multiple","multiple");
+		}
+		this.setDOMNode(this.node[0]);
+	},
+	
+	getInputNode: function() {
+		return this.input[0];
+	},
+
+	/**
+	 * User has selected some files file, send them off
+	 */
+	change: function(e) {
+console.log(e);		
+		if(!e.target.files || e.target.files.length == 0) return;
+
+		for(var i = 0; i < e.target.files.length; i++) {
+			var file = e.target.files[i];
+
+			// Add to list
+			var status = this.createStatus(file);
+			this.progress.append(status);
+
+			// Check if OK
+			if(file.size > this.options.max_file_size) {
+				// TODO: Try to slice into acceptable pieces
+				status.addClass("ui-state-error");
+				this.showMessage(egw.lang("File is too large."), "validation_error");
+				var self = this;
+				window.setTimeout(function() {self.hideMessage(true); status.remove();}, 5000);
+			}
+		}
+
+		// Reset field
+		e.data.input.attr("type", "input").attr("type","file");
+	},
+
+	/**
+	 * Upload a single file asyncronously
+	 */
+	_upload_file: function(file) {
+		// Start upload
+	console.log(this, file);
+		
+	},
+
+	/**
+	 * Creates the elements used for displaying the file, and it's upload status
+	 *
+	 * @param file A JS File object
+	 * @return a jQuery object with the elements
+	 */
+	createStatus: function(file) {
+		return $j("<li>"+file.name+"<div class='progressBar'><p/></div></li>");
+	}
+	
+});
+
+et2_register_widget(et2_file, ["file"]);
+

etemplate/js/et2_widget_number.js

@@ -37,6 +37,14 @@ var et2_number = et2_textbox.extend({
 			"type": "integer",
 			"default": et2_no_init,
 			"description": "Maximum allowed value"
+		},
+		"precision": {
+			// TODO: Implement this in some nice way other than HTML5's step attribute
+			"name": "Precision",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Allowed precision - # of decimal places",
+			"ignore": true 
 		}
 	},
 
@@ -59,6 +67,14 @@ var et2_number = et2_textbox.extend({
 		} else {
 			this.input.attr("min",this.min);
 		}
+	},
+	set_max: function(_value) {
+		this.max = _value;
+		if(this.max == null) {
+			this.input.removeAttr("max");
+		} else {
+			this.input.attr("max",this.max);
+		}
 	}
 });
 

etemplate/js/etemplate2.js

@@ -30,6 +30,8 @@
 	et2_widget_tabs;
 	et2_widget_hrule;
 	et2_widget_image;
+	et2_widget_upload;
+	et2_widget_file;
 
 	et2_extension_nextmatch;
 

etemplate/js/test/et2_test_file_upload.xet

@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!-- $Id$ -->
+<overlay>
+	<template id="test.file_upload" template="" lang="" group="0" version="">
+		<vbox cols="1" rows="1">
+			<file blur="Just one" label="Select a file" id="single"/>
+			<file blur="More than one" label="Select files" id="multiple" multiple="true"/>
+		</vbox>
+	</template>
+</overlay>

etemplate/js/test/test.php

@@ -35,6 +35,7 @@ Testing from inside framework, so JS includes work
                         <a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
 			<a href="#" onclick="open_xet('et2_test_date.xet');">Date/time widgits</a>
                         <a href="#" onclick="open_xet('et2_test_input_validator.xet', validation_data);">Validation</a>
+                        <a href="#" onclick="open_xet('et2_test_file_upload.xet');">Upload</a>
                 </div>
                 <div class="header">ETemplate2 container:</div>
                 <div id="time"></div>