Question Re: New UploadSet implementation throwing Duplicate ids error in Technology Q&A

New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Fri, 28 May 2021 11:25:16 GMT

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

Re: New UploadSet implementation throwing Duplicate ids error

Margot — Fri, 28 May 2021 13:38:53 GMT

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?

Re: New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Mon, 31 May 2021 08:08:49 GMT

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.

Re: New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Thu, 03 Jun 2021 11:08:31 GMT

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?

Re: New UploadSet implementation throwing Duplicate ids error

Steve-Kangethe — Fri, 04 Jun 2021 00:05:08 GMT

Hi,

I'm in the same spot but was looking for a better solution than the one I found. Try removing the id of the Uploadset and see if it works. In case you need the id to use it somewhere else you will be where I am.

Re: New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Fri, 04 Jun 2021 06:49:41 GMT

Hello,

I can't do that since I need to add the upload url dynamically and for that I need the id in order to get the instance. What bothers me the most is that the UploadCollection works perfectly whereas the new control is faulty... I don't understand how they deprecated one in favour of the other...

Re: New UploadSet implementation throwing Duplicate ids error

Amiya — Tue, 15 Jun 2021 06:18:38 GMT

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

Re: New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Tue, 15 Jun 2021 07:18:16 GMT

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!

Re: New UploadSet implementation throwing Duplicate ids error

WouterLemaire — Mon, 09 Aug 2021 12:49:52 GMT

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...

Re: New UploadSet implementation throwing Duplicate ids error

davidgbarbero — Mon, 09 Aug 2021 12:55:19 GMT

Thank you Wouter!

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

Re: New UploadSet implementation throwing Duplicate ids error

former_member774909 — Tue, 07 Sep 2021 12:07:36 GMT

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.

Re: New UploadSet implementation throwing Duplicate ids error

nicorunge — Mon, 18 Oct 2021 12:03:31 GMT

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?!

Re: New UploadSet implementation throwing Duplicate ids error

nicorunge — Tue, 19 Oct 2021 07:37:15 GMT

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.

Re: New UploadSet implementation throwing Duplicate ids error

PaulTiemann — Tue, 30 Nov 2021 14:18:44 GMT

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) => {} }); },

Re: New UploadSet implementation throwing Duplicate ids error

jvanattenhoven — Thu, 27 Jul 2023 07:51:59 GMT

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

Re: New UploadSet implementation throwing Duplicate ids e...

Islam4 — Thu, 03 Oct 2024 09:40:21 GMT

Same here !

when i changed uploadSet to UploadCollection it works 🙂

thanks @WouterLemaire 🤝