How to get the content of a file selected via File Uploader?

[mustafacengizde62]

Hi,
I am pretty new in SAPUI5 apps,
In my app i have a file uploader button.

What i need is very basic.
When user selects a file i need to get the content of this file (raw, binary...etc).

Then i can send this content to an odata service.

Here is my sample code: Please provide me a sample code or tell me where i can see the content.

Thanks.

Here is my: View1.view.xml

 <mvc:View controllerName="project2.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:unified="sap.ui.unified">

    <Page id="page" title="{i18n>title}">
        <content> 

        <HBox id="buttonLine" width="100%" justifyContent="Center">
            <Button xmlns="sap.m" text="Download Template" id="button0" width="620px" press="onDownloadTemplateButtonPress" /> 

            <unified:FileUploader id="fileUploader" change="onFileChange" visible="true" buttonOnly="true" width="620px" buttonText="Upload Excel File"/>
            </HBox>
        
        </content> 
    </Page>
    
</mvc:View> 

Here is my: View1.controller.js

----View1.controller.js----
onFileChange: function (oEvent) {
var oFile = oEvent.getParameter("files")[0];


if (oFile) {

this._oSelectedFile = oFile;

var oReader = new FileReader();

oReader.onload = function (oEvent) {

var sFileContent = oEvent.target.result;
var oPayload = {
FileName: this._oSelectedFile.name, // File name
MimeType: this._oSelectedFile.type, // File MIME type
FileContent: btoa(sFileContent) // Encode file content as Base64
};

var oTextArea = this.byId("fileContentArea");
oTextArea.setValue(sFileContent);
}.bind(this);

oReader.readAsText(oFile);
}
},

WHY IS MY QUESTION A SPAM?

WHICH PART?

AND WHY IS THE NUMBER WHICH INDICATES THE NUMBER OF PEOPLE WHO SAW THIS POST INCREASES WHENEVER I REFRESH THIS PAGE?

[LaxmanKadolkar]

Hello,

I have modified your code and below code will give you the base 64 value of the selected file. 

  var oFile = oEvent.getParameter("files")[0];


                if (oFile) {

                    this._oSelectedFile = oFile;

                    var oReader = new FileReader();

                    oReader.onload = function (oEvent) {

                        var sFileContent = oEvent.target.result;
                        var oPayload = {
                            FileName: this._oSelectedFile.name, // File name
                            MimeType: this._oSelectedFile.type, // File MIME type
                            FileContent: window.btoa(unescape(encodeURIComponent(sFileContent))) // Encode file content as Base64
                        };

                        var oTextArea = this.byId("fileContentArea");
                        oTextArea.setValue(oPayload.FileContent);
                    }.bind(this);

                    oReader.readAsText(oFile);
                }

Thanks

[mustafacengizde62]

Hi Laxman,

Thanks a lot for your answer, i will check this.

I also have another requirement. I need to upload data from a CSV file in my local computer.

But the pathway is certain. I mean, when user clicks a button in UI, he wont select any file. The file in local computer should be automatically uploaded.

For security reasons i cant provide this certain pathway inside javascript. And in Odata service it is not allowed to use 'ALSM_EXCEL_TO_INTERNAL_TABLE'  or similar.

How can i achieve this? I saw some blogs and videos about creating STREAM in odata, but dont know how to get the file.

Regards