Synchronous mode: The filebox uploads the file just when the container form is submitted to
Asynchronous mode: The filebox uploads the file as soon as it has been selected by the user
The mode can be set by setting the uploadMode attribute. By default a filebox is synchronous.
In asynchronous mode, as soon as a filebox finish uploading the file it shows a checkbox checked with the name of the already uploaded file. The user can unchek the checkbox, cancelling (reseting) the uploaded file
In synchronous mode, the filebox works as an HTML file element.
Note: If APC extension is present, a filebox can show a progressbar showing the the upload progress (only in asynchronous mode)
FileBox tag is filebox
i.e.
<comp:filebox name = "client_picture"
uploadMode = "asynchronous"
showProgress = "yes"/>
A upload component can show the upload progress by setting the showProgress property to true.
While a filebox component is uploading a file to the server in asynchronous mode, the container form will wait until the component has uploaded the file. We can also show a progress bar to the submit button by setting the container form into the waitingComponents attribute.
i.e.
<comp:form name="client_form">
...
<comp:filebox name = "client_picture"
uploadMode = "asynchronous"
showProgress = "yes"
waitingComponents = "client_form"/>
...
<comp:commandbutton type = "submit"
name = "submit_client_form"
caption = "Submit"/>
</comp:form>
waitingComponents property accepts a comma-separated list of components that will wait until the filebox is uploading a file.
We can restrict type/size of files to be uploading by adding a validation rule to restrict both parameters i.e.
<comp:filebox name = "client_picture"
uploadMode = "asynchronous"
showProgress = "yes"
waitingComponents = "client_form"/>
<comp:validationrule component = "client_picture"
validateOnlyOnBlur = "true"
maxFileSize = "5242880"
allowedExtensions = "jpg,gif,png"/>
Once we have upload a file by ussing this component, we can save the file by ussing the save method, i.e.
public function client_form_submit(__UIEvent &$event) {
In asynchronous mode, a filebox raises the uploaded event once a file has been uploaded successfully to the server. We can also save the picture as soon as it's uploaded to the server by handling this event.
i.e.
public function client_picture_uploaded(__UIEvent &$event) {
//save the picture to the harddrive once it has been uploaded:
We do not recommend to use the uploaded event with a filebox inside a form, but handle it within the submit event. The uploaded event could be usefull for filebox outside form components.
