on 2020 Oct 18 7:02 PM
Hello Experts,
I am going thru a bizarre error for the past 24 hours. I have a requirement of Uploading Documents. Hence I am using the UploadCollection Element from Ui5 Library.
Everything is working fine but the only thing is the upload isn't happening in the first instance. I opened/reloaded my UploadCollection Page, when I click upload, beforeUploadStart event handler gets triggered where I am setting the URL to post the document, Then it goes to the uploadComplete handler; but by this time, a network request should have been sent to the URL that I set on the beforeUploadStart handler, but checking the Network Tab in the Dev tools, there isn't any request triggered.
The catch is when I select a document for the second time or so forth times as usual the beforeUploadStart event handler gets triggered and once this handler completed executing, a network request has been sent to the URL path that I set on the beforeUploadStart event handler. Why it isn't getting triggered on the first instance when I open/re-load the UploadCollection Page. Please find my code:
Your immediate help is much appreciated.
XML:
<UploadCollection
id="idUploadCollection"
maximumFilenameLength="100"
maximumFileSize="100"
multiple="true"
items="{path : 'FileModel>/Items', templateShareable : 'true'}"
showSeparators="None"
fileType="{fileTypes>/Items}"
sameFilenameAllowed="true"
uploadUrl="{URLModel>/url}"
noDataDescription="Drop files or use the "Upload" button to upload"
fileDeleted="onFileModelDelete"
filenameLengthExceed="onFilenameLengthExceed"
fileSizeExceed="onFileSizeExceed"
mode="SingleSelectMaster"
numberOfAttachmentsText=""
typeMissmatch="onTypeMissmatch"
uploadTerminated="onUploadTerminated"
uploadComplete="onUploadComplete"
beforeUploadStarts="onBeforeUploadStarts">
<items>
<UploadCollectionItem id="idUploadCollectionItem"
mimeType="{FileModel>Files/0/Extension}"
fileName="{FileModel>Files/0/EscapedName}"
documentId="{FileModel>ObjectGUID}"
enableEdit="false" enableDelete="true"
visibleDelete="true" visibleEdit="false" press="onItemListPress"
url="/mims/member/download?objectType={FileModel>ObjVer/Type}&objectId={FileModel>ObjVer/ID}&objectVersion={FileModel>ObjVer/Version}&fileId={FileModel>Files/0/ID}&fileName={FileModel>Files/0/EscapedName}&fileExtention={FileModel>Files/0/Extension}"
selected="{FileModel>selected}">
</UploadCollectionItem>
</items>
</UploadCollection>
Controller.js
/******************************************************************/
// onBeforeUploadStarts
/******************************************************************/
onBeforeUploadStarts: function (oEvent) {
let timestamp = new Date();
let oUploadCollection = sap.ui.core.Fragment.byId(
'idChangeFragment',
'idUploadCollection'
);
let newURL =
this.DOC_UPLOAD_URL +
// Document Added On*
'×tamp=' +
timestamp;
oUploadCollection.setUploadUrl(newURL);
let uplCol = oEvent.getSource();
let fu = uplCol._getFileUploader();
fu.setUseMultipart(true);
oEvent.getSource().setUploadUrl(newURL);
uplCol.mProperties.mode = 'SingleSelectMaster';
// Header
let oCustomerHeader = new sap.m.UploadCollectionParameter({
name: 'slug',
value: oEvent.getParameter('fileName'),
});
oEvent.getParameters().addHeaderParameter(oCustomerHeader);
},
/******************************************************************/
// onUploadComplete
/******************************************************************/
onUploadComplete: function (oEvent) {
let oUploadCollection = sap.ui.core.Fragment.byId(
'idChangeFragment',
'idUploadCollection'
),
cItems = oUploadCollection.aItems.length,
i;
for (i = 0; i < cItems; i++) {
if (oUploadCollection.aItems[i]._status === 'uploading') {
oUploadCollection.aItems[i]._percentUploaded = 100;
oUploadCollection.aItems[i]._status =
oUploadCollection._displayStatus;
// oUploadCollection.aItems[i]._status = 'display';
oUploadCollection._oItemToUpdate = null;
break;
}
}
this.getView().getModel().refresh();
oUploadCollection.getModel('FileModel').setData(null);
oUploadCollection.getModel('FileModel').refresh();
oUploadCollection.getBinding('items').refresh();
},
Thanks in advance.
Zayid
Request clarification before answering.
Helo Guys,
This post might help! https://github.com/SAP/openui5/issues/786
As for now, the UploadCollection Element is little buggy.
Here is what I did, I just set a URL model and I set the property url={URLModel>/url} in the XML view, and on the controller init method I set the value of the URLModel. By this way the it got posted even on the first Instance of the Upload.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hello Zayidu,
The reason might be the missing header with CSRF token:
var sToken = this.getModel().getSecurityToken();
oUploader.addHeaderParameter(new sap.ui.unified.FileUploaderParameter({
name: "x-csrf-token",
value: sToken
}));
If you are using at least UI5 library version 1.62, then another way would be using new control: https://ui5.sap.com/#/api/sap.m.upload.UploadSet. Check this blog from prajnaparmita.
I hope that helps a bit.
Regards Greg
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
76 | |
30 | |
10 | |
8 | |
8 | |
7 | |
7 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.