Upload the File From the PC

14
SAP COMMUNITY NETWORK scn.sap.com © 2012 SAP AG 1 Web Dynpro: Upload the file from the PC And display it on Browser Applies to: ECC 6.0 Summary The article aims to help the professionals who have only ABAP knowledge and passion to develop their Web Dynpro knowledge in ABAP. This article provides the knowledge on uploading a file in Web Dynpro and displaying the same on the Browser. Author(s): Sudeesh Kumar Ravindran Company: Applexus Technologies (P) LTD. Created on: 28 March 2012 Author Bio Sudeesh Kumar Ravindran is working as SAP Technology Consultant with Applexus Technologies (P) LTD.

Transcript of Upload the File From the PC

Page 1: Upload the File From the PC

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 1

Web Dynpro: Upload the file from the PC

And display it on Browser

Applies to:

ECC 6.0

Summary

The article aims to help the professionals who have only ABAP knowledge and passion to develop their Web Dynpro knowledge in ABAP. This article provides the knowledge on uploading a file in Web Dynpro and displaying the same on the Browser.

Author(s): Sudeesh Kumar Ravindran

Company: Applexus Technologies (P) LTD.

Created on: 28 March 2012

Author Bio

Sudeesh Kumar Ravindran is working as SAP Technology Consultant with Applexus Technologies (P) LTD.

Page 2: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 2

Table of Contents

Introduction ......................................................................................................................................................... 3

Step 1 – Create a Web Dynpro Component ....................................................................................................... 3

Step 2 – Create two nodes in the view ............................................................................................................... 4

Node Details .................................................................................................................................................... 4

Design the Layout ............................................................................................................................................... 5

Create File Upload Element ............................................................................................................................ 5

File Upload Element Details ............................................................................................................................ 6 Binding for Data ........................................................................................................................................................... 6

Binding for File Name .................................................................................................................................................. 6

Binding for MIME Type ................................................................................................................................................ 7

Create a TABLE Element to display the uploaded IMAGE file details ............................................................ 7 Binding is done to the Table with the NODE “N_FILE_DOWNLOAD” ......................................................................... 7

Properties of the Table Element ................................................................................................................................... 8

Create a Button Element ................................................................................................................................. 8 Create an Action for the same using the create button in BUTTON Properties ........................................................... 9

Coding Part for the Action ................................................................................................................................... 9

Create Web Dynpro Application ....................................................................................................................... 11

Test the Web Application .................................................................................................................................. 11

Select the Image File and click Submit Button ............................................................................................. 12

Uploaded Image Details ................................................................................................................................ 12

Click the Link ................................................................................................................................................. 12

Related Content ................................................................................................................................................ 13

Copyright........................................................................................................................................................... 14

Page 3: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 3

Introduction

In Web Dynpro ABAP, sap provides an inbuilt File upload feature in the View. Using this File upload feature, we can upload the file into our application and process the data available in the file. This article likes to describe the same using an image file. Uploaded image will be displayed in the browser using the Link provided by the application.

Step 1 – Create a Web Dynpro Component

Go to the Transaction Object Navigator

Page 4: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 4

Step 2 – Create two nodes in the view

Node Details

FILE_NAME

Type – String

FILE_TYPE

Type – String

FILE_SIZE

Type – String

FILE_CONTENT

Type - Xstring

Page 5: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 5

FILE_NAME

Type – String

FILE_TYPE

Type – String

FILE_SIZE

Type – String

FILE_CONTENT

Type – Xstring

Design the Layout

Under the layout tab we need to create two elements to get the IMAGE file and to display the details of the IMAGE file with a link to display the image on the browser.

Create File Upload Element

Page 6: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 6

File Upload Element Details

Binding for Data

Binding for File Name

File Content

File Name

File Type

Page 7: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 7

Binding for MIME Type

Create a TABLE Element to display the uploaded IMAGE file details

Binding is done to the Table with the NODE “N_FILE_DOWNLOAD”

File Download Data

Page 8: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 8

Properties of the Table Element

Create a Button Element

Binded Details!!

Page 9: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 9

Create an Action for the same using the create button in BUTTON Properties

Coding Part for the Action

Create the Action!!

Page 10: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 10

DATA lo_nd_n_upload TYPE REF TO if_wd_context_node. DATA lo_el_n_upload TYPE REF TO if_wd_context_element. DATA ls_n_upload TYPE wd_this->element_n_upload. DATA lo_nd_n_file_download TYPE REF TO if_wd_context_node. DATA lo_el_n_file_download TYPE REF TO if_wd_context_element. DATA ls_n_file_download TYPE wd_this->element_n_file_download. DATA lt_table TYPE TABLE OF wd_this->element_n_file_download. * navigate from <CONTEXT> to <N_UPLOAD> via lead selection lo_nd_n_upload = wd_context->get_child_node( name = wd_this->wdctx_n_upload ). * get element via lead selection lo_el_n_upload = lo_nd_n_upload->get_element( ). * get all declared attributes lo_el_n_upload->get_static_attributes( IMPORTING static_attributes = ls_n_upload ). ls_n_upload-file_size = XSTRLEN( ls_n_upload-file_content ). * navigate from <CONTEXT> to <N_FILE_DOWNLOAD> via lead selection lo_nd_n_file_download = wd_context->get_child_node( name = wd_this->wdctx_n_file_download ). * @TODO handle not set lead selection IF lo_nd_n_file_download IS INITIAL. ENDIF. * get element via lead selection lo_el_n_file_download = lo_nd_n_file_download->get_element( ). * @TODO handle not set lead selection IF lo_el_n_file_download IS INITIAL. ENDIF. MOVE-CORRESPONDING ls_n_upload TO ls_n_file_download. APPEND ls_n_file_download TO lt_table. CALL METHOD lo_nd_n_file_download->bind_table EXPORTING new_items = lt_table.

Page 11: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 11

Create Web Dynpro Application

Save & Activate the Web Dynpro Component.

Test the Web Application

Page 12: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 12

Select the Image File and click Submit Button

Uploaded Image Details

Click the Link

Uploaded image will be displayed in a separate browser window.

Link of the Uploaded Image File

Page 13: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 13

Related Content

http://help.sap.com/saphelp_nw70/helpdata/en/77/3545415ea6f523e10000000a155106/content.htm

http://help.sap.com/saphelp_nw04s/helpdata/en/43/1f6442a3d9e72ce10000000a1550b0/content.htm

http://help.sap.com/saphelp_nw04s/helpdata/en/43/1f6442a3d9e72ce10000000a1550b0/frameset.htm

Page 14: Upload the File From the PC

Web Dynpro: Upload the file from the PC And display it on Browser

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 14

Copyright

© Copyright 2012 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Oracle Corporation.

JavaScript is a registered trademark of Oracle Corporation, used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.

All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.