UploadCollection upload request not getting triggered in the First Instance

[zayidu]

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

[zayidu · Accepted solution]

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.

[GregMalewski]

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