LudoJS

ludo.form.File

ludo.form.

new ludo.form.File(config)

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.

Parameters:
Name Type Description
config Object
Properties
Name Type Description
labelButton String

Label for button, default: "Browse"
labelRemove String

Remove existing file label, default: "Remove"
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.
buttonWidth Number

Width of browse button in pixels.
accept String

Comma separated string of valid extensions, example : 'png,gif,bmp'
Source:
Fires:
  • ludo.form.File#submit Fired after successful file upload. Arguments: 1) {Object} Json from server, 2) ludo.form.event:File
  • ludo.form.File#submitFail Fired after failed file upload, i.e. server responded with a JSON object where success was false({ "success": false }). Arguments: 1) {Object} Json from server, 2) ludo.form.event:File
  • ludo.form.File#fail Fired on other failures than submitFail, example: server error. Arguments: 1) String response from server, 2) ludo.form.event:File
Examples
...
	 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 : '<name of file>',
		'name-of-file-upload-component' : 'pgnfile'
    }


 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,

Extends

Methods

clear()

Reset value back to the original value sent(constructor value)

Inherited From:
Source:

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
Inherited From:
Source:

disable()

Disable form element

Inherited From:
Source:
Returns:

void

enable()

Enable form element

Inherited From:
Source:
Returns:

void

getFormEl()

Get reference to input element

Inherited From:
Source:
Returns:

DOMElement

isDirty() → {Boolean}

Returns true if current value is different from original value

Inherited From:
Source:
Returns:

isDirty

Type
Boolean

isValid() → {Boolean}

Returns true when value of form element is valid, i.e. larger than minValue, matching regex etc.

Inherited From:
Source:
Returns:

valid

Type
Boolean

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.

Inherited From:
Source:
Returns:

void

rollback()

Alias to reset

Inherited From:
Source:

setEnabled(enabled)

Enable or disable form element

Parameters:
Name Type Description
enabled Boolean
Inherited From:
Source:

val(value)

"set" is readonly for file inputs. It will update the displayed file name, not the file input it's self.
Method without arguments returns the file input value

Parameters:
Name Type Description
value Object
Overrides:
Source: