Introduction
The AJAX file upload feature allows the user to upload files into a Web application in a transparent way. The purpose is to allow the user interact with the application during the file upload. In standard Web application this is not possible: the user has to wait until the upload operation is finished before continuing the navigation. There is a technological limitation to overcome in order to implement the AJAX file upload. All the other AJAX feature are based on Javascript libraries. But in this case there is a problem. The Javascript language does not allow to access file system resources for security issues. The workaround adopted to implement the AJAX file upload is to use an iframe containing the upload field so that the upload request is processed independently from the rest of the application.
Modeling
Modeling the AJAX upload feature means model two different pages. The first page represents the iframe containing the true upload field. In this page is modeled the upload operation. The second page represents the web application page from which the user will start the file upload. This page contains also all the constants that have to be shown to the user..
In order to use the AJAX upload feature you need to have at least one entity in your data model with a BLOB attribute that represents the file you want to upload. In this tutorial we suppose to have the "File" entity with a BLOB attribute named "file".
Now you have to model the pages inside the siteview.
Add a new page and give a name to it (e.g. "Upload page"). Add an entry unit with a BLOB field. Add a create unit based on the entity "File" outside the page. Connect the entry unit and the create unit with a normal link. Then you have to couple the BLOB field with the "file" attribute exposed by the create unit. To do this open the Coupling dialog, uncheck the 'Enable Default Coupling' option and do the correct coupling. Add an index unit based on the "File" entity showing the File list. Connect the create unit and the index unit with the OK link and the draw the KO link connecting the create unit and the page. In this way you have modeled the iframe containing the true upload field.
Now add another page to the site view. In this page add an entry unit ("Form") with a single field. Edit the properties of the field in the Properties View. In particolar choose the AJAX tab and check the "Upload Enabled" property. As soon as you check this property, other fields are enabled. These fields are:
-
Upload Page: the page containing the real BLOB field for the file upload. You have to click on the button next to the field and choose the "Upload page" from the Selection Dialog
-
Upload Page Width: the width of the upload page container
-
Upload Page Height: the height of the upload page container
Edit these properties with the values of your choice. Now you completed the model. There is a graphic question to consider. Since the 'Upload page' will be rendered as an iframe inside the other page, you usually want to see only the unit places into the page without considering units in the Master page and without showing the page header and menu links. For this reason you have to check the "Ignore Master Page" property in the Property View of the Upload page and you have to assign as Page Layout for this page the WRDefault/Empty page layout. This layout prints only the grid content. Now you can generate the full web project and see the result.