cancel
Showing results for 
Search instead for 
Did you mean: 

Upload an show image

Former Member
0 Kudos

Hi,

i just want to upload a product image into a table. After the upload i will showing the image

as details on a webdypro page. The Uplaod and saving in the database is no problem.

But I don't know how to bind the image to my webdynpro page.

Could anybody help me ?

Thanks in advance.

Thomas

Accepted Solutions (0)

Answers (3)

Answers (3)

thomas_jung
Developer Advocate
Developer Advocate

In the past I have created a custom ICM handler class to serve the images via their own handler URL. This makes it very easy to reference the images within Web Dynpro since they are addressible via URL. Not really any different from how SAP exposes the MIME Repository (actually just database entries) to the web via URL. I just built this very thing for the SDN Mentors Hands On workshop at TechEd Community Day.

First of all I have a database table that has all of my image content. My images are stored by product ID and I want to be able to expose a URL based upon the Product ID - that will supply the corresponding image:

http://www.flickr.com/photos/tjung/2765519066/

So basically you create a class that has the IF_HTTP_EXTENSION interface. This will give you one method called HANDLE_REQUEST. This method is fired whenever anyone accesses the URL assigned to the ICM Node that this class is assigned to.

In HANDLE_REQUEST I have this coding:


method if_http_extension~handle_request.
* Inform ICF to "keep" (reuse) this handler, and that we answered the HTTP request
  if_http_extension~lifetime_rc = if_http_extension=>co_lifetime_keep.
  if_http_extension~flow_rc     = if_http_extension=>co_flow_ok.

* Determine image name from URL ~script_name/~path_info (= image_name)
  data: name type string.
  name = server->request->get_header_field( name = if_http_header_fields_sap=>path_info ).
  translate name to upper case.
  if strlen( name ) >= 1 and name(1) = '/'.
    shift name left.
  endif.

* Application logic
  data: content type xstring.
  content = me->load( name ).
  if xstrlen( content ) is initial.
    raise exception type cx_http_ext_exception exporting msg = 'Invalid URL!'.
  endif.

* Set up HTTP response
  server->response->set_status( code = 200 reason = 'OK' ).
  server->response->set_header_field( name = if_http_header_fields=>content_type   value = 'image/gif' ).
  server->response->server_cache_expire_rel( expires_rel = 86000 ).
  server->response->set_header_field( name = if_http_header_fields=>cache_control value = 'max-age=86000' ).
  server->response->set_data( content ).
endmethod.

Just to keep my processing clean, I put the logic to lookup the file content from the database into a separate, private method. This method is named LOAD. It has an importing parameter I_NAME type CSEQUENCE and and returning parameter called R_CONTENT of type XSTRING. Here is the code:


method load.

  data l_name type string.
  l_name = i_name.
  translate l_name to upper case.
  select single content from zsdemo_pd_img into r_content
   where filename = l_name.

endmethod.

I then can create a new custom ICM Node for this handler in transaction SICF. I wanted the URL to be really simple so I made a new root node called ZMHO and then added an images node under that:

http://www.flickr.com/photos/tjung/2765519090

I wanted the images to be available anonymously so I embedded logon data into this node:

http://www.flickr.com/photos/tjung/2765519110

Then on the Handler List tab you can assign the class to this handler URL:

http://www.flickr.com/photos/tjung/2764673631

So now in my Web Dynpro Application I can data bind my image source property to a context node and fill that node dynamically with code like this:


select * from zsdemo_pd_img into table i_img up to 20 rows.
  loop at i_img assigning <wa_img>.
    append initial line to lt_product_info assigning <wa_info>.
    <wa_info>-product_guid = <wa_img>-product_guid.
    <wa_info>-filename = <wa_img>-filename.
    concatenate `/zmho/images/` <wa_info>-filename into <wa_info>-image_url.
 endloop.
 lo_nd_product_info->bind_table(
     new_items = lt_product_info set_initial_elements = abap_true ).

There are other approaches - like using a temporary cache entry - but I like this one because now you have a permanent static URL for each image - yet it is all based upon the programming of the service node. Other applications - even non-SAP ones - can access these images just as easily.

Former Member
0 Kudos

Hi Thomas,

thanks for your help. I follow your steps and create a own class.

After this I bind under the Tab Interfaces the Interface IF_HTTP_EXTENSION without any selctions of the checkboxes.

Then I created a method in my created Class and copy the Codeexample in it. But now, when I will activated the Class

i get the error Messge "Server not declared". May you can please tell me, how you have declared the variable Server.

Thanks Thomas

thomas_jung
Developer Advocate
Developer Advocate
0 Kudos

>

> Hi Thomas,

>

> thanks for your help. I follow your steps and create a own class.

> After this I bind under the Tab Interfaces the Interface IF_HTTP_EXTENSION without any selctions of the checkboxes.

> Then I created a method in my created Class and copy the Codeexample in it. But now, when I will activated the Class

> i get the error Messge "Server not declared". May you can please tell me, how you have declared the variable Server.

>

> Thanks Thomas

Did you create one or two methods? One of the methods should already come from the interface (HANDLE_REQUEST) and only needs you to add the code to the implementation of the method. This method already has an importing parameter for SERVER and that is where the declaration comes from.

Former Member
0 Kudos

Hi,

Upload Image in the MIME-Repository.

SE80

Context Menu on your WD Component

--> Create

---> MIME-Object

---> Import

Kind regards,

Ranjith C

Former Member
0 Kudos

Hello,

In the following [wiki|https://www.sdn.sap.com/irj/sdn/wiki?path=/display/snippets/web%2bdynpro%2babap%2b-%2busing%2bui%2belements%2bin%2balv%2bcomponent%2bcells] I show how to display an image in a column of the ALV table.

And I suggest you to see an example in the web dynpro component WDR_TEST_UI_ELEMENTS and this [article|https://www.sdn.sap.com/irj/sdn/go/portal/prtroot/docs/library/uuid/2eb11b59-0a01-0010-dfa3-8292abdf9c4f], too.

Regards.