on 12-18-2014 12:48 PM
Hi,
I am developing an UI5 application for approval of purchase requisitions.
I have already created the provision for viewing the uploaded attachments for a PR uploaded through ME52N.
Now, I have to create the provision of uploading the attachment for a PR as available in ME52N.
For this, I have already created an RFC in SAP R/3 which will accept the filename and the XSTRING of the file and it will create the attachment. The RFC has been tested also and working fine.
Now I have to create the SAPUI5 control in my application for this (choosing a file) and correspondingly converting the file to XSTRING and sending the filename and the XSTRING to the Gateway which will call the RFC.
Can anybody guide me how to make the provision of uploading the file (through uploader) and sending the file content in XSTRING format to the Gateway?
Any help will be highly appreciated.
Regards,
Subhabaha Pal
Thanks a lot Robbe.
I have done some development and it is working. I shall go through your code also.
Thanks Robbe once again for your kind help.
Regards,
Subhabaha Pal
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Subhabaha,
I am developing SAP Plant Maintenance Notification app in SAPUI5 XML view and I have requirement to upload attachments in SAP ECC with SAP Gateway.
Can you please suggest your approach to upload attachments.
Should I follow these blogs
Any help would be greatly appreciated?
Regards,
Harry
Hi,
The method I have used is little different.
In the XML page, I have written the following code -
<IconTabFilter
icon="sap-icon://add-coursebook">
<VBox class="marginBoxContent" >
<Label text="Upload Attachment File" />
<u:FileUploader
id="fileUploader"
name="myFileUpload"
width="400px"
tooltip="Upload your file to the local server"
uploadComplete="handleUploadComplete"/>
<Button
text="Upload File"
press="handleUploadPress"/>
</VBox>
</IconTabFilter>
Now the code for event handleUploadPress is as follows -
handleUploadPress : function (evt) {
oDialog = new sap.ui.commons.Dialog();
var Service1 = window.location.origin
+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/EBANPRPROCESSSet";
var Service2 = window.location.origin
+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";
var oView = this.getView();
var oUploader = oView.byId("fileUploader");
var oFileUploader = this.getView().byId("fileUploader");
// var file = jQuery.sap.domById(oFileUploader + "-fu").files[0];
// var BASE64_MARKER = 'data:' + file.type + ';base64,';
oDialog = new sap.ui.commons.Dialog();
var file = jQuery.sap.domById(oUploader.getId() + "-fu").files[0];
var BASE64_MARKER = 'data:' + file.type + ';base64,';
;
// var oRequest = sap.ui.getCore().getModel(this.getModelName())._createRequest();
var filename = file.name;
var var_banfn = oView.byId("Obj001").getBindingContext().getProperty("Banfn");
var reader = new FileReader();
// On load set file contents to text view
reader.onload = (function(theFile) {
return function(evt) {
var base64Index = evt.target.result.indexOf(BASE64_MARKER)
+ BASE64_MARKER.length;
// oModel1 = sap.ui.getCore().getModel("CreateModel");
// oModel.oData.field = evt.target.result.substring(base64Index);
var base64 = evt.target.result.substring(base64Index);
// *****************************8
var imgdata1 = {
"Banfn" : var_banfn,
"Filename" : filename,
"Filetype" : BASE64_MARKER,
"Attachment" : base64
};
var service_url = Service2;
imgdata = JSON.stringify(imgdata1);
$.ajaxSetup({ cache: false });
jQuery.ajax({
url : Service1,
type : "GET",
async: false,
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
// *****************End of CSRF Token
// Fetch******************************************//
success : function(data, textStatus, XMLHttpRequest) {
token = XMLHttpRequest.getResponseHeader('X-CSRF-Token');
}
});
$.ajaxSetup({
cache : false
});
jQuery.ajax({
url : service_url,
async : false,
dataType : 'json',
cache : false,
data : imgdata,
type : "POST",
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", token);
xhr.setRequestHeader("Content-Type", "application/json");
},
success : function(odata) {
oDialog.setTitle("File Uploaded");
oDialog.open();
document.location.reload(true);
},
error : function() {
oDialog.setTitle("File Uploaded");
oDialog.open();
document.location.reload(true);
}
});
};
})(file);
// Read in the file as text
reader.readAsDataURL(file);
return;
},
I think you will be able to make-out from the code. In the gateway front you have to make configuration accordingly. This code will work even in mobile devices. I am uploading purchase requisition attachments using this code.
Regards,
Subhabaha Pal
Hi Jasbir,
Sorry for little late reply.
Please find the piece of code below.
In the XML page, I have written the following code -
<IconTabFilter
icon="sap-icon://add-coursebook">
<VBox class="marginBoxContent" >
<Label text="Upload Attachment File" />
<u:FileUploader
id="fileUploader"
name="myFileUpload"
width="400px"
tooltip="Upload your file to the local server"
uploadComplete="handleUploadComplete"/>
<Button
text="Upload File"
press="handleUploadPress"/>
</VBox>
</IconTabFilter>
Now the code for event handleUploadPress is as follows -
handleUploadPress : function (evt) {
oDialog = new sap.ui.commons.Dialog();
var Service1 = window.location.origin
+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/EBANPRPROCESSSet";
var Service2 = window.location.origin
+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";
var oView = this.getView();
var oUploader = oView.byId("fileUploader");
var oFileUploader = this.getView().byId("fileUploader");
// var file = jQuery.sap.domById(oFileUploader + "-fu").files[0];
// var BASE64_MARKER = 'data:' + file.type + ';base64,';
oDialog = new sap.ui.commons.Dialog();
var file = jQuery.sap.domById(oUploader.getId() + "-fu").files[0];
var BASE64_MARKER = 'data:' + file.type + ';base64,';
;
// var oRequest = sap.ui.getCore().getModel(this.getModelName())._createRequest();
var filename = file.name;
var var_banfn = oView.byId("Obj001").getBindingContext().getProperty("Banfn");
var reader = new FileReader();
// On load set file contents to text view
reader.onload = (function(theFile) {
return function(evt) {
var base64Index = evt.target.result.indexOf(BASE64_MARKER)
+ BASE64_MARKER.length;
// oModel1 = sap.ui.getCore().getModel("CreateModel");
// oModel.oData.field = evt.target.result.substring(base64Index);
var base64 = evt.target.result.substring(base64Index);
// *****************************8
var imgdata1 = {
"Banfn" : var_banfn,
"Filename" : filename,
"Filetype" : BASE64_MARKER,
"Attachment" : base64
};
var service_url = Service2;
imgdata = JSON.stringify(imgdata1);
$.ajaxSetup({ cache: false });
jQuery.ajax({
url : Service1,
type : "GET",
async: false,
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
// *****************End of CSRF Token
// Fetch******************************************//
success : function(data, textStatus, XMLHttpRequest) {
token = XMLHttpRequest.getResponseHeader('X-CSRF-Token');
}
});
$.ajaxSetup({
cache : false
});
jQuery.ajax({
url : service_url,
async : false,
dataType : 'json',
cache : false,
data : imgdata,
type : "POST",
beforeSend : function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", token);
xhr.setRequestHeader("Content-Type", "application/json");
},
success : function(odata) {
oDialog.setTitle("File Uploaded");
oDialog.open();
document.location.reload(true);
},
error : function() {
oDialog.setTitle("File Uploaded");
oDialog.open();
document.location.reload(true);
}
});
};
})(file);
// Read in the file as text
reader.readAsDataURL(file);
return;
},
I think you will be able to make-out from the code. In the gateway front you have to make configuration accordingly. This code will work even in mobile devices. I am uploading purchase requisition attachments using this code.
Regards,
Subhabaha Pal
Thanks Subhabaha.
I solved my issue with your logic. I am using only base64 conversion logic. I am passing file name and content(BASE64_MARKER) as an import parameter of create deep entity in SAP Gateway.
var oFileUploader = sap.ui.getCore().byId("fileUploader")
filename = oFileUploader.getValue();
if (!oFileUploader.getValue()) {
sap.m.MessageToast.show("Choose a file first");
return;
}
var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];
var BASE64_MARKER = 'data:' + file.type + ';base64,';
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(evt) {
var base64Index = evt.target.result.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
base64 = evt.target.result.substring(base64Index);
}
})(file);
reader.readAsDataURL(file);
Thanks again.
Regards,
Harry
Hi,
From the line you have mentioned, 'Obj001' is the name of the Header element in the view detail view. 'Banfn' is a part of the header element. That I need to use for transferring file data and hence I have taken that in a variable.
You have to mention the view and then describe the element. The XML view code is mentioned below for the header.
<ObjectHeader
id="Obj001"
title="{BanfnTxt}"
number="{Field3}"
numberUnit="{Field2}" >
<attributes>
<ObjectAttribute text="{WerksTxt}" />
<ObjectAttribute text="{ErnamTxt}" />
<ObjectAttribute text="{AfnamTxt}" />
<ObjectAttribute text="{PrDate}" />
<ObjectAttribute text="{EkgrpTxt}" />
<ObjectAttribute text="{BsartTxt}" />
</attributes>
</ObjectHeader>
I hope this clarifies your doubt. I have taken the 'Banfn' element from the object header.
Regards,
Subhabaha Pal
Hi,
Sorry if I missed anything. Yes as you can see my code it is unified controller mentioned through pointer <u:FileUploader (u - means unified). As I have used XML view, I needed to use unified controller only.
For best performance of UI5 applications, IE version 10 is necessary. Anything less than that may not work will with UI5 controls. I have not checked my application in IE9 as I had upgraded to IE10 before working in UI5.
Please let me know in case any help required.
Regards,
Subhabaha Pal
Hi,
1.Can we upload any file(file format) using file uploader (or) is there any limitation with file formats.
2.Is there any size limit?
Thanks,
Magesh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
1. yes
2. no
Please create a new topic fore this question, or use the search function...
var file = jQuery.sap.domById("__loader0-fu").files[0];
jQuery.ajax({
type: 'POST',
url: "/sap/opu/odata/sap/Z.../Files",
headers: oHeaders,
cache: false,
contentType: "application/json",
dataType: "json",
processData: false,
data: file,
success: function(
data) {},
error: function(){}
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks Robbe for your kind reply.
I am using FileUploader control in XML view is the member of the library SAP.UI.UNIFIED.
This I need to send to gateway service in XSTRING format.
I have made a post in regard to it with details.
I suppose the code you have mentioned can be used for the FileUploader control in JS view. That FileUploader is member of the library sap.ui.commons.
It will be of great help if you can kindly mention the code in my scenario.
Regards,
Subhabaha Pal
Well, did you have a look at this example?
In the backend, the xstring is in the 'MediaResource' property.
Hi Robbe,
Thanks for your reply.
I have gone through that. There it is telling of updating in a server. However, in my case I have to send this to a gateway. I am searching for the correct code for that. My problem is as follows -
I am developing a SAPUI5 application for Purchase Requisition approval. The application is Fiori-like application.
Now there will be provision of uploading attachments for the PR, i.e. the approver will be able to upload any attachment necessary for the PR to approve.
I have already developed the back-end RFC and configured Gateway and following are the import parameters for the same -
Filename
Filetype
XString of the file (deep structure)
Now, in the detail XML page I have given the provision of uploading (not configured). The code of the above is as follows -
<IconTabFilter
icon="sap-icon://add-coursebook">
<VBox class="marginBoxContent" >
<Label text="Upload Attachment File" />
<u:FileUploader
id="fileUploader"
name="myFileUpload"
width="400px"
uploadComplete="handleUploadComplete"/>
<Button
text="Upload File"
press="handleUploadPress"/>
</VBox>
</IconTabFilter>
My Gateway service name and URL for uploading the file is as follows -
window.location.origin
+ "/sap/opu/odata/sap/ZEBAN_FINAL1_SRV/ATTACHUPLOADSet";
My import parameters in the gateway are as follows -
Banfn
Filename
Filetype
Attachment
It will be of great help if you can suggest me of some code I may write in the event handleUploadPress in order to send the attachment to the said gateway in the XString format.
Regards,
Subhabaha Pal
Hello
Please check the below mentioned blogs and documents
Thanks
Nabheet
Hi,
Sorry for this late reply. This is how I do it:
var file = jQuery.sap.domById("__loader0-fu").files[0]; |
var oHeaders = {
"x-csrf-token": window.xcsrf, | |
"slug": filename + "|" + file.type + "whatever info you like to send", | |
}; |
jQuery
.ajax({
type: 'POST',
url: "/url...",
headers: oHeaders,
cache: false,
contentType: "application/json",
dataType: "json",
processData: false,
data: file,
success: function(data) {
alert("uploaded"); |
},
error: function() {
alert("failed"); |
}
});
User | Count |
---|---|
82 | |
10 | |
10 | |
9 | |
7 | |
6 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.