Append string to file name in javascript function

11/23/2017

Norie

11/20/2017

Try this.

var fileSelected = document.getElementById('txtfiletoread')

fileSelected = fileSelected + ':moredata'

11/20/2017

The follow code works for input type="file" html element:
HTML:

<input type="file" id="txtfiletoread" />

var elm=document.getElementById('txtfiletoread');
elm.addEventListener('change',function(){  
  var a=this.value.split('\\'); 
  a=a[a.length - 1]+':moredata';
  alert(a);
});

11/21/2017

ASKER

Leonidas Dosas: thank you. That works and I am able to see it in the alert. This takes the name of a file and appends the :moredata to it, so it looks like myfile.txt:moredata. The moredata is an alternate data stream that has data in it (xml). Is there a way to then read from that stream in javascript? That's ultimately what I'm trying to do, extract the data from the alternate data stream of a file on the client before uploading to the server.

11/21/2017

Could you post an example of :moredata data stream? If am I right the moredata has a format like this ie

"<xmltags><t1>text1</t1></xmltags>"

11/21/2017

ASKER

You're right, that's what it amounts to. Yours is a good example.

<productListing title="ABC Products">
<product>
<name>Product One</name>
<description>Product One is an exciting new widget that will
simplify your life.</description>
<cost>$19.95</cost>
<shipping>$2.95</shipping>
</product>
</productListing>

11/21/2017

I think the whole approximation of the topic is a mistake. You should combine the name of a file with the data and then recover it by that name. This may be done with some object creation process.Backing up the data in the file name I do not think it can facilitate the retrieval of the data.

ASKER CERTIFIED SOLUTION

11/21/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

11/22/2017

ASKER

I get a syntax error on this line: var oDOM = oParser.parseFromString(moredata, "text/xml");
Thanks for the help.

11/22/2017

Check the moredata var to be a string.(specially the syntax with quotes and concatination)

11/22/2017

ASKER

I've changed the moredata var to just one word to see if I can get it working. var moredata='word';
Still getting the same sutax error on that same line. Do i need to do some conversion somewhere?

11/22/2017

Could you post your code?

11/22/2017

ASKER

Right now it's pretty much like your example:
<!DOCTYPE html>
<html>
<head>
<title>Upload Test</title>
<script src="/Scripts/jquery-1-10-2.min.js"></script>
</head>
<body>

<input type="file" id="txtfiletoread" />
<div id="wrap"></div>

<script>
var elm=document.getElementById('txtfiletoread');

var dataObj={};

var moredata='word';

var oParser = new DOMParser();
console.log(oParser);
var oDOM = oParser.parseFromString(moredata, "text/xml");

elm.addEventListener('change',function(){
var a=this.value.split('\\');
a=a[a.length - 1];

dataObj[a]=oDOM;

document.getElementById('wrap').appendChild(oDOM.documentElement);
});
</script>
</body>
</html>

11/22/2017

I tested your code (exception the jquery script that I have make e change):

<!DOCTYPE html>
<html>
<head>
  <title>Upload Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head>
<body>

<input type="file" id="txtfiletoread" />
<div id="wrap"></div>       

<script>
var elm=document.getElementById('txtfiletoread');

var dataObj={};

var moredata='<productListing title="ABC Products">'+
'<product>'+ 
    '<name>Product One</name>'+ 
    '<description>Product One is an exciting new widget that will'+ 
      'simplify your life.</description>'+ 
    '<cost>$19.95</cost>'+ 
    '<shipping>$2.95</shipping>'+ 
  '</product>'+ 
 '</productListing>';

 var oParser = new DOMParser();
 
 var oDOM = oParser.parseFromString(moredata, "text/xml");

elm.addEventListener('change',function(){
    var a=this.value.split('\\'); 
    a=a[a.length - 1];

    dataObj[a]=oDOM;

    document.getElementById('wrap').appendChild(oDOM.documentElement);  
});
</script>
</body>
</html>

At Chrome V. 62 and IE V. 11 and all work normally.See below:

What I want to do is create a key-value object for each file select option we do, and then pass that through the php code (most likely via ajax method) to the database. But first we must be able to create this object before it goes into the process of exporting it to the database. The example I give you has two phases. The first is whenever you select a file to be combined with a xml string data and then this pair hooks to the object. (In our case it is dataObj). The second is to get this object to extract a key-value pair and then to convert it to xml document object and insert it as html element in the document.(In our case we append this into the div wrap)

11/22/2017

ASKER

I still get the error on the same line, so it does not get to the change event. I am running IE 11, it's my only option. I am working from Visual Studio 2017, using an asp.net page. But that page is just the html and javscript you see. Would that cause aythnig to change?

11/22/2017

ASKER

I got past that first error. Now I'm getting this error: Unable to get property 'addEventListener' of undefined or null reference. On line: elm.addEventListener('change',function(). I'll keep digging.

11/22/2017

ASKER

I got your example working. When I select a file it loads the data from the moredata var. How can I use this to extract the alternate data stream data, though?

11/23/2017

How do you want the data to be transferred into the database? Do I mean there will be an event that will trigger the transfer? For example, you want every time you select a file to be transferred with the accompanying moredata (data) into the data base; This process will be done through php server code;