File Upload UI element

 

File upload UI element is used to upload files from the client(Presentation server) to the server. This UI element appear with the input field and a button to search the directory for the file.

 

 

Note: We cannot specify the URL path with the file Upload UI element.

 

 

Important properties of the UI element to be binded:

 

 

 

Data property of the UI Element must be binded to an attribute of type XSTRING. The system will automatically converts the content of the file uploaded into XSTRING format and store it in the attribute binded to the data property.

 

File Name property of the UI element is to be binded to the attribute of type string. The system will store the name of the file uploaded in this attribute.

 

Mime type property of the UI element is to be binded to the attribute of type string. The system will store the type of file in this attribute.

 

 

 

 

Properties of the context node to be maintained for the File Upload UI element.

 

 

 

Now let us see an example to how to use the file Upload UI element and then how to convert the content of the file from XSTRING format to internal table contents.

 

Step 1: Go to the Tcode SE80 and create a webdynpro component.

 

 

 

Assign the component to the package or save it in the local object.

 

 

Step 2: Go to the context tab of the view controller and create a context node to be binded to the file upload UI element.

 

 

 

Create context attribute to the node as shown below.

 

 

 

Step 3: Go to the layout tab of the view controller and insert a file upload UI element.

 

 

 

 

Bind the properties of the UI Element to the respective attributes.

 

 

 

Since we don’t have an action for the file Upload UI element insert a button UI element to trigger the action.

 

 

 

Enter the text for the button and create an action for the button.

 

 

In the event handler method created for the button UI element read the context node created for file upload to get the content of the file.

 

Using code wizard read the node.

 

Code will be generated as below.

 

 

Note : I have removed the unwanted codes.

 

Now the local structure ls_file_upload will contain the contents of the file.

 

Save and activate the whole component.

 

Step 4: Create a webdynpro application to test the component.

 

 

 

 

Output:

 

 

 

Click on browse to search the file from the directory and choose the file.

 

 

 

 

 

Set a break point in the event handler fo the Upload UI element and check the content of the node at runtime.

 

 

 

 

The content of the file is converted into Xstring format by the system and stored in the attribute binded to the data property.  Lets see how to obtain the contents of the file in the internal table in the next post.

 

 

 

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Arun