form.File Class
File upload component
This components submits the file to an iframe. The url of this iframe is by default.
LUDOJS_CONFIG.fileupload.url. You can override it with remote.url config property.
The file upload component should be implemented this way:
1) File is uploaded to the server
2) You copy the file to a temporary area and save a reference to it in a database
3) You return the reference to the file, example id of database row(e.g. 1000)
4) The reference(1000) will be sent back from the server and saved as value of file upload component.
A PHP implementation of the PHP code of this can be obtained by contacting post[at]dhtmlgoodies.com.
Constructor
form.File
-
config
Parameters:
-
config
Object
Example:
...
children:[{
type:'form.File', label:'Pgn File', name:'pgnfile', required:true, labelButton:'Find Pgn file', buttonWidth:100
}]
...
is example of code used to add a file components as child of a component.
When the file is uploaded to the server(happens instantly when instantUpload is set to true), the name of the file will be sent in POST variable ludo-file-upload-name. The actual file should be available in the FILES array sent to the server.
Example of code sent to server:
{
ludo-file-upload-name : '
Example of PHP Code used to handle the file:
if(isset($_POST['ludo-file-upload-name'])){
header('Content-Type: text/html; charset=utf-8');
$uploadInfo = FileUpload::uploadFile($_FILES[$_POST['ludo-file-upload-name']]);
$data = array('success' => true, 'message' => '', 'data' => $uploadInfo);
die(utf8_encode(json_encode($data)));
}
Response from server may look like this:
{
success : true,
value : '100'
}
where success indicates if the upload was successful and value is a reference to the file. When the form with this file upload component is later submitted,
Item Index
Methods
- addChild
- addChildren
- clear
- commit
- disable
- dispose
- disposeAllChildren
- enable
- getAllChildren
- getBody()
- getCanvas
- getChild
- getChildren
- getClassChildren
- getEl()
- getForm *
- getFormEl
- getHeight
- getParent
- getSocket
- getTitle
- getValue
- getWidth
- hasChildren
- hide
- hideAfterDelay
- insertJSON
- isCollapsible
- isDirty
- isHidden
- isValid
- isVisible
- load
- ludoConfig
- ludoDOM
- ludoEvents
- ludoRendered
- reset
- resize
- setHtml
- setTitle
- setValue
- show
- showChild
Properties
Attributes
Methods
addChild
-
child.
-
insertAt
-
pos
Add a child component. The method will returned the created component.
Parameters:
Returns:
addChildren
-
children
Add child components Only param is an array of child objects. A Child object can be a component or a JSON object describing the component.
Parameters:
-
children
Array
Returns:
clear
()
Reset value back to the original value sent(constructor value)
Returns:
commit
()
Update initial value to current value. These actions will always trigger a commit
- Form or Model submission
- Fetching new record for a ludo.model.Model
Returns:
disable
()
Disable form element
Returns:
dispose
-
view
Dispose LudoJS components
Parameters:
-
view
Core
disposeAllChildren
()
Remove all children
Returns:
enable
()
Enable form element
Returns:
getAllChildren
()
Return array of all child components, including grand children
Returns:
getBody()
()
Object
Return reference to the "body" DOM element. A component consists of one container and inside it a DOM "body" element
Returns:
getCanvas
()
canvas.Canvas
Returns drawable Canvas/SVG
Returns:
Example:
var win = new ludo.Window({ id:'myWindow', left:50, top:50, width:410, height:490, title:'Canvas', css:{ 'background-color':'#FFF' } }); // Creating style sheet var paint = new ludo.canvas.Paint({ css:{ 'fill':'#FFFFFF', 'stroke':'#DEF', 'stroke-width':'5' } }); var canvas = win.getCanvas(); canvas.adopt(new ludo.canvas.Node('line', { x1:100, y1:100, x2:200, y2:200, "class":paint }));
getChildren
()
Return Array reference to direct direct child components.
Returns:
getClassChildren
()
Array | Children
Return child views of this class. By default it returns the children property of the class. There may be advantages of defining children in this method. By defining children in the children property of the class, you don't have access to "this". By returning children from getClassChildren, you will be able to use "this" as a reference to the class instance.
Returns:
getEl()
()
Object
Return reference to components DOM container. A component consists of one container and inside it a DOM "body" element
Returns:
getForm *
()
form.Manager
Returns form.Manager for this view. The form manager gives you access to form methods like save, deleteRecord, reset etc
Returns:
Example:
view.getForm().reset();
to reset all form fields
view.getForm().save();
to submit the form
view.getForm().read(1);
to send a read request to the server for record with id 1.
getFormEl
()
Get reference to input element
Returns:
getTitle
()
Returns title of Component.
Returns:
getValue
()
Return current value
Returns:
getWidth
()
Number
Returns total width of component including padding, borders and margins
Returns:
hide
()
Hide this component
Returns:
insertJSON
-
data
Insert JSON into components body Body of Component will be updated with compiled JSON from ludo.tpl.Parser. This method will be called automatically when you're using a JSON data-source
Parameters:
-
data
Object
Returns:
isDirty
()
Boolean
Returns true if current value is different from original value
Returns:
isValid
()
Boolean
Returns true when value of form element is valid, i.e. larger than minValue, matching regex etc.
Returns:
load
()
Load content from the server. This method will send an Ajax request to the server using the properties specified in the remote object or data-source
Returns:
ludoDOM
()
The second life cycle method This method is typically used when you want to create your own DOM elements.
Example:
ludoDOM : function() {
this.parent(); // Always call parent ludoDOM
var myEl = new Element('div');
myEl.set('html', 'My Content');
this.getEl().adopt(myEl);
}
ludoEvents
()
The third life cycle method This is the place where you add custom events
Returns:
Example:
ludoEvents:function(){ this.parent(); this.addEvent('load', this.myMethodOnLoad.bind(this)); }
ludoRendered
()
The final life cycle method. When this method is executed, the componenent (including child components) are fully rendered.
reset
()
Reset / Roll back to last committed value. It could be the value stored by last commit method call or if the original value/default value of this field.
Returns:
resize
-
config
Resize Component and it's children. Example:
Parameters:
-
config
Object
Example:
component.resize( { width: 200, height:200 } );
setValue
-
value
setValue for file inputs is display only. File inputs are readonly
Parameters:
-
value
Object
Properties
array unReneredChildren
Unknown
Array of unrendered children
boolean isRendered
Unknown
Property set to true when component and it's children are rendered.
fileUploadComplete
Boolean
false when a file has been selected but not uploaded. Happens when instantUpload is set to false
isReady
Boolean
private
Is form element ready for setValue. For combo boxes and select boxes it may not be ready until available values has been loaded remotely
layout
Object | String
Layout config object
Default: undefined
Example:
layout:{ type:'linear', orientation:'horizontal' } or shortcut :
layout:"cols" which is the same as linear horizontal
Layout types: linear, fill, grid, tab, popup
linkWith
String
Link with a form component with this id. Value of these components will always be the same Update one and the other component will be updated automatically. It's sufficient to specify linkWith for one of the two views.
Default: undefined
statefulProperties
Array
When using stateful:true, value will be preserved to next visit.
Default: ['value']
string cssSignature
Unknown
private
CSS class added to container of this component
Default: undefined
tpl
String
Template for JSON compiler.
Curly braces {} are used to specify keys in the JSON object. The compiler will replace {key} with JSON.key
The compiled string will be inserted as html of the body element.
The template will be compiled automatically when you're loading JSON remotely. If JSON is an array of object, the template will be applied to each object, example:
JSON : [ { firstname : 'Jane', lastname : 'Doe' }, { firstname : 'John', lastname: 'Doe' }]
tpl : '<div>{lastname}, {firstname}</div>
will produce this result:
<div>Doe, Jane</div><div>Doe, John</div>
Default: '' (empty string)
Example:
tpl:'Firstname: {firstname}, lastname:{lastname}'
twin
String
Will not validate unless value is the same as value of the form element with this id Example of use: Password and Repeat password. It's sufficient to specify "twin" for one of the views.
Default: undefined
validator
Object
Object of class form.validator.* or a plain validator function When set the isValid method of the validator will be called after standard validation is complete and form element is valid.
Example:
validator : { type : 'form.validator.Md5', value : 'MD5 hash of something' } In order to validate this field, the MD5 of form field value must match form.validator.Md5.value
validator:function(value){ return value === 'Valid value'; } is example of simple function used as validator.
valueForDisplay
Unknown
private
Private property for displayed file name. The file upload component is read only. It will only submit a value if a new file has been selected.
Attributes
accept
String
Comma separated string of valid extensions, example : 'png,gif,bmp'
Fires event acceptChange
Fires when the value for the configuration attribute accept
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
children
Array
Array of Config objects for dynamically created children
Example:
new ludo.Window({ left : 200, top : 200, width : 400, height: 400, children : [{ type : 'View', html : 'This is my sub component' }] });
containerCss
Object
CSS styles of component container example: { padding : '2px', margin: '2px' }
Default: undefined
copyEvents
Object
Create copies of events, example: This will fire a "send" event for every "click" event.
Default: undefined
Example:
copyEvents:{ 'click' : 'send' }
css
Object
CSS styles of body element of component example: { padding : '2px', margin: '2px' }
Default: undefined
fieldWidth
Int
Width of input element
Default: undefined
Fires event fieldWidthChange
Fires when the value for the configuration attribute fieldWidth
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
form
Object
Form object, used for form submission. Example
Default: undefined
Example:
form : { url: 'my-submit-url.php', method:'post', name : 'myForm' }
formConfig
Object
Form config for child elements, example { labelWidth : 200, stretchField:true }, which will be applied to all child form elemetns if no labelWidth is defined in their config
Default: undefined
formCss
Object, example: border : '1px solid #000'
Custom CSS rules to apply to input element
Default: undefined
Fires event formCssChange
Fires when the value for the configuration attribute formCss
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
frame
Boolean
Draw a frame around the component. This is done by assigning the container to css class ludo-container-frame and body element to ludo-body-frame. You can also customize layout by specifying css and|or containerCss
Default: false
instantUpload
Boolean
Upload instantly when selecting file. During upload the form component will be flagged as invalid, i.e. submit button will be disabled during file upload.
Default: true
Fires event instantUploadChange
Fires when the value for the configuration attribute instantUpload
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
labelButton
String
Label of "Browse" button
Default: "Browse"
Fires event labelButtonChange
Fires when the value for the configuration attribute labelButton
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
labelDelete
String
Label for "Delete" new file link
Default: Delete
Fires event labelDeleteChange
Fires when the value for the configuration attribute labelDelete
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
labelRemove
String
Label for "Remove" new file link
Default: Remove
Fires event labelRemoveChange
Fires when the value for the configuration attribute labelRemove
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
labelWidth
Width of label
Default: 100
Fires event labelWidthChange
Fires when the value for the configuration attribute labelWidth
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
ludoDB
Object
Config object for LudoDB integration.
Example:
ludoDB:{ 'resource' : 'Person', 'arguments' : 1, // id of person 'url' : 'router.php' // optional url }
This example assumes that ludoJS properties are defined in the LudoDBModel called "Person".
name
String
"name" is inherited from ludo.View. It will also be set as name of input element
Default: undefined
Fires event nameChange
Fires when the value for the configuration attribute name
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
object tplParserConfig
Default config for ludo.tpl.Parser. ludo.tpl.Parser is a JSON compiler which converts given tpl into a string. If you want to create your own parser, extend ludo.tpl.Parser and change value of tplParserConfig to the name of your class
Default: { type: 'tpl.Parser' }
required
Boolean
Is a value required for this field
Default: false
Fires event requiredChange
Fires when the value for the configuration attribute required
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
resizable
Boolean
if set to true and this component is a child of a component with "rows" or "cols" layout, resize handles will be created for it and it will be resizable. Please notice that components with stretch set to true are not resizable.
socket
Object
Configuration object for socket.Socket, Example: A reference to the socket can be retrieved by this.getSocket()
Default: undefined
Example:
socket:{ url:'http://127.0.0.1:1337', emitEvents:['chat','logout'] }
stretchField
Boolean
Let input field use all remaining space of the component
Default: true
Fires event stretchFieldChange
Fires when the value for the configuration attribute stretchField
is
changed. You can listen for the event using the on
method if you
wish to be notified before the attribute's value has changed, or
using the after
method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
e
EventFacadeAn Event Facade object with the following attribute-specific properties added:
Events
beforeload
This event is fired from the "load" method before a remote request is sent to the server.
beforeshow
Event fired just before a component is shown using the show method
Event Payload:
-
this
Object
blur
On blur event
change
On change event. This event is fired when value is changed manually by the user via GUI. The "change" event is followed by a "valueChange" event. When value is changed using the setValue method only the "valueChange" event is fired.
clean
event fired on blur when value is equal to original/start value
dirty
event fired on blur when value is different from it's original value
fail
Event fired when upload failed
focus
On focus event
invalid
Event fired when value of form component is valid. This is fired on blur
key_down
key down event
key_press
key press event
resize
Event fired when component is resized
submit
Event fired after a successful file upload, i.e. no server errors and json.success in response is true
submitfail
Event fired after an unsuccessful file upload because json.success was false
valid
Event fired when value of form component is valid. This is fired on blur
valueChange
This event is fired whenever current value is changed, either manually by user or by calling setValue. When the value is changed manually by user via GUI, the "change" event is fired first, then "valueChange" afterwards.
Event Payload:
-
value
Object | String | Number -
form
form.Elementcomponent