how to use oModel.create() method in SAP UI5

I have this method in my controller in Business Applications Studio SAPUI5 but it doesn’t work as expected (I want the file to be attached to the invoice with the provided Objectkey which works perfectly fine with the second function, but when executing the first function, the file will be uploaded and sent to the backend, but i‘m unable to open it (further information below)). I don‘t get any error message when executing the first function, the upload process is successfull, i just can‘t open the file afterwards.

onFileSelected: function (oEvent) {
  var oFile = oEvent.getParameter("files")[0];
  if (oFile) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var binaryContent = e.target.result;            
      var oModel = this.getView().getModel();
                            
      oModel.refreshSecurityToken(function (data, response) {
        var sToken = response.headers['x-csrf-token'];
        var sObjectKey = "Placeholder";
        var sObjectType = "BUS2081";
        var sFileName = oFile.name;
        var sSlug = btoa(sFileName);
        var sContentType = oFile.type;
                
        // Binary content as payload
        var oPayload = binaryContent;
                
        oModel.create("/OriginalContentSet", oPayload, {
          headers: {
            "x-csrf-token": sToken,
            "Slug": sSlug,
            "Objectkey": sObjectKey,
            "Objecttype": sObjectType,
          },
          success: function (data) {
            MessageToast.show("Success");
          },
          error: function (oError) {
            MessageToast.show("Error");
          }
        });
      }.bind(this), function () {
        MessageToast.show("Error with the CSRF Token");
      });
    }.bind(this);
    reader.readAsArrayBuffer(oFile); // Read file as binary ArrayBuffer (no Base64 encoding)
  } else {
    MessageToast.show("No file selected");
  }
}

I am a 100% sure, that the variables like Slug, Contenttype, token etc. are correct (I´ve replaced some variables with a Placeholder, but that doesn’t matter, I just did this for this questions because of privacy reasons). I also have another method, that works perfectly fine, but in that method I’ve used Ajax instead of oModel.create. Now I want to do the same, but with oModel.create, but it doesn’t work. The file is uploaded correctly, but when trying to open it it tells me that this file can’t be opened and that "It may be damaged or in a format that Preview does not recognize." … I don’t get an error during the upload process (sometimes I get "no handler for data", but I only got that when trying out different solutions…with the provided code I don’t get any error). I want the file to be attached to the invoice with the provided Objectkey, which works with both methods, but only the Ajax method also allows me to open the file after uploading it. here’s the working method with Ajax as comparison:

onFileSelected: function (oEvent) {
  var oFile = oEvent.getParameter("files")[0];
  if (oFile) {
    var reader = new FileReader();
    reader.onload = function (e) {
      var binaryContent = e.target.result;            
      var oModel = this.getView().getModel();
                            
      oModel.refreshSecurityToken(function (data, response) {
        var sToken = response.headers['x-csrf-token'];
        var sObjectKey = "Placeholder";
        var sObjectType = "BUS2081";
        var sFileName = oFile.name;
        var sSlug = btoa(sFileName);
        var sContentType = oFile.type;
                
        $.ajax({
          url: "placeholder/OriginalContentSet",
          type: "POST",
          data: binaryContent,
          processData: false, 
          contentType: sContentType,
          headers: {
            "x-csrf-token": sToken,
            "Slug": sSlug,
            "Objectkey": sObjectKey,
            "Objecttype": sObjectType
          },
          success: function (data) {
            MessageToast.show("Success");
          },
          error: function (oError) {
            MessageToast.show("Error");
          }
        });
      }.bind(this), function () {
        MessageToast.show("Error.");
      });
    }.bind(this);
    reader.readAsArrayBuffer(oFile); // Read file as binary ArrayBuffer (no Base64 encoding)
  } else {
    MessageToast.show("No file selected");
  }
}

I’ve tried changing the code a little bit, like creating a payload object with also the filename and content type in it instead of just saving the binary content into the payload variable, as well as moving variables from the payload object inside the header and the other way round, but the result is always the same.

You need to sign in to view this answers