New UploadSet implementation throwing Duplicate ids error

[Margot]

Hello all, I recently noticed that UploadCollection control was set to deprecated in favour of UploadSet control.

I am trying to switch from one to another, but it seems like an impossible task... When uploading or deleting a file uploaded I get the following error message:

this is how my uploadSet looks like in xml code:

<upload:UploadSet uploadEnabled="{= ${FormInputReady} && ${TaxStatus} !== 'M'}" beforeUploadStarts="onUploadSetChange"
  afterItemRemoved="onItemRemoved" id="uploadSet" items="{path: 'toAttachments', templateShareable: false}" maxFileNameLength="200"
  uploadCompleted="onUploadSetComplete" terminationEnabled="false">
  <upload:UploadSetItem visibleRemove="{EntryEnabled}" visibleEdit="false" fileName="{Name}" mediaType="{Mimetype}"
    url="{parts:['Area', 'Company', 'Period', 'FormId', 'IdAttachment', 'ItemId'], formatter:'.formatter.formatUploadURL' }">
    <upload:attributes>
      <ObjectAttribute
        title="Uploaded by"
        text="{UserFullname}"
        active="false"/>
      <ObjectAttribute
        title="Uploaded on"
        text="{ path: 'CreationDate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', pattern: 'dd.MM.yyyy - HH:mm' } }"
        active="false"/>
    </upload:attributes>
  </upload:UploadSetItem>
</upload:UploadSet>

And this is what my controller implementation looks like:

onUploadSetChange: function (oEvent) {
  var oUploadSet = oEvent.getSource();
  var oItemToUpload = oEvent.getParameter("item");
  var oCustomerHeaderToken = new sap.ui.core.Item({
    key: "x-csrf-token",
    text: this.getModel().getSecurityToken()
  });
  
  // Header Slug
  var oCustomerHeaderSlug = new sap.ui.core.Item({
    key: "slug",
    text: oItemToUpload.getFileName()
  });
  
  oUploadSet.removeAllHeaderFields();
  oUploadSet.addHeaderField(oCustomerHeaderToken);
  oUploadSet.addHeaderField(oCustomerHeaderSlug);
},


onItemRemoved: function (oEvent) {
  this.getModel().remove(oEvent.getParameters().item.getBindingContext().sPath, {
    success: this._refreshView.bind(this),
    error: jQuery.proxy(this.errorFnDelete, this)
  });


},


onUploadSetComplete: function (oEvent) {
  var myBundle = this.getView().getModel("i18n").getResourceBundle();
  sap.m.MessageToast.show(myBundle.getText("uploadSuccessful"));
  this._refreshView();
},

Can you please help me find where this error come from? I have used UploadCollection before and it worked as a charm...

Thank you all

[Margot]

Hi David,

I have some doubts that this error resulted from replacing the one control by the other. Normally this error occurs when a view gets called more than once or rather again without been destroyed first.

So first question from my side to you: You said, the app worked before without any issue. Are you sure you did not change anything in addition? Does it work when you replace the UploadSet control by the deprecated UploadCollection control again?

Second: Can you elaborate a bit on the app structure? Do you have any fragments in your app or reuse the view in other apps?

[davidgbarbero]

Hello Margot,

View is not called more than once, it is called only once, there is one fragment inside my view which is added on initialization, but that fragment does not contain the uploadSet.

Furthermore, the deprecated UploadCollection works perfectly fine, upload, download, delete... even having both at the same time, when I do everything from the UploadCollection, everything works fine and the uploadSet works as expected. Problem comes when I try to do it via the UploadSet.

