Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
amy_king
Active Contributor

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.

Attribute NameType
FILEUPLOAD_DATAXSTRING
CONTENT_TYPESTRING
IMAGE_SOURCESTRING

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

Properties (FileUpload)

IDFILEUPLOAD
dataV_MAIN.DEMO.FILEUPLOAD_DATA
mimeTypeV_MAIN.DEMO.CONTENT_TYPE

Button

Properties (Button)

IDBUTTON
textUpload
Events

onActionUPLOAD

Image

Properties (Image)

IDIMAGE
sourceV_MAIN.DEMO.IMAGE_SOURCE

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.

12 Comments
Labels in this area