Hi All,
This blog is about identifying special characters and LOTE's (Langages Other Than English) in a file name when we upload a file from user's machine.
Scenario:
Upload a file name containing special chars. Ex:A Germanic file name.
Encode the file name using the below method:
encodeURIComponent(file.name)
Pass this value to the slug paramter as shown below.
File upload code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" > </script>
<script type="text/javascript">
var token1 = '';
var xhr = new window.XMLHttpRequest();
var file = " ";
function rundCode() {
file = document.getElementById('attafh').files[0];
if (file) {
UploadMe(file);
}
}
function UploadMe(readFile) {
var reader = new FileReader();
reader.readAsArrayBuffer(readFile); //array buffer
reader.onload = loaded;
// reader.onerror = errorHandler;
}
function loaded(evt) {
var fileString = evt.target.result;
// Begin of Get Token
$.ajax({
url: 'https://aa/sap/inv/opu/odata/sap/Y_GET_ATTACHMENT/$metadata',
type: "GET",
contentType: "application/atom+xml;type\x3dentry;",
dataType: "",
headers: {
"x-csrf-token": "fetch",
Authorization: "Basic ZGd1cnU6WWFsdGVjaDM="
},
success: function (data, textStatus, request) {
token1 = request.getResponseHeader('x-csrf-token');
$.ajax({
type: 'POST',
url: "https://aaa/sap/inv/opu/odata/sap/Y_GET_ATTACHMENT/Document/",
xhr: function()
{
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
$('.progress').val(percentComplete);
//Do something with upload progress
console.log(percentComplete);
}
}, false);
xhr.addEventListener("error", function(evt){
alert("There was an error attempting to upload the file.");
return;
}, false);
return xhr;
},
contentType: "application/json",
processData: false,
data: fileString,
dataType: "text",
headers: {
"x-csrf-token" : token1,
"Authorization" : "Basic ZGaaaaaa",
"slug": encodeURIComponent(file.name)
},
success: function(data){
alert("File uploaded successfully");
}
});
}
});
};
function abortRead() {
xhr.abort();
$('.progress').val(0);
}
</script>
</head>
<body>
<input type="file" id="attafh" class="AlltextAccount" />
<input type="button" value="upload" onclick="rundCode()" />
<button onclick="abortRead();">Cancel</button>
<progress class="progress" value="0" max="100"> </progress>
</body>
</html>
The encodeURIComponent() method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
Now submit the file the SAP Gateway server.
You can see the UTF-8(Unicodes) characters received and it is decoded using method as shown below.
data:v_unescaped type string,
v_escaped type string,
v_return_code type i.
v_escaped = lv_file_info = iv_slug.
//Decode the Unicode texts to original string.
CALL METHOD cl_http_utility=>unescape_url
EXPORTING
escaped = v_escaped
RECEIVING
unescaped = v_unescaped.
References:
http://wiki.scn.sap.com/wiki/pages/viewpage.action?pageId=269418752
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
Thats all. We are done !!!
Please share your feedback.
Regards
Prabaharan