| /******************************************************************************* |
| * Copyright (c) 2011, 2012 EclipseSource and others. |
| * All rights reserved. This program and the accompanying materials |
| * are made available under the terms of the Eclipse Public License v1.0 |
| * which accompanies this distribution, and is available at |
| * http://www.eclipse.org/legal/epl-v10.html |
| * |
| * Contributors: |
| * EclipseSource - initial API and implementation |
| ******************************************************************************/ |
| |
| qx.Class.define( "rwt.widgets.FileUpload", { |
| |
| extend : rwt.widgets.Button, |
| |
| construct : function() { |
| this.base( arguments, "push" ); |
| this.setAppearance( "file-upload" ); |
| this.addEventListener( "insertDom", this._layoutInputElement, this ); |
| this.addEventListener( "elementOver", this._onMouseOverElement, this ); |
| this._formElement = null; |
| this._inputElement = null; |
| this._iframe = null; |
| this._cursor = ""; |
| this.__onValueChange = rwt.util.Function.bind( this._onValueChange, this ); |
| this.setEnableElementFocus( false ); |
| this._createIframeWidget(); |
| }, |
| |
| destruct : function() { |
| this._formElement = null; |
| this._inputElement = null; |
| }, |
| |
| members : { |
| |
| submit : function( url ) { |
| if( typeof url !== "string" ) { |
| throw new Error( "No url given!" ); |
| } |
| if( this._getFileName() === "" ) { |
| throw new Error( "No file selected!" ); |
| } |
| if( this._formElement === null ) { |
| throw new Error( "Form element not created!" ); |
| } |
| this._formElement.setAttribute( "action", url ); |
| this._formElement.submit(); |
| }, |
| |
| destroy : function() { |
| this.base( arguments ); |
| this._iframe.destroy(); |
| }, |
| |
| //////////// |
| // Internals |
| |
| _createSubelements : function() { |
| // NOTE: MultiCellWidget uses innerHTML, therefore this must be done here: |
| if( this._formElement === null ) { |
| this.base( arguments ); |
| this._createFormElement(); |
| this._createInputElement(); |
| } else { |
| this._formElement.removeChild( this._inputElement ); |
| this._getTargetNode().removeChild( this._formElement ); |
| this.base( arguments ); |
| this._getTargetNode().appendChild( this._formElement ); |
| this._formElement.appendChild( this._inputElement ); |
| } |
| }, |
| |
| _createFormElement : function() { |
| this._formElement = document.createElement( "form" ); |
| this._formElement.setAttribute( "target", this._getFrameName() ); |
| this._formElement.setAttribute( "method", "POST" ); |
| if( rwt.client.Client.isMshtml() ) { |
| this._formElement.setAttribute( "encoding", "multipart/form-data" ); |
| } else { |
| this._formElement.setAttribute( "enctype", "multipart/form-data" ); |
| } |
| this._getTargetNode().appendChild( this._formElement ); |
| }, |
| |
| _createInputElement : function() { |
| this._inputElement = document.createElement( "input" ); |
| this._inputElement.style.position = "absolute"; |
| this._inputElement.setAttribute( "type", "file" ); |
| this._inputElement.setAttribute( "name", "file" ); |
| this._inputElement.setAttribute( "size", "1" ); |
| this._inputElement.style.cursor = this._cursor; |
| this._inputElement.onchange = this.__onValueChange; |
| org.eclipse.rwt.HtmlUtil.setOpacity( this._inputElement, 0 ); |
| this._formElement.appendChild( this._inputElement ); |
| }, |
| |
| _createIframeWidget : function() { |
| this._iframe = new rwt.widgets.base.Iframe(); |
| // NOTE: The frame-content should only be changed by the form: |
| this._iframe.setSource( "about:blank" ); |
| this._iframe.setVisibility( false ); |
| this._iframe.setWidth( 0 ); |
| this._iframe.setHeight( 0 ); |
| this._iframe.setFrameName( this._getFrameName() ); |
| this._iframe.addToDocument(); |
| }, |
| |
| _onValueChange : function( event ) { |
| // TODO [tb] : implement setHasValueChangedListener? |
| var fileName = this._formatFileName( this._getFileName() ); |
| if( !org.eclipse.swt.EventUtil.getSuspended() ) { |
| var req = rwt.remote.Server.getInstance(); |
| var widgetManager = org.eclipse.swt.WidgetManager.getInstance(); |
| var id = widgetManager.findIdByWidget( this ); |
| req.addParameter( id + ".fileName", fileName ); |
| req.send(); |
| } |
| }, |
| |
| _getFileName : function() { |
| return this._inputElement.value; |
| }, |
| |
| //////////// |
| // Layouting |
| |
| _layoutPost : function( changes ) { |
| this.base( arguments, changes ); |
| if( changes.width || changes.height ) { |
| this._layoutInputElement(); |
| } |
| }, |
| |
| _layoutInputElement : function() { |
| if( this.getEnabled() && this.isSeeable() && !rwt.client.Client.isMobileSafari() ) { |
| //Assumed maximal padding between input button and input outer dimensions: |
| var padding = 10; |
| this._layoutInputElementHorizontal( padding ); |
| this._layoutInputElementVertical( padding ); |
| } |
| }, |
| |
| _layoutInputElementHorizontal : function( padding ) { |
| // Respect assumed maximal relative width of the input textfield: |
| var inputButtonPercentage = 0.6; |
| // NOTE : This is how inputWidth is calculated: |
| // widgetWidth + padding * 2 = 0.6 * inputWidth |
| // inputWidth = ( widthWidth + padding * 2 ) / 0.6 |
| var widgetWidth = this.getBoxWidth(); |
| var inputTargetWidth = ( widgetWidth + padding * 2 ) |
| / ( inputButtonPercentage ); |
| var fontSize = inputTargetWidth / 10; |
| this._inputElement.style.fontSize = fontSize; |
| var iterations = 0; |
| while( this._inputElement.offsetWidth <= inputTargetWidth ) { |
| fontSize += 10; |
| this._inputElement.style.font = fontSize + "px monospace"; |
| iterations++; |
| if( iterations > 100 ) { |
| // crash the rap-application instead of freezing the browser. |
| var msg = "Failed to force input-element width."; |
| throw new Error( msg ); |
| } |
| } |
| var actualInputWidth = this._inputElement.offsetWidth; |
| var inputLeft = widgetWidth - actualInputWidth + padding; |
| this._inputElement.style.left = inputLeft + "px"; |
| }, |
| |
| _layoutInputElementVertical : function( padding ) { |
| var widgetHeight = this.getBoxHeight(); |
| this._inputElement.style.height = ( widgetHeight + padding * 2 ) + "px"; |
| this._inputElement.style.top = ( padding * -1 ) + "px"; |
| }, |
| |
| setStyleProperty : function( propName, value ) { |
| if( propName === "cursor" ) { |
| this._cursor = value; |
| if( this._inputElement != null ) { |
| // NOTE : This will have no effect in firefox. |
| this._inputElement.style.cursor = value; |
| } |
| } else { |
| this.base( arguments, propName, value ); |
| } |
| }, |
| |
| _applyEnabled : function( value, oldValue ) { |
| this.base( arguments, value, oldValue ); |
| if( this._inputElement ) { |
| this._inputElement.style.display = value ? "" : "none"; |
| this._layoutInputElement(); |
| } |
| }, |
| |
| _afterAppear : function() { |
| this.base( arguments ); |
| this._layoutInputElement(); |
| }, |
| |
| //////////////// |
| // Mouse-control |
| |
| // NOTE : In contrast to other widgets, the border does not trigger the |
| // expected function, adapt state-behavior accordingly: |
| |
| _onMouseOver : function( event ) { |
| if( event.getDomTarget() === this._inputElement ) { |
| this.base( arguments, event ); |
| } |
| }, |
| |
| _onMouseOverElement : function( event ) { |
| if( event.getDomTarget() === this._inputElement ) { |
| this._onMouseOver( event ); |
| } |
| }, |
| |
| _onMouseDown : function( event ) { |
| if( event.getDomTarget() === this._inputElement ) { |
| this.base( arguments, event ); |
| } |
| if( rwt.client.Client.getBrowser() === "chrome") { |
| // Chrome looses keyboard control on mouse-focus, see _ontabfocus. |
| this._onBlur(); |
| } |
| }, |
| |
| _onMouseUp : function( event ) { |
| if( event.getDomTarget() === this._inputElement || this.hasState( "abandoned" ) ) { |
| this.base( arguments, event ); |
| } |
| }, |
| |
| ///////////////////////// |
| // Focus/keyboard-control |
| |
| // NOTE : Since the browse-button can't be triggered programatically, |
| // supporting native keyboard-control is necessary, which is a bit |
| // problematic. |
| _onFocus : function( event ) { |
| this.base( arguments, event ); |
| this._inputElement.focus(); |
| }, |
| |
| // NOTE : key-handling interferes with native keyboard control. This |
| // disables the "pressed" state, but is still the lesser evil. |
| _onKeyDown : rwt.util.Function.returnTrue, |
| _onKeyUp : rwt.util.Function.returnTrue, |
| |
| // NOTE : In chrome (windows?), the input-element needs to be focused using |
| // tabulator for keyboard control to work. To minimize confusion, |
| // do not display focus frame in other cases. |
| _ontabfocus : function() { |
| if( rwt.client.Client.getBrowser() === "chrome" ) { |
| this._showFocusIndicator( true ); |
| } |
| }, |
| |
| _showFocusIndicator : function( allow ) { |
| var isChrome = rwt.client.Client.getBrowser() === "chrome"; |
| if( !isChrome || allow ) { |
| var focusIndicator = org.eclipse.rwt.FocusIndicator.getInstance(); |
| var node = this.getCellNode( 2 ) != null |
| ? this.getCellNode( 2 ) |
| : this.getCellNode( 1 ); |
| focusIndicator.show( this, "FileUpload-FocusIndicator", node ); |
| } |
| }, |
| |
| ///////// |
| // Helper |
| |
| _formatFileName : function( fileName ) { |
| var result = fileName; |
| if( result.indexOf( "\\" ) != -1 ) { |
| result = result.substr( result.lastIndexOf( "\\" ) + 1 ); |
| } else if( result.indexOf( "/" ) != -1 ) { |
| result = result.substr( result.lastIndexOf( "/" ) + 1 ); |
| } |
| return result; |
| }, |
| |
| _getFrameName : function() { |
| return "FileUpload_" + this.toHashCode(); |
| } |
| |
| } |
| |
| } ); |
