Issue in adding UploadCollection UI element in Webdynpro

[#1]

Hi,

I am trying to add the drag and drop functionality in the Webdynpro using the SAPUI5 element sap.m.UploadCollection. But I am unable to render the drop section in webdynpro. Below are the steps I have done to add the SAPUI5,

1. In the Webdynpro view added the HtmlIsLand and add the HtmlScripts element. In HTML scripts loaded the library ie,

/sap/public/bc/ui5_ui5/1/resources/sap-ui-core.js
/sap/public/bc/ui5_ui5/1/resources/sap/m/library.js
/sap/public/bc/ui5_ui5/1/resources/sap/m/UploadCollection.js
/sap/public/bc/ui5_ui5/1/resources/sap/m/UploadCollectionItem.js
/sap/public/bc/ui5_ui5/1/resources/sap/m/UploadCollectionRenderer.js

2. Created a MIME object with all the code for adding the UI element.

var oFileDrag1 = new sap.m.UploadCollection("drag_1", {
		maximumFilenameLength: 50,
		maximumFileSize: 30,
		multiple: true,
		sameFilenameAllowed: false,
		instantUpload: true,
		noDataDescription: "Drop files",
		change: this.onChange,
		uploadComplete: this.upload_complete,
		uploadUrl :"/sap/opu/odata/SAP/CV_ATTACHMENT_SRV/OriginalContentSet"
	});
	oFileDrag1.placeAt("target"); 
	//original_attachment.myCallBack.fireEvent('VisibleUI','true');		
	this.oFileUploader = oFileDrag1;

Now the element is rendered but the drop part is coming and if you see for "noDataDescription: 'Drop Files'", but the in output the text is different. The "+" is working perfectly and all events are triggering and able to add files.

Below are some images for your reference,

UI Element

When Trying to Drag a file

File uploaded using "+"

Your expert opinions will be very helpful.

scriptfiledragoriginal.txt

scriptfiledragoriginal.txt

[Wandersonwos]

I needed to create a solution to upload multiple files in a Webdynpro ABAP application and I used your code as an example. But I need to simplify it because our SAP Netweaver does not have an SAP DMS Odata (it is a 7.51 version).

It worked smoothly using the plus button or using drag and drop.

I created an article to show that example to help others, here is the link:

https://blogs.sap.com/2023/12/11/how-perform-multi-upload-files-in-webdynpro-abap-using-sap-ui5-libr...

[a_figueredo]

Hi Jyoti,

Were you able to solve the issue?

We have some webdynpros with flash upload (for multiple file upload) and we would need to update them, as flash support will end this year for IE, Chrome and other browsers..

Your approach looks fine, other option is using htmlisland + other free javascript.

Thanks a lot,

Kr,

Agustín.

[danilo_henriques]

I was looking into the control documentation and found that you also have the noDataText property. Have you tried this one too? I am taking a guess here but maybe one of the properties is preventing the drag and drop functionality to be rendered?

[jyotirmaya_mallick]

Hi Danilo,

Thanks for the reply.

Yes, I tried all the attributes but the drag and drop functionality is not working. I am not sure if I am missing any libraries or anything else.

After some more analysis found when the element is rendering in the browser then id "drag_1-drag-drop-area" is not getting render.

Normal behaviour,

Missing when rendered from webdynpro,

Thanks,

Jyoti