Append string to file name in javascript function

I have a javascript function that gets data from a selected file. I get the name of the file from the file control using getelementbyid, here: var fileSelected = document.getElementById('txtfiletoread');

I do not have much experience with javascript. How can I append text to the file name? The file may be TestFile.txt, but I want ot change it to TestFile.txt:moredata

Would it be something like this: var fileSelected = document.getElementById('txtfiletoread') += ':moredata';
dodgerfanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NorieAnalyst Assistant Commented:
Try this.
var fileSelected = document.getElementById('txtfiletoread')

fileSelected = fileSelected + ':moredata'

Open in new window

0
Leonidas DosasCommented:
The follow code works for input type="file" html element:
HTML:
<input type="file" id="txtfiletoread" />

Open in new window


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

Open in new window

0
dodgerfanAuthor Commented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Leonidas DosasCommented:
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>"
0
dodgerfanAuthor Commented:
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>
0
Leonidas DosasCommented:
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.
0
Leonidas DosasCommented:
Comments inside the script.
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Expert Exchange</title>
  <meta charset="utf-8">
  <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');
//I create a new data object to set later the name file with the moredata stream xml
var dataObj={};
//An example of moredata in a string format below
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>';
 //I create a new DOMParser object
 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];
	//I create a key-value pair via filename and oDom object
    dataObj[a]=oDOM;
	//I append it at the div wrapper
    document.getElementById('wrap').appendChild(oDOM.documentElement);  
    
});
</script>
  

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dodgerfanAuthor Commented:
I get a syntax error on this line:  var oDOM = oParser.parseFromString(moredata, "text/xml");
Thanks for the help.
0
Leonidas DosasCommented:
Check the moredata var to be a string.(specially the syntax with quotes and concatination)
0
dodgerfanAuthor Commented:
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?
0
Leonidas DosasCommented:
Could you post your code?
0
dodgerfanAuthor Commented:
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>
0
Leonidas DosasCommented:
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>

Open in new window

At Chrome V. 62 and IE V. 11 and all work normally.See below:
IE browserChrome browser
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)
0
dodgerfanAuthor Commented:
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?
0
dodgerfanAuthor Commented:
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.
0
dodgerfanAuthor Commented:
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?
1
Leonidas DosasCommented:
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;
0
dodgerfanAuthor Commented:
The page has the file upload control with a few text fields for the user to fill out. When I click the upload button, the file is uploaded into the database along with the data from the fields that have been filled out. What is missing is the alternate data stream data. I was thinking of capturing that whenever a file is selected and putting it in a hidden control on the form. The pass the ADS data from the hidden control into the code to load into the database. So I need to select that ADS data and put it in a control on the form. Does that make sense?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.