Append string to file name in javascript function

dodgerfan
dodgerfan used Ask the Experts™
on
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';
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
NorieAnalyst Assistant

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

fileSelected = fileSelected + ':moredata'

Open in new window

Distinguished Expert 2017

Commented:
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

Author

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.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Distinguished Expert 2017

Commented:
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>"

Author

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>
Distinguished Expert 2017

Commented:
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.
Distinguished Expert 2017
Commented:
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

Author

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

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

Author

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?
Distinguished Expert 2017

Commented:
Could you post your code?

Author

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>
Distinguished Expert 2017

Commented:
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)

Author

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?

Author

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.

Author

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?
Distinguished Expert 2017

Commented:
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;

Author

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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial