Cómo Cargar archivos en SAPUI5

Cómo cargar archivos en el servidor SAP Netweaver utilizando SAPUI5? He intentado subir un archivo utilizando FileUploader pero no tuvo suerte si uno puede ayudar a que será muy apreciada . Gracias de Antemano

InformationsquelleAutor Sandeep Garg | 2013-07-01

3 Kommentare

  1. 1

    Después de investigar un poco más en este tema que por fin se ha solucionado este problema por mí mismo he hecho un archivo de controlador y un uploader en php que devolver los detalles relacionados a archivos además, se puede utilizar para cargar en el servidor.

    Aquí está el código que he utilizado.

    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);
    ?>
    
  2. 1

    Nada fue agregado el manifiesto ni los componentes ni los archivos de índice. Se está trabajando para mí, sólo tiene que cambiar el número de columnas de a lo que usted desea para adaptarse a su archivo.

    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);
        }
      });
    });
    
  3. 0

    Sería bueno si podemos ver su código.

    Esto debería funcionar.

    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");
    
    • He probado tu código pero es tirar el Error HTTP 405 método no permitido. ¿Qué debo hacer para evitar esto

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea