wicket-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mgrigo...@apache.org
Subject [16/20] git commit: WICKET-4861 Making MultiFileUploadField use HTML5 multiple attr & remove confusing fakepath
Date Fri, 08 Feb 2013 08:24:14 GMT
WICKET-4861 Making MultiFileUploadField use HTML5 multiple attr & remove confusing fakepath


Project: http://git-wip-us.apache.org/repos/asf/wicket/repo
Commit: http://git-wip-us.apache.org/repos/asf/wicket/commit/08af7c1a
Tree: http://git-wip-us.apache.org/repos/asf/wicket/tree/08af7c1a
Diff: http://git-wip-us.apache.org/repos/asf/wicket/diff/08af7c1a

Branch: refs/heads/reference-guide
Commit: 08af7c1a3e579ab530d690036304523ace140260
Parents: 08015cd
Author: Martin Tzvetanov Grigorov <mgrigorov@apache.org>
Authored: Thu Feb 7 13:17:56 2013 +0100
Committer: Martin Tzvetanov Grigorov <mgrigorov@apache.org>
Committed: Thu Feb 7 13:17:56 2013 +0100

----------------------------------------------------------------------
 .../html/form/upload/MultiFileUploadField.java     |   30 ++++++-
 .../html/form/upload/MultiFileUploadField.js       |   64 ++++++++++++---
 .../wicket/examples/upload/MultiUploadPage.java    |    2 +-
 3 files changed, 81 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/wicket/blob/08af7c1a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.java
----------------------------------------------------------------------
diff --git a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.java
b/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.java
index 72ca2c4..45fe018 100644
--- a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.java
+++ b/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.java
@@ -102,8 +102,11 @@ public class MultiFileUploadField extends FormComponentPanel<Collection<FileUplo
 
 	private final int max;
 
+	private final boolean useMultipleAttr;
+
 	private transient String[] inputArrayCache = null;
 
+
 	/**
 	 * Constructor
 	 * 
@@ -144,14 +147,33 @@ public class MultiFileUploadField extends FormComponentPanel<Collection<FileUplo
 	 * @param model
 	 * @param max
 	 *            max number of files a user can upload
+	 */
+	public MultiFileUploadField(String id, IModel<? extends Collection<FileUpload>>
model, int max)
+	{
+		this(id, model, max, false);
+	}
+
+	/**
+	 * Constructor
+	 *
+	 * @param id
+	 * @param model
+	 * @param max
+	 *            max number of files a user can upload
+	 * @param useMultipleAttr
+	 *            true in order to use the new HTML5 "multiple" &lt;input&gt; attribute.
It will allow
+	 *            the users to select multiple files at once for multiple times if the browser
+	 *            supports it, otherwise it will work just as before - one file multiple times.
 	 * 
 	 */
 	@SuppressWarnings("unchecked")
-	public MultiFileUploadField(String id, IModel<? extends Collection<FileUpload>>
model, int max)
+	public MultiFileUploadField(String id, IModel<? extends Collection<FileUpload>>
model, int max,
+		boolean useMultipleAttr)
 	{
 		super(id, (IModel<Collection<FileUpload>>)model);
 
 		this.max = max;
+		this.useMultipleAttr = useMultipleAttr;
 
 		upload = new WebComponent("upload");
 		upload.setOutputMarkupId(true);
@@ -207,9 +229,9 @@ public class MultiFileUploadField extends FormComponentPanel<Collection<FileUplo
 		// initialize the javascript library
 		response.render(JavaScriptHeaderItem.forReference(JS));
 		response.render(OnDomReadyHeaderItem.forScript("new MultiSelector('" + getInputName() +
-			"', document.getElementById('" + container.getMarkupId() + "'), " + max + ",'" +
-			getString("org.apache.wicket.mfu.delete") + "').addElement(document.getElementById('"
+
-			upload.getMarkupId() + "'));"));
+			"', document.getElementById('" + container.getMarkupId() + "'), " + max + ", " +
+			useMultipleAttr + ", '" + getString("org.apache.wicket.mfu.delete") +
+			"').addElement(document.getElementById('" + upload.getMarkupId() + "'));"));
 	}
 
 	/**

http://git-wip-us.apache.org/repos/asf/wicket/blob/08af7c1a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
----------------------------------------------------------------------
diff --git a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
b/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
index 9848c3f..2990e22 100644
--- a/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
+++ b/wicket-core/src/main/java/org/apache/wicket/markup/html/form/upload/MultiFileUploadField.js
@@ -9,8 +9,9 @@
  *   2. Create a DIV for the output to be written to
  *      eg. <div id="files_list"></div>
  *
- *   3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum
number of files
- *      eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list'
), 3 );
+ *   3. Instantiate a MultiSelector object, passing in the DIV and (optionally) the maximum
number of files and a boolean
+ *      that specifies if the multiple attribute should be used.
+ *      eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list'
), 3, true );
  *
  *   4. Add the first element
  *      eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
@@ -37,8 +38,10 @@
  *         Shawn Parker & John Pennypacker -- http://www.fuzzycoconut.com
  *      [for duplicate name bug]
  *         'neal'
+ *      [for multiple HTML5 attribute use]
+ *         'Andrei Costescu'
  */
