FileUploader - 405 Method Not Allowed

[former_member182374]

Hello Experts,

I've followed the excellent set of blogs by Peter Marcely regarding SAPUI5 & Gateway attachments.

I would like to implement file uploading without entities associations.

The code is from this blog:

http://scn.sap.com/community/developer-center/front-end/blog/2014/07/28/upload-image-to-sap-gateway-...

var oFileUploader = new sap.ui.unified.FileUploader({  
    uploadUrl : "/sap/opu/odata/sap/<service>/AttachmentCollection('1')/$value",  
        name: "simpleUploader",   
        uploadOnChange: false,  
        sendXHR: true,  
        useMultipart: false,  
        headerParameters: [  
            new sap.ui.unified.FileUploaderParameter({name: "x-csrf-token", value: sCSRF })
        ],  
        uploadComplete: function (oEvent) {  
            var sResponse = oEvent.getParameter("response");  
                if (sResponse) {  
                    sap.ui.commons.MessageBox.show("Return Code: " + sResponse, "Response", "Response");  
        }  
        }                      
});  

// create a button to trigger the upload  
var oTriggerButton = new sap.ui.commons.Button({  
    text:'Upload',  
        press:function() {  
        // call the upload method  
        oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({name: "slug", value: oFileUploader.getValue() }));
                oFileUploader.upload();  
        }  
});  

The problem is that I'm getting '405 Method Not Allowed' when running from SAPUI5 (the method is automatically set to POST).

If I run this from gateway client and add a file, the method changes to PUT and it works.

Both create_stream and update_stream methods are implemented.

How can I solve this issue?

Regards,

Omri

[former_member182374 · Accepted solution]

Hi,

After reviewing the fileUploader code I'm thinking of overriding the control and add a property "httpMethod" (which I'll be set to "PUT").

The parameter will be used in the xhr request (in the standard control "POST" is hardcoded).

p.s

I'm sure there is proper way to send a post request from the fileUploader to SAP gateway...

Regards,

Omri

[former_member182374 · Accepted solution]

Solved it my own by enhancing FileUpload Control:

1) Added new property 'httpMethod'.

2) Replace line 40 with 41.

Not my best work but it's working (-:

Omri

"use strict";

jQuery.sap.declare("controls.MyFileUpload");

jQuery.sap.require("sap.ui.unified.FileUploader");


sap.ui.unified.FileUploader.extend('controls.MyFileUpload', {

  metadata: {
    properties: {
      //httpMethod: {type: 'string', defaultValue: 'POST'}
        httpMethod: {type: 'string', defaultValue: 'PUT'}
    }
  },

  renderer: {},

    upload : function() {
        //supress Upload if the FileUploader is not enabled
        if (!this.getEnabled()) {
            return;
        }
        var uploadForm = this.getDomRef("fu_form");

        try {
            if (uploadForm) {
                this._bUploading = true;
                if (this.getSendXHR() && window.File) {
                    var aFiles = jQuery.sap.domById(this.getId() + "-fu").files;
                    if (aFiles.length > 0) {
                        if (this.getUseMultipart()) {
                            //one xhr request for all files
                            var iFiles = 1;
                        } else {
                            //several xhr requests for every file
                            var iFiles = aFiles.length;
                        }
                        var aXhr = [];
                        for (var j = 0; j < iFiles; j++) {
                            //keep a reference on the current upload xhr
                            this._uploadXHR = new window.XMLHttpRequest();
                            aXhr[j] = {
                                xhr: this._uploadXHR,
                                requestHeaders: []
                            };
                            //aXhr[j].xhr.open("POST", this.getUploadUrl(), true);
                            aXhr[j].xhr.open(this.getHttpMethod(), this.getUploadUrl(), true);
                            if (this.getHeaderParameters()) {
                                var oHeaderParams = this.getHeaderParameters();
                                for (var i = 0; i < oHeaderParams.length; i++) {
                                    var sHeader = oHeaderParams[i].getName();
                                    var sValue = oHeaderParams[i].getValue();
                                    aXhr[j].xhr.setRequestHeader(sHeader, sValue);
                                    aXhr[j].requestHeaders.push({name: sHeader, value: sValue});
                                }
                            }
                        }
                        if (this.getUseMultipart()) {
                            var formData = new window.FormData();
                            var name = jQuery.sap.domById(this.getId() + "-fu").name;
                            for (var i = 0; i < aFiles.length; i++) {
                                formData.append(name, aFiles[i]);
                            }
                            formData.append("_charset_", "UTF-8");
                            var data = jQuery.sap.domById(this.getId() + "-fu_data").name;
                            if (this.getAdditionalData()) {
                                var sData = this.getAdditionalData();
                                formData.append(data, sData);
                            } else {
                                formData.append(data, "");
                            }
                            if (this.getParameters()) {
                                var oParams = this.getParameters();
                                for (var i = 0; i < oParams.length; i++) {
                                    var sName = oParams[i].getName();
                                    var sValue = oParams[i].getValue();
                                    formData.append(sName, sValue);
                                }
                            }
                            this.sendFiles(aXhr, [formData], 0);
                        } else {
                            this.sendFiles(aXhr, aFiles, 0);
                        }
                        this._bUploading = false;
                    }
                } else {
                    uploadForm.submit();
                }
                jQuery.sap.log.info("File uploading to " + this.getUploadUrl());
                if (this.getSameFilenameAllowed() && this.getUploadOnChange()) {
                    this.setValue("", true);
                }
            }
        } catch (oException) {
            jQuery.sap.log.error("File upload failed:\n" + oException.message);
        }
    }


});

[TimMuchena · Accepted solution]

This message was moderated.