Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

Time:2021-12-25

This is the sixty-ninth article of Jerry in 2021, and the 346th official account of the Wang Zixi public number.

SAP ui5 sap ui. unified. The fileuploader control, combined with the gateway framework, is not a difficult thing to upload local files to the ABAP server.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

However, due to the limitations of the objective conditions of project implementation, how can it be realized without using the two frameworks of SAP ui5 and SAP ABAP gateway?

This is a question a friend asked me recently. In fact, I did something similar as early as 2014. This paper introduces the requirements and steps of file upload by pure manual front-end and back-end programming without using SAP ui5 and SAP ABAP gateway framework.

The source code, front-end JavaScript code and back-end ABAP server file receiving code provided in this article can run in any SAP on premises product based on ABAP technology stack because they do not use any application level framework.

Let’s understand the implementation details of this requirement from the implementation of the front-end and back-end layers.

Front end implementation

The front-end code is relatively simple, with only 30 lines of code. Create a new HTML file and paste these 30 lines of code.

The design idea is summarized as the following 7 points. Friends who need complete source code, please start from thislinkget.

(1) Define a native form element, and use the enctype field to specify that the encoding format of the form sent to the server is multipart / form data

(2) The data of the form is sent to the server using the HTTP post method.

(3) The form contains three input controls, which are email, text and file The local file upload function introduced in this article is completed with the help of the input control with the type of file in line 8. After clicking the hyperlink implemented with a tag in line 11, the sendform function bound to a tag triggers to send data.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

(4) Pass all the data in the form through DOM API document forms. The nameditem is parsed and put into the variable OData

(5) Line 17 demonstrates the method of adding new content to the form data to be sent to the server through code.

(6) This line maintains the specific address where the form data is sent to the ABAP server, and its SiCf path is / SAP / CRM / file_ upload.

After the file is uploaded to the ABAP server, how do we verify whether the upload is successful and whether the content is correct? For verification purposes, I hard coded a sales order ID 55824 After the file is uploaded successfully, I create the uploaded file as an attachment of the sales order in SAP CRM system.

(7) Call the send method of the native API XMLHttpRequest to transfer the form data to the ABAP server.

Open the HTML file, as shown in the figure below, and click the hyperlink to upload the file.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

The contents of the text file to be uploaded are as follows:

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

ABAP backend implementation

Because we do not use any back-end framework, this means that we must parse and process the multipart / form data format data sent by the client based on the bottom HTTP protocol.

First, in the transaction code SiCf, according to the path SAP / CRM / file in the front-end code_ Upload, create a new processing node with the same path.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

For more information about SiCf, please refer to Jerry’s article:From the SiCf of ABAP NetWeaver to the lambda function of SAP kyma.

Create a processing class ZCL for this node_ FILE_ Upload, all the back-end processing logic in this article, is written in the handle of this class_ In request.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

The complete back-end code can also be obtained from thislinkYes, this article will not post all of them, but only introduce the main points.

The input values maintained through the three input controls of the front-end form, plus the custom form data in the front-end code, are separated by the formboundary randomly generated by the browser. The complete data of the submitted form can be observed in the chrome Developer Tool Network tab.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

ZCL_ FILE_ The implementation logic of the upload class is to first parse the formboundary identifier sent by the browser, split the received form data into blocks according to the boundary, and then only deal with the block that we are interested in including the upload of local files.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

We just showed the details of the form data sent to the ABAP server in the chrome developer tool. After these data are received on the ABAP server, they are displayed in the debugger as follows:

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

What do these well marks mean? Use the drop-down menu highlighted in the figure above to switch the fast display to HTML browser at a glance. Originally, these line breaks, carriage return line breaks and other control characters are uniformly displayed as “#” in the fast display view of ABAP debugger.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

The actual content of the uploaded file that I am really interested in is stored in the form data block shown in the figure below.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

Therefore, my idea is to locate the ABAP variable LV in the figure above according to the carriage return line feed character_ Data contains a form data block. If this block contains content type: text / plain, it means that this block contains the actual content of the uploaded file. The actual content of the uploaded file can be obtained by parsing it.

The common mistake made by many novice friends here is that the carriage return line feed observed in the ABAP debugger is displayed as “##”. Therefore, in the code, these friends also directly use single or double pound signs for string matching, which of course cannot work.

ABAP tool class CL is required to perform operations related to line feed and carriage return line feed in ABAP_ ABAP_ CHAR_ Constants defined by utilities: Cr_ LF and newline:

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

As I used in the implementation code of this article:

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

After parsing the contents of the uploaded text file, call SAP CRM attachment to create API, and add the file content as an appendix to the sales order of system ID 55824.

For simplicity, this example only supports uploading local files of text / plain type into attachments of sales order (whose bor type is bus20000115), so both file type and bor type are hard coded.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

After the front-end and back-end development is completed, test and upload a file called upload Txt, which is received by the ABAP server and stored as an attachment to the sales order 55824.

Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

Click the attachment hyperlink to open the content of the file. It is found that it is completely consistent with the local file, and the test passes:
Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server

Of course, what this article describes is actually a scene of rebuilding wheels. In the actual project development, if there is no special reason, we still try to use the ready-made framework and tools provided by SAP to complete the basic and underlying work such as file upload, so as to focus on the preparation of business logic.

Thanks for reading.

Jerry’s ABAP topic

More Jerry’s original articles are: “Wang Zixi”:
Without using any framework, handwritten pure JavaScript is used to upload local files to ABAP server