JavaScript Blob to FormData with SAPUI5 mobile app

Question

I know there are several threads about this topic, but I was not able to identify the problem in my case.

I have an application, where I upload an image to an endpoint-URL and after processing I'll receive a response. Works fine so far. The file is contained within a formdata object when using FileUploader-Control from SAPUI5.

When switching from file upload to "taking a picture with smartphone-camera", I dont have a file, I have an base64 dataurl (XString) image object.

var oImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAA…8ryQAbwUjsV5VUaAX/y+YSPJii2Z9GAAAAABJRU5ErkJggg=="} // some lines are missing > 1 million lines

I thought converting it to blob and appending it to FormData might be the solution, but it does not work at all.

var blob = this.toBlob(oImage)
console.log("Blob", blob); // --> Blob(857809) {size: 857809, type: "image/png"} size: 857809 type: "image/png" __proto__: Blob 

var formData = new window.FormData();
formData.append("files", blob, "test.png");
console.log("FormData", formData); // seems empty --> FormData {}__proto__: FormData

Functions (works fine from my perspective)

toBlob: function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var bb = new Blob([ab], {
            "type": mimeString
        });
        return bb;
},

This is my problem, FormData is empty and my POST-request throws an undefined error (Loading of data failed: TypeError: Cannot read property 'status' of undefined at constructor.eval (...m/resources/sap/ui/core/library-preload.js?eval:2183:566))

//Create JSON Model with URL
var oModel = new sap.ui.model.json.JSONModel();
var sHeaders = {
    "content-type": "multipart/form-data; boundary=---011000010111000001101001",
    "APIKey": "<<myKey>>"
};

var oData = {
    formData
};

oModel.loadData("/my-destination/service", oData, true, "POST", null, false, sHeaders);

oModel.attachRequestCompleted(function (oEvent) {
    var oData = oEvent.getSource().oData;
    console.log("Final Response XHR: ", oData);
});

Thanks for any hint

Answer 1

The upload collection is a complex standard control that can be used for attachment management. On desktop it opens a file dialog, on mobile it opens the ios or android photo options, which means picking a photo from the camera roll, or taking a new photo.

Fairly basic example, including the upload URL's and other handlers you'll need. More options are available, adjust to suit your needs. In your XML:

<UploadCollection 
    uploadUrl="{path:'Key',formatter:'.headerUrl'}/Attachments" 
    items="{Attachments}" 
    change="onAttachUploadChange" 
    fileDeleted="onAttachDelete" 
    uploadEnabled="true"
    uploadComplete="onAttachUploadComplete">
    <UploadCollectionItem 
        documentId="{DocID}"
        contributor="{CreatedBy}" 
        fileName="{ComponentName}" 
        fileSize="{path:'ComponentSize',formatter:'.formatter.parseFloat'}" 
        mimeType="{MIMEType}" 
        thumbnailUrl="{parts:[{path:'MIMEType'},{path:'DocID'}],formatter:'.thumbnailURL'}" 
        uploadedDate="{path:'CreatedAt', formatter:'.formatter.Date'}" url="{path:'DocID',formatter:'.attachmentURL'}" visibleEdit="false" 
        visibleDelete="true" />
</UploadCollection>

Here's the handlers. Especially the onAttachUploadChange is important. I should mention there's no explicit post. If the uploadUrl is set correctly a post is triggered anyway.

onAttachUploadChange: function(oEvent) {
  var csrf = this.getModel().getSecurityToken();
  var oUploader = oEvent.getSource();
  var fileName = oEvent.getParameter('files')[0].name;
  oUploader.removeAllHeaderParameters();
  oUploader.insertHeaderParameter(new UploadCollectionParameter({
    name: 'x-csrf-token',
    value: csrf
  }));
  oUploader.insertHeaderParameter(new UploadCollectionParameter({
    name: 'Slug',
    value: fileName
  }));
},

onAttachDelete: function(oEvent) {
  var id = oEvent.getParameter('documentId');
  var oModel = this.getModel();

  //set busy indicator maybe?

  oModel.remove(`/Attachments('${encodeURIComponent(id)}')`, {
    success: (odata, response) => {
      //successful removal
      //oModel.refresh();
    },
    error: err => console.log(err)
  });
},

onAttachUploadComplete: function(oEvent) {

  var mParams = oEvent.getParameter('mParameters');
  //handle errors an success in here. Check `mParams`. 
}

as for the formatters to determine URLs, that depends on your setup. In the case below, the stream is set up on the current binding contect, in which case this is one way to do it. You'll need the whole uri so including the /sap/opu/... etc bits.

  headerUrl: function() {
    return this.getModel().sServiceUrl + this.getView().getBindingContext().getPath()
  },

URL for attachments is similar, but generally points to an entity of the attachment service itself.

  attachmentURL: function(docid) {
    return this.getModel().sServiceUrl + "/Attachments('" + docid + "')/$value";
  },

You could fancy it up to check if it's an image, in which case you could include the mime type to show a thumbnail.

There might be better ways of doing this, but I've found this fairly flexible...