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.

demo1.JPG

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 Name Type
FILEUPLOAD_DATA XSTRING
CONTENT_TYPE STRING
IMAGE_SOURCE STRING

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)
ID FILEUPLOAD
data V_MAIN.DEMO.FILEUPLOAD_DATA
mimeType V_MAIN.DEMO.CONTENT_TYPE

Button

Properties (Button)
ID BUTTON
text Upload
Events
onAction UPLOAD

Image

Properties (Image)
ID IMAGE
source V_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.

demo_dice2.JPG

demo_penguins2.JPG

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Rachid Roughi

    Hi,

    This image is saved temporarily in the cache. How can I save it in the database to reload the image after the WD app has beed closed ?

    Thank you .

    Rachid.

    (0) 
    1. Amy King Post author

      Hi Rachid,

      You can achieve this with a File Upload UI element. If you do a search in the SCN web dynpro forum for “upload image”, you should find a few examples.

      Cheers.

      (0) 
      1. Rachid Roughi

        Hi Amy,

        yes, I have followed your great topic. Thank you.

        My images are uploaded and displayed correctly in my webdynpro via the “FileUpload UI element(are you speaking about the same component?) that you specify in your topic.

        But I do not know, how to store definitively my image (url) in the system (database) and not only in the cache.

        /wp-content/uploads/2015/05/4_712583.jpg

        /wp-content/uploads/2015/05/3_712584.jpg

        Can you clarify?

        Thank again Amy.

        Rachid.

        (0) 
        1. Amy King Post author

          Hi Nadav,

          Function module alternatives include:

          • GUID_CREATE
          • SYSTEM_UUID_C22_CREATE
          • SYSTEM_UUID_CREATE
          • SYSTEM_UUID_C_CREATE

          Cheers.

          (0) 
  2. gunjan singh

    Hi Amy,

    Thank you for sharing. it’s very useful. 🙂
    I am getting an error at URL that “URL is not correct”. I don’t know where I am wrong.

    (0) 

Leave a Reply