In this Blog will see how to upload and download file using webdynpro technology.

Follow the following steps as shown below.

File Upload

Go to SE80 T-code, in that Repository Brower select Web Dynpro Comm. / Intf. And give the name, discription & save it as shown below.

fig-1

Go to views -> context , right click on context ->create->node.

fig-2

Right click on node-> create-> attribute.

fig-3

Create 3 attributes as mentioned below

fig-4

Go to layout, right click on rootelementcontainer->insert element.

fig-5

Create the element as shown below.

fig-6

In property bind data to content, filename to file_name and mimetype to mime_type as shown below.

fig-7

Again right click on rootelementcontainer -> create one more element as shown below.

fig-8

Provide the text for the button in the property.

fig-9

Click on Onaction event property.

fig-10

Create on upload event as shown.

fig-11

Go to methods tab there a method will be created with your event name of type event handler. Double click on that method(onactiononupload).

fig-12

Write the following code in that method.

fig-13

Code

Method ONACTIONONUPLOAD.
   data lo_nd_file_upload type ref to if_wd_context_node.
    data lo_el_file_upload type ref to if_wd_context_element.
    data ls_file_upload type wd_this->element_file_upload.

*   navigate from <CONTEXT> to <FILE_UPLOAD> via lead selection
    lo_nd_file_upload = wd_context->get_child_node( name = wd_this->wdctx_file_upload ).
*   @TODO handle non existant child
*   IF lo_nd_file_upload IS INITIAL.
*   ENDIF.
*   get element via lead selection
    lo_el_file_upload = lo_nd_file_upload->get_element( ).
*   @TODO handle not set lead selection
    if lo_el_file_upload is initial.
    endif.

*   get all declared attributes
    lo_el_file_upload->get_static_attributes(
      importing
        static_attributes = ls_file_upload ). 
Endmethod.

Before activating the method activate the webdynpro object.

fig-14

Then activate the method.
Create the webdynpro application.

fig-15

Give description and save it in your package.

fig-16

Click on webdynpro application and click on execute.
Following output screen will appear

fig-17

Click on browse and choose the file to be uploaded.
In debugging you can see the content , filename and mimetype.

fig-18

File Download

Go to SE80 T-code, in that Repository Brower select Web Dynpro Comm. / Intf. And give the name, discription & save it as shown below.

fig-19

Go to views -> context, right click on context ->create->node.

fig-20

Create two nodes as mentioned.

fig-21

Right click on node and create the following attributes under each node

Node – n_upload

Node – n_file_download

fig-22

Right click on rootelementcontainer and create two groups g1 and g2 as shown.

fig-23

fig-24

Right click on group 1 and click on insert element.

fig-25

Create file upload and button element as shown below.

fig-26

In property bind data to content, filename to file_name and mimetype to mime_type as shown below.

fig-27

Again right click on rootelementcontainer -> create one more button element as shown below
Create Onaction event as upload.

fig-28

Right click on group 2 and create table element as shown below.

fig-29

Right click on table element and create binding.

fig-30

Click on context and select n_file_download,
Uncheck binding for file_name and file_contents and click on continue.

fig-31

Following table view will be created.

fig-32

Go to methods tab, double click on onactionupload method, and write the following code.

fig-33

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 ZPB_UPLOAD.
*    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 ZPB_UPLOAD FROM LS_FILE_UPLOAD.
    IF SY-SUBRC = 0.
      SELECT FILE_NAME
             FILE_TYPE
             FILE_SIZE
             FILE_CONTENTS
             FROM ZPB_UPLOAD
             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 the object and also activate the method.
Following the same procedure to create web dynpro application after activating as explained in file upload.
Click on webdynpro application and execute

fig-34

The following output screen will appear in the browser.

fig-35

When ever you click on browse and choose a file, after choosing a file once you click on upload the file contents will be stored in table below
If you want to download the particular file content, click on the filename link in the table, then the content will open in separate tab

fig-36

Conclusion

After reading this blog you will have knowledge on how to upload and download file using webdynpro technology