You need to allow users to upload an image from their local workstation and immediately view the image in Web Dynpro.
Create a Web Dynpro component, ZDEMO_UPLOAD_IMAGE with a view, V_MAIN and window, W_MAIN. Also create an application for the component.
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 |
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 |
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.
Save, activate and run the Web Dynpro application. You may now upload any image format and display it in the Web Dynpro.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
5 | |
5 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |