Error handling with UI5 Upload Set before SAPUI5 1.98

[WouterLemaire]

Problem

Uploading files can fail and this needs to be handled. When using the UploadSet or UploadCollection, this can be done in the event UploadeComplete:

Unfortunately, this is only available from version 1.98 for the UploadSet and in the meanwhile UploadCollection is being deprecated from version 1.88. You could still consider using UploadCollection as long as you are below 1.88. When you upgrade to a newer version this requires you to change your app to use the UploadSet instead of the UploadCollection. Preferably, you use UploadSet anyway despite the version you’re on. Of course, you want to handle errors when uploading files, even in a version below 1.98. Exactly the problem described here: https://community.sap.com/t5/technology-q-a/error-handling-sap-ui5-control-uploadset/qaq-p/12498541

Although the answer on this question (in the url above) is the best way to move forward. Nevertheless, you could have good reasons upgrading to a higher UI5 version is not immediately possible. Therefore, I found a workaround to use the UploadSet and catch the errors even in versions below 1.98.

Solution

Start by adding the UploadSet to your view as you would do normally and configure it to your needs. Here you have an example on how I did it for the OData service ZWL_UPLOAD and entity AttachmentSet with property ID as key for uploading PDF files:

Source code in case you want to copy/paste it:

<upload:UploadSet id="UploadSet" instantUpload="true"
fileTypes="pdf"  mediaTypes="application/pdf"
items="{path: 'AttachmentSet', templateShareable: false}"
uploadCompleted="onUploadCompleted"
uploadUrl="/sap/opu/odata/sap/ZWL_UPLOAD/AttachmentSet">
    <upload:items>
        <upload:UploadSetItem
        fileName="{FileName}" mediaType="{MimeType}"
        url="/sap/opu/odata/sap/ZWL_UPLOAD/AttachmentSet(id='{ID}')/$value">
        </upload:UploadSetItem>
    </upload:items>
</upload:UploadSet>

Now, to know if the upload was successful or not, we use the onUploadCompleted event handler. Here we can get the result by getting the active uploader from the UploadSet control. In here, you’ll find all the requests sent for every item. Based on the item id of the file that has been completed, we find back the request. Inside the request we have the response headers including error messages:

Source code in case you want to copy/paste it:

public onUploadCompleted(event: Event): void {
              const uploader = (this.byId("UploadSet") as UploadSet);
              // @TS-ignore
              const activeUploader = uploader._getActiveUploader();
              const sapMessage = activeUploader._mRequestHandlers[event.getParameter("item").getId()].xhr.getResponseHeader("Sap-Message");
              if (sapMessage) {
                             const xmlModel = new XMLModel(undefined);
                             xmlModel.setXML(sapMessage);
                             xmlModel.getProperty("/message") && MessageBox.error(xmlModel.getProperty("/message"));
              }
}

I know, I’m using private functions which is not recommended… But what’s the alternative? Using something deprecated? Anyway, as soon as you are on the right version, change this using the response parameter in the event.

Hope it helps!

Kr, Wouter