Upload and Download Files in Webdynpro ABAP

by Nagendran R, Enteg Infotech, Bangalore, India

Go to T-Code- SE80, Create a Web Dynpro Component(Zfile_upload in this example)

Double click on the view MAIN -> choose Context tab -> right-click on the topmost context and choose Create> Node. Create two Nodes Node1: N_UPLOAD Cardinality 1.1 Attributes FILE_NAME FILE_TYPE FILE_SIZE Type STRING STRING STRING

FILE_CONTENTS XSTRING Node2: N_FILE_DOWNLOAD Cardinality is 0.n Attributes Type FILE_NAME STRING FILE_TYPE STRING FILE_SIZE STRING FILE_CONTENTS XSTRING

After creating the two Nodes, Now go to Layout tab of MAIN view, 1. Create a group. 2. Create the element FileUpload.

After adding the File Upload UI element, Create a BUTTON UI element with text property as Upload and action property as UPLOAD.

Afrer creating Button, Create a group and inside group create a UI element TABLE.

After creating the table right-click on the table UI element and choose Create Binding.

Click on Context and choose the Node N_FILE_DOWNLOAD. Create binding as below.

Now, in the Table columns choose the column File contents, and in the TEXT property BIND the attribute FILE_NAME OF NODE N_FILE_DOWNLOAD.

After Binding, the table look like the table in the below screen shot.

Now, Choose the UI element FILE_UPLOAD and create binding for the property data, Filename, mimetype.

After Binding the UI element FILE UPLOAD, Create a z-table to store all the attachments that has been uploaded, so that the files can be downloaded later.

The z-table fields and types are mentioned below.

Go to the methods tab and double-click on ONACTIONUPLOADA(action property for UPLOAD button) and place the below code:

method ONACTIONUPLOAD . DATA lo_nd_n_upload TYPE REF TO if_wd_context_node. DATA lo_el_n_upload TYPE REF TO if_wd_context_element. DATA ls_n_upload TYPE wd_this->element_n_upload. DATA lo_nd_n_file_download TYPE REF TO if_wd_context_node. DATA lt_n_file_download TYPE wd_this->elements_n_file_download. data ls_file_upload TYPE ZFILE_UPLOAD1. navigate from <CONTEXT> to <N_FILE_DOWNLOAD> via lead selection lo_nd_n_file_download = wd_context->get_child_node( name = wd_this>wdctx_n_file_download ). * * navigate from <CONTEXT> to <N_UPLOAD> via lead selection lo_nd_n_upload = wd_context->get_child_node( name = wd_this->wdctx_n_upload ).

* get element via lead selection lo_el_n_upload = lo_nd_n_upload->get_element( ). * @TODO handle not set lead selection IF lo_el_n_upload IS not INITIAL. * get all declared attributes lo_el_n_upload->get_static_attributes( IMPORTING static_attributes = ls_n_upload ). * ls_n_upload will contain the File name file type and file contents * ls_n_upload-file_size = xstrlen( ls_n_upload-file_contents ). ls_file_upload-FILE_NAME = ls_n_upload-FILE_NAME. ls_file_upload-FILE_TYPE = ls_n_upload-FILE_TYPE. ls_file_upload-FILE_SIZE = ls_n_upload-FILE_SIZE. ls_file_upload-FILE_CONTENTS = ls_n_upload-FILE_CONTENTS. insert zfile_upload1 from ls_file_upload. if sy-subrc = 0. select file_name file_type file_size file_contents from zfile_upload1 into TABLE lt_n_file_download. lo_nd_n_file_download>bind_table( new_items = lt_n_file_download set_initial_elements = abap_true ). endif. ENDIF. endmethod.

Activate all the Web Dynpro components .Create a Web Ddynpro Application and test it,

The Output Will be,

Click on Browse -> Choose a file for Upload -> Click on Upload.

After Uploading,file details can be seen in the Table and a Link to Download will be availablle. Click on the Link to download the Uploaded file.

The Download file can be viewed in a Pop-up window.