-function MultiSelector( eprefix, list_target,max, del_label ){
+function MultiSelector( eprefix, list_target, max, useMultipleAttr, del_label ){
 	"use strict";
 
 	// Where to write the list
@@ -53,6 +56,7 @@ function MultiSelector( eprefix, list_target,max, del_label ){
 	} else {
 		this.max = -1;
 	}
+	this.useMultipleAttr = useMultipleAttr;
 	
 	this.delete_label=del_label;
 	this.element_name_prefix=eprefix;
@@ -65,6 +69,15 @@ function MultiSelector( eprefix, list_target,max, del_label ){
 		// Make sure it's a file input element
 		if( element.tagName.toLowerCase() === 'input' && element.type.toLowerCase() ===
'file' ){
 
+			if (this.useMultipleAttr) {
+				element.multiple = this.useMultipleAttr;
+				if (Wicket.Browser.isOpera()) {
+					// in Opera 12.02, changing 'multiple' this way does not update the field
+					element.type = 'button';
+					element.type = 'file';
+				}
+			}
+
 			// Element name -- what number am I?
 			element.name = this.element_name_prefix + "_mf_"+this.id++;
 
@@ -115,7 +128,9 @@ function MultiSelector( eprefix, list_target,max, del_label ){
 	this.addListRow = function( element ){
 
 		// Row div
-		var new_row = document.createElement( 'div' );
+		var new_row = document.createElement('tr');
+		var contentsColumn = document.createElement('td');
+		var buttonColumn = document.createElement('td');
 
 		// Delete button
 		var new_row_button = document.createElement( 'input' );
@@ -129,16 +144,16 @@ function MultiSelector( eprefix, list_target,max, del_label ){
 		new_row_button.onclick= function(){
 
 			// Remove element from form
-			this.parentNode.element.parentNode.removeChild( this.parentNode.element );
+			this.parentNode.parentNode.element.parentNode.removeChild( this.parentNode.parentNode.element
);
 
 			// Remove this row from the list
-			this.parentNode.parentNode.removeChild( this.parentNode );
+			this.parentNode.parentNode.parentNode.removeChild( this.parentNode.parentNode );
 
 			// Decrement counter
-			this.parentNode.element.multi_selector.count--;
+			this.parentNode.parentNode.element.multi_selector.count--;
 
 			// Re-enable input element (if it's disabled)
-			this.parentNode.element.multi_selector.current_element.disabled = false;
+			this.parentNode.parentNode.element.multi_selector.current_element.disabled = false;
 
 			// Appease Safari
 			//    without it Safari wants to reload the browser window
@@ -147,14 +162,43 @@ function MultiSelector( eprefix, list_target,max, del_label ){
 		};
 
 		// Set row value
-		new_row.innerHTML = element.value;
+		contentsColumn.innerHTML = this.getOnlyFileNames(element);
+		new_row.appendChild( contentsColumn );
 
 		// Add button
-		new_row.appendChild( new_row_button );
+		new_row_button.style.marginLeft = '20px';
+		buttonColumn.appendChild( new_row_button );
+		new_row.appendChild( buttonColumn );
 
 		// Add it to the list
 		this.list_target.appendChild( new_row );
 		
 	};
 
+	this.getOnlyFileNames = function(inputElement)
+	{
+		if (inputElement.files && inputElement.files.length > 0)
+		{
+			var files = inputElement.files;
+			var retVal = "";
+			for (var i = 0; i < files.length; i++)
+			{
+				retVal += this.getOnlyFileName(files[i].name) + '<br>';
+			}
+			return retVal.slice(0, retVal.length - 4);
+		}
+		else
+		{
+			return this.getOnlyFileName(inputElement.value);
+		}
+	};
+
+	this.getOnlyFileName = function(stringValue)
+	{
+		var separatorIndex1 = stringValue.lastIndexOf('\\');
+		var separatorIndex2 = stringValue.lastIndexOf('/');
+		separatorIndex1 = Math.max(separatorIndex1, separatorIndex2);
+		return separatorIndex1 >= 0 ? stringValue.slice(separatorIndex1 + 1, stringValue.length)
: stringValue;
+	};
+
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/wicket/blob/08af7c1a/wicket-examples/src/main/java/org/apache/wicket/examples/upload/MultiUploadPage.java
----------------------------------------------------------------------
diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/upload/MultiUploadPage.java
b/wicket-examples/src/main/java/org/apache/wicket/examples/upload/MultiUploadPage.java
index 4a53f15..8debc65 100644
--- a/wicket-examples/src/main/java/org/apache/wicket/examples/upload/MultiUploadPage.java
+++ b/wicket-examples/src/main/java/org/apache/wicket/examples/upload/MultiUploadPage.java
@@ -121,7 +121,7 @@ public class MultiUploadPage extends WicketExamplePage
 
 			// Add one multi-file upload field
 			add(new MultiFileUploadField("fileInput", new PropertyModel<Collection<FileUpload>>(
-				this, "uploads"), 5));
+				this, "uploads"), 5, true));
 
 			// Set maximum size to 100K for demo purposes
 			setMaxSize(Bytes.kilobytes(100));


Mime
View raw message