Search code examples
odatasapui5

Data Gets Converted when passed to CREATE_STREAM

I have created an UI5 Application to read a file and send it to a custom OData Service in the Backend.

onUploadFile: function() {
    var oFileUpload =
        this.getView().byId("fileUploaderFS");

    var domRef = oFileUpload.getFocusDomRef();
    var file = domRef.files[0];
    var that = this;
    var reader = new FileReader();
    var ftype = file.type;
    reader.readAsArrayBuffer(file);
    reader.onload = function(evt) {
        var vContent = evt.currentTarget.result
        console.log(vContent);
        var hex = that.buf2hex(vContent);
        that.updateFile(hex, ftype);
    }
},

buf2hex: function(buffer) {
    return [...new Uint8Array(buffer)]
        .map(x => x.toString(16).padStart(2, '0'))
        .join('');
}

When I print the content of hex on the console before sending it to the backend, the data starts with 89504e470d0a1a0a0000000d49484 .... Even before sending the data in the payload to Odata Service it shows the correct data

enter image description here

Here is the Odata Service enter image description here

Inside the Create Stream the data when received, is getting converted into something else. As a result the image that has been saved is not opening. enter image description here

I tried to change the Data Type of Content in SEGW to Binary and it did not work. I also tried to convert the data in the create_stream but in vain. At last I tried reading the data in UI5 in different formats but of no use.

This whole Odata service works perfectly fine when I load the data through Postman Application. Please help me resolve this Issue. Thanks In Advance.

Solution

  • The sap.ui.unified.FileUploader has everything built in. No need for conversions from Buffer to hex.

    Make sure that your FileUploader knows where to upload the file

    <unified:FileUploader xmlns:unified="sap.ui.unified"
    id="fileUploaderFS"
    uploadUrl="/sap/opu/odata/sap/Z_TEST_SRV/FileSet"
/>

    The attribute uploadUrl points to the media entity for which you implemented the create_stream method.

    Then when the upload is triggered via button press, simply get the FileUploader, set the token (for security reasons when doing a POST request), and fire the upload method.

    onUploadFile: function () {
    const oFileUpload = this.getView().byId("fileUploaderFS");
    const sToken = this.getModel("nameOfTheModel").getSecurityToken();
    const oTokenParam = new FileUploaderParameter({
        name: "x-csrf-token",
        value: sToken
    });
    oFileUpload.removeAllHeaderParameters()
    oFileUpload.addHeaderParameter(oTokenParam);
    oFileUpload.upload();
}

    To use FileUploaderParameter, make sure to import it at the beginning:

    sap.ui.define([
    // ...,
    "sap/ui/unified/FileUploaderParameter"
], function (/*..., */FileUploaderParameter) {
    // ...

    Now about your File entity. When working with it via create_stream or read_stream, you don't use the entity structure but is_media_resource. This means your entity doesn't need a property content. Or most of the other properties (except a unique id and the mime type). All other properties would only be used if you want to do one of the CRUD methods (which happens almost never when dealing with streams).