• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 104
  • Last Modified:

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';
0
dodgerfan
Asked:
dodgerfan
  • 9
  • 8
1 Solution
 
NorieVBA ExpertCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 9
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now