Updated Branches: refs/heads/master e9df9fbc9 -> 08af7c1a3
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/master Commit: 08af7c1a3e579ab530d690036304523ace140260 Parents: 08015cd Author: Martin Tzvetanov Grigorov <[email protected]> Authored: Thu Feb 7 13:17:56 2013 +0100 Committer: Martin Tzvetanov Grigorov <[email protected]> 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));
