unable to upload files using UploadCollection in SAPUI5

Question

I am receiving 403 Forbidden error when I try to upload a file using UploadCollection. The code in my view.js is:

      var oOUpload = new sap.m.UploadCollection("oinspupload",{
        multiple : true,
        sameFilenameAllowed : true,
        instantUpload : false,
        uploadUrl :  "/sap/opu/odata/sap/ZACCBILL_SRV/FileSet",
/*      uploadComplete : function(oEvent){
            //alert ("File Uploaded successfully");
        //  oController.fileUpload(oEvent);
        }, */
        fileDeleted : function(oEvent){
            oController.fileDelete(oEvent);
        },
        fileRenamed : function(oEvent){
            alert ("File renamed successfully");
            //oController.fileRename(oEvent);
        }
    }); 

The code in my view.controller is:

         OData.request({
                requestUri : sServiceUrl,
                method : "GET",
                headers : 
                {
                    "X-Requested-With" : "XMLHttpRequest",
                    "Content-Type" : "application/atom+xml",
                    "DataServiceVersion" : "2.0",
                    "Authorization" : AuthToken,
                    "X-CSRF-Token" : "Fetch"
                }

            },
            function(data, response) {
                debugger;
                if(sap.ui.Device.browser.chrome || sap.ui.Device.browser.msie || sap.ui.Device.browser.safari){
                    header_xcsrf_token = response.headers['x-csrf-token'];
                }else if(sap.ui.Device.browser.firefox){
                    header_xcsrf_token = response.headers['X-CSRF-Token']; 
                }
                xcsrf_token_ref.header_xcsrf_token = header_xcsrf_token;
                csrftoken = xcsrf_token_ref.header_xcsrf_token; 
            debugger;
            uploadattachments(xcsrf_token_ref);
            },
            function(err) {
                debugger;
                var request = err.request; // the request that was sent. 
                var response = err.response; // the response that was received. 
                alert("Error in Get -- Request "
                        + request + " Response "
                        + response);
            });


  function uploadattachments(token){
debugger;
    var uploader;           
        uploader= sap.ui.getCore().byId("oinspupload"); 

         var aItems = uploader.getItems();
          var slug, sequence;
          for (i = 0; i < aItems.length; i++) { 
            sequence =  i + 1;
            slug = "CONTAINERID1000040100;STATUSIB;SEQUENCE" + sequence+          ";FILENAMECamera.png" ;
    uploader.addHeaderParameter(new sap.m.UploadCollectionParameter({name: "slug", value: slug }));  
    debugger;
    uploader.addHeaderParameter(new sap.m.UploadCollectionParameter({name: "X-Csrf-Token", value: token.header_xcsrf_token }));

    uploader.upload();
}
}

Please don't mind the missing parenthesis as the code above is not the complete code.

The above code works fine with fileuploader. I am sure the issue is that the uploadcollection is not passing the fetched CSRF Token properly but I am unable to figure out what's wrong.

Answer 1

Finally Found the solution myself with the help of the following blog http://scn.sap.com/community/developer-center/front-end/blog/2016/03/29/using-the-uploadcollection-to-uploaddownload-archivelink-files-via-gateway

Upload Collection only works with instantUpload as true and does not work with instantUpload as false as of version 1.32.X. UploadCollection is Buggy and is yet to be rectified in the future versions. Also the CSRF token validation needs to be done in the change event. Below is the code:

View.js

    var oOUpload = new sap.m.UploadCollection("oinspupload",{
        multiple : true,
        sameFilenameAllowed : false,
        instantUpload : true,
        uploadUrl :  "/sap/opu/odata/sap/ZACCBILL_SRV/FileSet",
        fileDeleted : function(oEvent){
            oController.fileDelete(oEvent);
        },
        fileRenamed : function(oEvent){
            alert ("File renamed successfully");
        },
        change: function(oEvent) {  
            debugger;
            csrftoken = xcsrf_token_ref.header_xcsrf_token; 
            var oUploadCollection = oEvent.getSource();  
            var oCustomerHeaderToken = new sap.m.UploadCollectionParameter({  
                name : "x-csrf-token",  
                value :  csrftoken  
            });  
            oUploadCollection.addHeaderParameter(oCustomerHeaderToken);
        }, 
    });