sap.ui.unified.FileUploader change http methode / allow post on segw

Question

I am working on a file upload in UI5. I can not use the fileupload via associations since I need the binary before writing in my table.

The problem is sap.ui.unified.FileUploader always uses the POST HTTP method, this causes an error in the backend system:

405 Methode not allowed

I found this SAP Blog FileUploader - 405 Method Not Allowed in which the problem is solved by extending the control and changing the HTTP method.

My question is there a more standard way to achieve that? I did not find any property in the control to configure the HTTP method.

Options:

• Maybe in the XHR Settings?
• Can you allow POST in SEGW or the user exit classes?

Answer 1

Upload/Download with SEGW

• Step by Step on how to use the SAPUI5 file upload feature
• File Upload/Download through NetWeaver Gateway
• Uploading Files to SAP GW, Downloading Files from SAP GW – New Techniques
• Newest Blog!!: Upload/download File in SAP UI5 Application using Gateway

Binary before Upload: only possible via Deffered & XHR

getBase64Promise: function (file) {
        return new Promise(function (resolve, reject) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var encoded = reader.result.replace("data:", "").replace(/^.*;base64,/, "");
                if ((encoded.length % 4) > 0) {
                    encoded += "=".repeat(4 - (encoded.length % 4));
                }
                resolve(encoded);
            };
            reader.onerror = function () {
                reject("error");
            };
        });
},


fileUploadChange: function (oControlEvent) {
        var that = this;
        var aFiles = oControlEvent.getParameters().files;
        var currentFile = aFiles[0];
        var sUrl = "yourNeeds..";
        this.getBase64Promise(currentFile).then(function (data) {
            that.xhrRequest(data, oView, sUrl);
        });
    },


xhrRequest: function (data, oView, url) {
        var oImage = "data:image/png;base64, " + data;
        oRequest = JSON.stringify(oImage);
        var xhrReadyStateChange = function () {
            if (this.readyState === this.DONE) {
                console.log("200", JSON.parse(this.response));
            }
        };

        var xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.addEventListener("readystatechange", xhrReadyStateChange);
        xhr.open("POST", url, false); // setting request method & API endpoint, the last parameter is to set the calls as synchyronous
        xhr.setRequestHeader("Accept", "application/json"); // adding request headers
        xhr.setRequestHeader("Content-Type", "application/json"); // adding request headers
        xhr.send(oRequest); // sending request  
    }
});

Answer 2

This may be due to the browser support of UI5.

Under the hood the file uploader is a <div> that contains a <form>.

The file can be uploaded either via XMLHttpRequest (XHR) or by simply submitting the form. Forms only support GET and POST.

If you want to use PUT the first step is setting sendXHR="true".

But XHR does not work in IE9. For some reason the UI5 devs then decided:

If IE9 cannot use PUT then no one should!

So the second step is to create a subclass of the FileUploader, add a new property for the HTTP method and overwrite the _sendFilesWithXHR method. This is as standard as it gets ;)

Btw this is the line where they hardcoded "POST" which needs to be replaced with a dynamic call of the new property httpMethod.