3743

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

Answer1:

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

Here is the code I have used.

<blockquote>

fileUpload.html

</blockquote> <!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> <blockquote>

uploader.php

</blockquote> <?php print_r($_FILES); ?>

Answer2:

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");

Answer3:

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.

<h3>UploadFile.view.xml</h3> <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"/> <text="Upload your file" press="onUpload" type="Emphasized"/> </VBox> <h3>UploadFile.controller.js</h3> 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); } }); });

Recommend

  • dojo tabbar programatically created but not fixed at the right position
  • Template collision in constructors
  • jQuery in firefox extension
  • Detecting both left and right mouse movement and no movement
  • The binary being analyzed must be an executable trigger.io
  • Hudson dependencies
  • Disable div click on Ajax start and re-enable it on Ajax complete
  • 2-table interaction: insert, get result, insert
  • Visual studio 2015 keystroke with mouse button
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • How can I make this modal persistent?
  • passing a default argument to a browserify module
  • HttpClient: disabling chunked encoding
  • How to make Twilio api Post request with the help of AFNetworking?
  • Why am I getting a “405 Method not allowed” error on “Put” operations through a WCF Resful service?
  • Why isn't obj.style.left = “200px”; working in this code?
  • Can't remove headers after they are sent
  • How to convert SOAP response with xsi values to json in WSO2esb
  • perl, mysql - fasting way to upload a csv file into mysql?
  • Trying to get the char code of ENTER key
  • How to add a focus style to an editable ComboBox in WPF
  • saving file generated by TCPDF
  • Calling Worksheet functions from vba in foreign language versions of Excel
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • azure media services - The request body is too large and exceeds the maximum permissible limit
  • Play WS (2.2.1): post/put large request
  • Read a local file using javascript
  • Why value captured by reference in lambda is broken? [duplicate]
  • MySQL WHERE-condition in procedure ignored
  • Web-crawler for facebook in python
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#
  • WPF Applying a trigger on binding failure
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • coudnt use logback because of log4j
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • How to Embed XSL into XML
  • java string with new operator and a literal