RAP + Jscript Fiori Elements Application- OData V4 Stream issue

[#1]

Hello Experts,

I am attempting to use the SAP Upload Set (sap.m.upload.UploadSet) to update an existing OData v4 RAP UI's attachment field.

Initially, I considered using semantic field annotations, which worked well. However, the requirement was to utilize the Upload Set due to its template download functionality, drag + drop and the ability to add dialog popup buttons.

The template download functionality is functioning correctly with the assistance of SheetJS and jQuery. However, when I attempt to perform a context binding on the attachment field, I encounter an error stating "Property 'XXXXXX' of type 'Stream' not allowed." Other fields update successfully when the attachment field is excluded from the list.

I would appreciate your guidance on whether this approach is viable or if I need to enable a create stream method, which I am trying to avoid due to the existing EML-based implementation.

Backend S/4 Hana 2021 on-prem.

Thank you..

AJ

andre.fischer volker.drees horst.keller

sap.ui.define([ "sap/ui/core/Fragment", "sap/m/Button", "sap/m/Dialog", "sap/m/library", "sap/m/Text", "sap/ui/unified/FileUploaderParameter", "sap/m/MessageToast", "sap/m/MessageBox", "jquery.sap.global", "sap/ui/core/mvc/Controller", "project1/ext/button/jszip", "project1/ext/button/xlsx", "sap/ui/model/odata/v4/Context" ], function (Fragment, Button, Dialog, mobileLibrary, Text, FileUploaderParameter, MessageToast, MessageBox, jQuery, Controller, jszip, XLSXJS, Context) { "use strict"; return { pDialog: null, excelSheetsData: [], onCloseDialog: function (oEvent) { this.byId("uploadDialogSet").close(); this.pDialog.close(); }, openExcelUploadDialog: function (oEvent, aContexts) { var oModel = this.getModel("ui"); var that = this; if (!that.pDialog) { Fragment.load({ id: "excel_upload", name: "project1.ext.fragment.ExcelUpload", type: "XML", controller: this, }).then(function (oDialog) { var oTempDown = new Button({ text: "Upload", press: function () { var oFileUploader = Fragment.byId("excel_upload", "uploadSet"); var oFile = oFileUploader.getItems()[0].getFileObject(); var reader = new FileReader(); reader.onload = function (e) { var xlsx_content = e.currentTarget.result; var mimeType = oFile.type; MessageToast.show("Upload Successful"); debugger; aContexts.forEach(function (oContext) { var sPath = oContext.getPath(); debugger; oContext.setProperty(sPath + "/Attachment", xlsx_content); oContext.setProperty(sPath + "/Mimetype", mimeType); oContext.setProperty(sPath + "/Filename", oFile.name); }); }; reader.readAsBinaryString(oFile); } }); var oCloseButton = new Button({ text: "Close", press: function () { oDialog.close(); } }); oDialog.setBeginButton(oTempDown); oDialog.setEndButton(oCloseButton); oDialog.attachAfterClose(function () { oCloseButton.destroy(); }); var oFileUploader = Fragment.byId("excel_upload", "uploadSet"); oFileUploader.removeAllItems(); that.pDialog = oDialog; that.pDialog.open(); }).catch(function (error) { alert(error.message); }); } else { var oFileUploader = Fragment.byId("excel_upload", "uploadSet"); oFileUploader.removeAllItems(); this.pDialog.setBeginButton(new Button({ text: "Upload", press: function () { // Code for upload button press } })); this.pDialog.setEndButton(new Button({ text: "Close", press: function () { that.pDialog.close(); } })); this.pDialog.open(); } } }; });

[Marian_Zeis · Accepted solution]

Hi,

I developed something that might help you. It is also using SheetJS:

https://docs.spreadsheet-importer.com/

You can see a live demo here:

https://livedemo.spreadsheet-importer.com/

[former_member849847 · Accepted solution]

Thank You Marian,

This is a very interesting build. Giving it a try.

Cheers.

[former_member849847 · Accepted solution]

Hello 20eed143c19f4b82bc4cf049916102cb,

I've reviewed your solution, and it's truly impressive. I have gratitude for your support within the community. If I may ask a query about a specific scenario. Currently, have a RAP V4 entity attachment field (Stream) that utilizes an annotation-based upload control. However, I'm interested in replacing it with an upload set control to facilitate image uploads. But my AJAX merge request cannot match the functionality of a RAP-based call.

Here the request data has all keys with a single field to update., it returns a 405.

Control I am trying to implement.

[former_member849847 · Accepted solution]

I successfully utilized the Fetch API, with content disposition, if-match headers, and tested your solution as well as the standard upload control. We now have a successful data posting. Therefore, in theory, if the free version of Sheet.JS supports reading blobs (such as images, avatars, or icons) from an Excel column, we should be able to transmit it to backend.

jQuery AJAX also works.

[former_member849847]

Bad code formatting in my question and not sure how to fix this

A screenshot is attached along with a code file.

jscript.txt

jscript.txt