Scenario

You need to allow users to upload an image from their local workstation and immediately view the image in Web Dynpro.

Procedure

1.0 Create a Web Dynpro Component

Create a Web Dynpro component, ZDEMO_UPLOAD_IMAGE with a view, V_MAIN and window, W_MAIN. Also create an application for the component.

2.0 Create a Context Node

In the component controller, create a context node DEMO with cardinality 1..1 and selection 0..1. Add the following three attributes to the node.

3.0 Build the View

In view V_MAIN, map component controller context node DEMO to the view’s context. Add the following three UI elements to the view and bind their properties to the context as indicated.

FileUpload

Button

Image

4.0 Implement the Image Upload Action

In the handler method for action UPLOAD, implement the following code to temporarily store the image in an HTTP response object just long enough to bind the view’s IMAGE source property to the cached image.

METHOD onactionupload .    DATA: BEGIN OF ls_image,                   path TYPE string VALUE '/sap/public/',                   uuid TYPE sysuuid_c22,                   url    TYPE string,                END OF ls_image.    DATA lo_http_response TYPE REF TO if_http_response.    DATA lo_nd_demo         TYPE REF TO if_wd_context_node.    DATA lo_el_demo          TYPE REF TO if_wd_context_element.    DATA ls_demo               TYPE wd_this->element_demo. * -- Read uploaded image attributes from context    lo_nd_demo = wd_context->get_child_node( name = wd_this->wdctx_demo ).    lo_el_demo = lo_nd_demo->get_element( ).    lo_el_demo->get_static_attributes(        IMPORTING            static_attributes = ls_demo ). * -- Place the image into the HTTP response cache * Create an HTTP response object    CREATE OBJECT lo_http_response        TYPE cl_http_response        EXPORTING            add_c_msg = 1. " new pointer * Add the image's binary data and its content type to the HTTP response object    lo_http_response->set_data( ls_demo-fileupload_data ).    lo_http_response->set_header_field(        name  = if_http_header_fields=>content_type        value   = ls_demo-content_type    ). * Create a unique URL for the image    TRY.            ls_image-uuid = cl_system_uuid=>create_uuid_c22_static( ).        CATCH cx_uuid_error.    ENDTRY.    CONCATENATE ls_image-path ls_image-uuid INTO ls_image-url. * Allow a sufficient window of time to fetch the image from cache    lo_http_response->server_cache_expire_rel( expires_rel = 60 ). * Place the image into cache    cl_http_server=>server_cache_upload(        url             = ls_image-url        response = lo_http_response    ). * -- Set image source in context    lo_el_demo->set_attribute(        name  = `IMAGE_SOURCE`        value   = ls_image-url    ). ENDMETHOD.

Result

Save, activate and run the Web Dynpro application. You may now upload any image format and display it in the Web Dynpro.