How to Upload files in SAPUI5?

Question

How to upload file in SAP Netweaver server using SAPUI5? I tried to upload file using FileUploader but did not get the luck if any one can help it will be very appreciated.

Thanks in Advance

Answer 1

Nothing was added to the manifest nor the component nor index files. It is working for me, you just need to change the number of columns to whatever you want to fit your file.

UploadFile.view.xml

<VBox>
    <sap.ui.unified:FileUploader id="idfileUploader" typeMissmatch="handleTypeMissmatch" change="handleValueChange" maximumFileSize="10" fileSizeExceed="handleFileSize" maximumFilenameLength="50" filenameLengthExceed="handleFileNameLength" multiple="false" width="50%" sameFilenameAllowed="false" buttonText="Browse" fileType="CSV" style="Emphasized" placeholder="Choose a CSV file"/>
    <Button text="Upload your file" press="onUpload" type="Emphasized"/>
</VBox>

UploadFile.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller", "sap/m/MessageToast", "sap/m/MessageBox", "sap/ui/core/routing/History"], function(
    Controller, MessageToast, MessageBox, History) {
  "use strict";

  return Controller.extend("cafeteria.controller.EmployeeFileUpload", {
    onNavBack: function() {
      var oHistory = History.getInstance();
      var sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("admin", true);
      }
    },
    handleTypeMissmatch: function(oEvent) {
      var aFileTypes = oEvent.getSource().getFileType();
      jQuery.each(aFileTypes, function(key, value) {
        aFileTypes[key] = "*." + value;
      });
      var sSupportedFileTypes = aFileTypes.join(", ");
      MessageToast.show("The file type *." + oEvent.getParameter("fileType") +
        " is not supported. Choose one of the following types: " +
        sSupportedFileTypes);
    },
    handleValueChange: function(oEvent) {
      MessageToast.show("Press 'Upload File' to upload file '" + oEvent.getParameter("newValue") + "'");
    },
    handleFileSize: function(oEvent) {
      MessageToast.show("The file size should not exceed 10 MB.");
    },
    handleFileNameLength: function(oEvent) {
      MessageToast.show("The file name should be less than that.");
    },
    onUpload: function(e) {
      var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
      var fU = this.getView().byId("idfileUploader");
      var domRef = fU.getFocusDomRef();
      var file = domRef.files[0];
      var reader = new FileReader();
      var params = "EmployeesJson=";
      reader.onload = function(oEvent) {
        var strCSV = oEvent.target.result;
        var arrCSV = strCSV.match(/[\w .]+(?=,?)/g);
        var noOfCols = 6;
        var headerRow = arrCSV.splice(0, noOfCols);
        var data = [];
        while (arrCSV.length > 0) {
          var obj = {};
          var row = arrCSV.splice(0, noOfCols);
          for (var i = 0; i < row.length; i++) {
            obj[headerRow[i]] = row[i].trim();
          }
          data.push(obj);
        }
        var Len = data.length;
        data.reverse();
        params += "[";
        for (var j = 0; j < Len; j++) {
          params += JSON.stringify(data.pop()) + ", ";
        }
        params = params.substring(0, params.length - 2);
        params += "]";
        // MessageBox.show(params);
        var http = new XMLHttpRequest();
        var url = oResourceBundle.getText("UploadEmployeesFile").toString();
        http.onreadystatechange = function() {
          if (http.readyState === 4 && http.status === 200) {
            var json = JSON.parse(http.responseText);
            var status = json.status.toString();
            switch (status) {
              case "Success":
                MessageToast.show("Data is uploaded succesfully.");
                break;
              default:
                MessageToast.show("Data was not uploaded.");
            }
          }
        };
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.send(params);
      };
      reader.readAsBinaryString(file);
    }
  });
});

Answer 2

It would be good if we can see your code.

This should work.

var layout = new sap.ui.commons.layout.MatrixLayout();
layout.setLayoutFixed(false);

// create the uploader and disable the automatic upload
var oFileUploader2 = new sap.ui.commons.FileUploader({
    name : "upload2",
    uploadOnChange : false,
    uploadUrl : "../../../upload"
});
layout.createRow(oFileUploader2);

// create a second button to trigger the upload
var oTriggerButton = new sap.ui.commons.Button({
    text : 'Trigger Upload',
    press : function() {
        // call the upload method
        oFileUploader2.upload();
    }
});
layout.createRow(oTriggerButton);

layout.placeAt("sample2");

Answer 3

After researching a little more on this issue I finally solved this issue by myself I placed a file controller and a uploader in php which return the details related to files further, we can use it to upload it on server.

Here is the code I have used.

fileUpload.html

<!DOCTYPE html>  
<html><head>  
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />  
    <title>Hello World</title>  

    <script id='sap-ui-bootstrap' src='http://localhost/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection'  
    data-sap-ui-libs='sap.ui.commons'></script>   

<script>  
    var layout = new sap.ui.commons.layout.MatrixLayout();
    layout.setLayoutFixed(false);
    // create the uploader and disable the automatic upload
    var oFileUploader2 = new sap.ui.commons.FileUploader("myupload",{
                         name: "upload2",
                         uploadOnChange: true,
                         uploadUrl: "uploader.php",
                         uploadComplete: function (oEvent) {
    var sResponse = oEvent.getParameter("response");
    if (sResponse) {
        alert(sResponse);
    }
    }});                        
    layout.createRow(oFileUploader2);
    // create a second button to trigger the upload
    var oTriggerButton = new sap.ui.commons.Button({
                         text:'Trigger Upload',
                         press:function() {
    // call the upload method
    oFileUploader2.upload();

    $("#myupload-fu_form").submit();
    alert("hi");
    }
    });
    layout.createRow(oTriggerButton);
    layout.placeAt("sample2");                
</script>

</head>
<body class='sapUiBody'>
    <div id="sample2"></div>  
</body>
</html>

uploader.php

<?php
    print_r($_FILES);
?>