passing base64 image string in xml tag

Question

I tried this code, but it is not working. Any suggestions or any solutions for above issue for sending base64 string in xml tag. I have searching lot of about base64 string passing to java server using this xml tags(i.e. xml parsing) but not get any results.

function fileSelectedForLogo() {
    var oFile = document.getElementById('image_file').files[0];
	if(oFile.size/1024 <= 50){
    var oImage = document.getElementById('preview');
    var oReader = new FileReader();
	 oReader.onload = function(e){
        oImage.src = e.target.result;
		var resultStr = oImage.src;
		var result = resultStr.split(",");
		$('#LogoImageKey').val(result[1]);		
		};
		alert($('#LogoImageKey').val())
    oReader.readAsDataURL(oFile);	
	}else{
		alert(" Please Upload Less 50 KB ")
	}	
    }

function creatingXMLRequest(){
      var Name =	$('#Name').val();
      var logoImage		=  $('#LogoImageKey').val();
      alert(logoImage);
      var xml="<Request>" +
               "<Data>" +
               ifValueInsert(Name,"CName")+
               ifValueInsert(logoImage,"LogoImage")+
               "</Data>" +
			"</Request>";
     }

function ifValueInsert(value , tagName)
    {
	alert(value+" == "+tagName)
	if(value!=undefined && value!='' && value!=null)
	{
		return "<"+tagName+">"+value+"</"+tagName+">";
	}
	return "";
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body> 
<input type="hidden" id="LogoImageKey" value="" />
    <label id="lblupload">Image Upload:</label>
    <input id="image_file" type="file" onChange="fileSelectedForLogo();" />
<input type="button" onClick="creatingXMLRequest();" value="Submit" />
  </body>

mziccard · Accepted Answer

Your code contains quite some errors. I annotated some of them:

alert($('#LogoImageKey').val()) in fileSelectedForLogo: here you are trying to access $('#LogoImageKey').val() before it was actually set. In fact this attribute is set in the oReader.onload callback that is only called after oReader.readAsDataURL(oFile)
document.getElementById('preview') in fileSelectedForLogo: you are looking for an element that is not defined (at least in your html snippet)
$('#Name').val() again an element that is not defined (at least in your html snippet)

Here is the working code. I took the liberty to add a missing elements as well as a div to contain the base64 representation of the image (and removed a couple of alerts). I kept you base structure (even though it could benefit some serious refactoring) so that you better understand what changed.

function fileSelectedForLogo() {
  var oFile = document.getElementById('image_file').files[0];
  if(oFile.size/1024 <= 50){
    var oReader = new FileReader();
    oReader.onload = function(e){
      var resultStr = e.target.result;
      var result = resultStr.split(",");
      $('#preview').attr("src", e.target.result);
      $('#LogoImageKey').val(result[1]);
      $('#base64').text(result[1]);
    };
    oReader.readAsDataURL(oFile);	
  } else {
    alert(" Please Upload Less 50 KB ")
  }	
}

function encodeXML(str) {
  return str.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

function creatingXMLRequest(){
  var Name = $('#Name').val();
  var logoImage = $('#LogoImageKey').val();

  var xml="<Request>" +
    "<Data>" +
    ifValueInsert(Name,"CName")+
    ifValueInsert(logoImage,"LogoImage")+
    "</Data>" +
    "</Request>";
  console.log(xml);
}

function ifValueInsert(value , tagName) {
  //alert(value+" == "+tagName)
  console.log(value+" == "+tagName);
  if(value!=undefined && value!='' && value!=null) {
    return "<"+tagName+">"+encodeXML(value)+"</"+tagName+">";
  }
  return "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body> 
  <input type="hidden" id="LogoImageKey" value="" />
  <label id="name-upload">Logo Name:</label>
  <input id="Name" type="text" value="" />
  <label id="lblupload">Image Upload:</label>
  <input id="image_file" type="file" onChange="fileSelectedForLogo();" />
  <input type="button" onClick="creatingXMLRequest();" value="Submit" />
  <img id="preview" src="" />
  <div id="base64" />
</body>

Some general remarks:

Before appending data to an XML you should escape special characters <, >, ", & (this is what function encodeXML does)
For consistency reasons avoid mixing javascript's getElementById and jQuery selectors (e.g. $("#foo"))
Again for consistency, choose a naming convention and stick with it. For instance with elements ids choose either camel casestrings, underscore-separated strings or dash-separated ones but avoid mixing them
Avoid debugging your javascript code using alerts. Rather use the interactive javascript development console that almost any browser now offers and log debug information there (e.g. console.log(xml))
Remember that a base64 image occupies around 4/3 times more memory than the original

passing base64 image string in xml tag

Tags:

javascript

jquery

xml

xml-parsing

base64

kks

1 Answers

mziccard

Recent Activity

Donate For Us

passing base64 image string in xml tag

Tags:

javascript

jquery

xml

xml-parsing

base64

kks

1 Answers

mziccard

Related questions

Recent Activity

Donate For Us