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.