Simple file upload using file uploader directly backend

This blog illustrates the best practice on how to import Data CSV, XLS,XLSX,JPEG etc upload on backend from UI5 without writing long code or use of third party API’s.

I have been looking for code where I can upload excel, images/text files without writing much javascript codes and requirement was not display the data on screen as well, direct upload.

Here, I have used simple File Uploader Controller latest version, to demonstrate. I have used the SAP walkthrough code with odata example and in real application situation

XML code

In filetype property you can set all the media types you wanted to allow your file upload code like fileType=”JPEG,CSV,XLSX”. other properties can be referenced from https://sapui5.hana.ondemand.com/#/api/sap.ui.unified.FileUploader

<mvc:View controllerName="comZcsvTest.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:u="sap.ui.unified" xmlns:l="sap.ui.layout">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Text text="hello"/>
<l:VerticalLayout>
<u:FileUploader id="idfileUploader" width="50%" sameFilenameAllowed="false" useMultipart="false" uploadUrl="/sap"
placeholder="Choose a CSV file" style="Emphasized"></u:FileUploader>
<Button text="Upload" press="uploadFile"/>
</l:VerticalLayout>
</content>
</Page>
</pages>
</App>
</mvc:View>

Controller code

In controller code, I have written simple lines of code to upload the files/media on CREATE_STREAM method, used addHearParameter and destroy Parameter method, As I found without destroy slug values are getting concatenated.

In method afterUploadCompleted, You can display message using “response” sap.m.MessageToast.show(“response”);

sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";

return Controller.extend("comZcsvTest.controller.View1", {
uploadFile: function(oEvent) {
var oFileUploader = this.getView().byId("idfileUploader");
this.csrfToken = this.getView().getModel().getSecurityToken();
oFileUploader.setSendXHR(true);
var headerParma = new sap.ui.unified.FileUploaderParameter();
headerParma.setName('x-csrf-token');
headerParma.setValue(this.csrfToken);
oFileUploader.addHeaderParameter(headerParma);
var headerParma2 = new sap.ui.unified.FileUploaderParameter();
headerParma2.setName('slug');
headerParma2.setValue(oFileUploader.getValue());
oFileUploader.addHeaderParameter(headerParma2);
oFileUploader.checkFileReadable().then(function() {
oFileUploader.upload();
oFileUploader.destroyHeaderParameters();
}, function(error) {
sap.m.MessageToast.show("The file cannot be read. It may have changed.");
}).then(function() {
oFileUploader.clear();
});
},
afterUploadComplete: function(oEvent) {
var response = oEvent.getParameters("response");
this.getView().byId("idfileUploader").clear();
}
});
});

Results:

media will upload without any third party api’s , Also code can be used for kind of media upload and supports latest SAP UI5 file upload control as well as older