Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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.

 

clip_image001

 

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

 

 

Important properties of the UI element to be binded:

 

clip_image002

 

 

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.

 

clip_image003

 

 

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.

 

clip_image004

 

 

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.

 

clip_image005

 

 

Create context attribute to the node as shown below.

 

clip_image006

 

 

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

 

clip_image007

 

 

 

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

 

clip_image009

 

 

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

 

clip_image011

 

 

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

 

clip_image013

 

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.

 

clip_image014

Code will be generated as below.

 

clip_image016

 

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.

 

clip_image017

 

 

 

Output:

 

clip_image018

 

 

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

 

clip_image019

 

 

clip_image020

 

 

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

 

clip_image021 

 

 

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.

 

 

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.