You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by mg...@apache.org on 2013/02/08 09:24:14 UTC
[16/20] git commit: WICKET-4861 Making MultiFileUploadField use HTML5
multiple attr & remove confusing fakepath
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 <mg...@apache.org>
Authored: Thu Feb 7 13:17:56 2013 +0100
Committer: Martin Tzvetanov Grigorov <mg...@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" <input> 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));