Image shows both UploadSet ( left ) and UploadCollection (right 😞

When uploading or deleting from UploadCollection (after model refresh), UploadSet gets updated perfectly fine, only when I do those actions (upload, delete) from UploadSet it crashes.

I did not change absolutely anything from the behaviour of the UploadSet compared to the UploadCollection one. These are both controls compared:

<upload:UploadSet uploadEnabled="{= ${FormInputReady} && ${TaxStatus} !== 'M'}" beforeUploadStarts="onUploadSetChange"
  afterItemRemoved="onItemRemoved" id="uploadSet" items="{path: 'toAttachments', templateShareable: false}" maxFileNameLength="200"
  uploadCompleted="onUploadSetComplete" terminationEnabled="false">
  <upload:UploadSetItem visibleRemove="{EntryEnabled}" visibleEdit="false" fileName="{Name}" mediaType="{Mimetype}"
    url="{parts:['Area', 'Company', 'Period', 'FormId', 'IdAttachment', 'ItemId'], formatter:'.formatter.formatUploadURL' }">
    <upload:attributes>
      <ObjectAttribute
        title="Uploaded by"
        text="{UserFullname}"
        active="false"/>
      <ObjectAttribute
        title="Uploaded on"
        text="{ path: 'CreationDate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', pattern: 'dd.MM.yyyy - HH:mm' } }"
        active="false"/>
    </upload:attributes>
  </upload:UploadSetItem>
</upload:UploadSet>


<UploadCollection uploadEnabled="{= ${FormInputReady} && ${TaxStatus} !== 'M'}" change="onUploadCollectionChange"
  fileDeleted="onFileDeleted" id="UploadCollection" items="{path: 'toAttachments', templateShareable: false}" maximumFilenameLength="200" multiple="false"
  showSeparators="None" uploadComplete="onUploadComplete" mode="Delete">
  <UploadCollectionItem contributor="{UserFullname}" enableEdit="false" fileName="{Name}" id="UploadCollectionItem" mimeType="{Mimetype}"
    enableDelete="{EntryEnabled}"
    uploadedDate="{ path: 'CreationDate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', pattern: 'dd.MM.yyyy - HH:mm' } }"
    url="{parts:['Area', 'Company', 'Period', 'FormId', 'IdAttachment', 'ItemId'], formatter:'.formatter.formatUploadURL' }"/>
</UploadCollection>

XML is adapted to the new name of the properties, but everything that was used before it is used now.
When it comes to controller, I do the same I posted before for both controls, Slug and x-csrf-token headers when uploading, refreshing the view on upload complete and calling a Delete Odata operation when removing a file (refreshing afterwards if successfull).

It is weird that only if I call OData CRUD operations, control crashes... Also, when uploading files, I get an incomplete file entry plus the uploaded (when it works) file entry. How does this work? Why doesn't the control delete those incomplete entries by default once the file is uploaded? There is no documentation whatsoever on how to remove those files, I guess the way is not to call removeIncompleteItems( ) after upload completed...

Thank you very much for your answer and help. Looking forward to your answer.

[davidgbarbero]

Hello margot.wollny , did you have time to check what I posted? Is it a bug from the new control? or am I doing something wrong?

[WouterLemaire]

We have a similar problem with the UploadSet. When we open the app, close it and open again we get the same error "duplicate id ...-uploader". Switching to UploadCollection solved...

[davidgbarbero]

Thank you Wouter!

Same here, I gave up trying to implement uploadSet and went back to UploadCollection...

[former_member774909]

I have the same issue here.

I notice that the issue appears as soon as I try to change the model used in the UploadSet for the property "items". We do that after the upload to ensure the model is uptodate.

[nicorunge]

Can confirm that this problem still exists. Working with a CAP Backend using the sap/cds-odata-v2-adapter-proxy.
When uploading and deleting in different combinastions the error occurs. And I'm also wondering about the incopmpleted items. Why do we manually have to call removeIncompleteItems( ) to get rid of them, after upload finished?!

[nicorunge]

Stumbled across this link: https://stackoverflow.com/questions/66409533/ui5-uploadcollection-issue

Adding

oEvent.getParameters().item.destroy()

to the afterItemRemoved Event worked for me as well.

[PaulTiemann]

I can confirm that the solution from nicorunge is working.

My afterItem Removed looks like:

onAfterItemRemoved:function(oEvent){ let oItem = oEvent.getParameter("item") let sPath = oItem.getBindingContext().getPath(); let oModel = this.getView().getModel() oModel.remove(sPath, { success: (oData) => {oItem.destroy()}, error: (oError) => {} }); },

[jvanattenhoven]

I cannot confirm the solution (item.destroy()) is working.

[Amiya]

Hello David,

I checked with both UploadSet and UploadColelction, this is working as expected for me.

Here I am attaching an example for the same implementation.

Also what is the implementation inside this._refreshView()? As this method is not here in my example, it might be causing some problem.

As Margot mentioned, this error occurs when a view gets called more than once.

Can you please share an example where this issue is being reproduced?

Regards,

Amiya Ranjan

[davidgbarbero]

Hello Amiya,

Thank you for your example, but it is not quite valid since you are not using an OData service, everything is local and no real upload is made... I have tried a local model and works as your example with no problem, so the issue must be in the OData part...

Also, in your example, the uploaded files never get uploaded and they never get past the incomplete-item status, which would lead you to another issue, which is that incomplete items don't get removed and duplicated items appear (the incomplete item and the uploaded item).

Implementation of _refreshView only refreshes the model ( this.getView().getModel().refresh() ) after a successful upload or a successful delete operation.

I built a sample application with no more than the uploadSet control, with the OData service implemented, and I get the same error. Just a view, a controller, an UploadSet control and the OData service.

Thank you for your help!