Solved

upload a csv file to a textarea purely using javascript

Posted on 2011-03-01
10
2,365 Views
Last Modified: 2012-05-11
Hello,  

I am looking for an example on how to upload a csv file into a html textarea (just dump the whole csv into the textarea) in html using javascript ONLY.

I know it's very easy to do going to the php/jsp etc..but i am looking for a solution that works purely on the client side html/javascript without any serverside connection.

Basically a *.html file with a texarea, then user select the csv file from their local drive via browse button, and the content is displayed in the textarea.

Thank you
0
Comment
Question by:gagaliya
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 17

Expert Comment

by:nepaluz
ID: 35012498
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35012836
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.5.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#myButtonId").click(function() {
			$.get("/path/to/filename.csv", function(data) {
				$("#myTextareaId").val( data );
			});
		});
	});
</script>
</head>
<body>
<input type="button" id="myButtonId" value="load csv" />
<br />
<textarea cols="24" rows="20"></textarea>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35012887
correction line 20 :
<textarea cols="24" rows="20" id="myTextareaId"></textarea>

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.5.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#myButtonId").click(function() {
			$.get( $("#filename").val(), function(data) {
				$("#myTextareaId").val( data );
			});
		});
	});
</script>
</head>
<body>
<input type="text" value="/path/to/filename.csv" id="filename" /><input type="button" id="myButtonId" value="load csv" />
<br />
<textarea cols="24" rows="20" id="myTextareaId"></textarea>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:gagaliya
ID: 35028883
hi leakim971,

i put this into a test html and tried it, but nothing happens when i click on the "load csv" button.  The only thing i changed is the path to the file to "c:\test.csv"

any ideas?

thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.5.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
	$(document).ready(function() {
		$("#myButtonId").click(function() {
			$.get( $("#filename").val(), function(data) {
				$("#myTextareaId").val( data );
			});
		});
	});
</script>
</head>
<body>
<input type="text" value="c:\test.csv" id="filename" /><input type="button" id="myButtonId" value="load csv" />
<br />
<textarea cols="24" rows="20" id="myTextareaId"></textarea>
</body>
</html> 

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35029099
Yes of course, you can't use something like that : c:\test.csv
There's no valid (safe, cross-browser and so on...) solution to read a file directly by its file path until you put the file in the folder of your web server
0
 
LVL 1

Author Comment

by:gagaliya
ID: 35029653
Sorry i dont understand, there is no server here. It's just a static html page with a reference to a javascript js. I open the html in my local internet explorer, it wont just goto the specified path, pick up the file, and dump it in the textarea?   sort like the behavior of <input type="file">, the javascript part is to read the file and dump it to the textarea.

thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35029679
Sorry, forget my comments. I think it's a good to close this question without award points and open a new one.
0
 
LVL 1

Accepted Solution

by:
gagaliya earned 0 total points
ID: 35073000
To answer my own question, below is how to read a file and dump the content into a textarea using purely javascript without any serverside script.

Mod, please close this question.

<body>
<input type="file" name="findfile" id="findfile" size="30">
<input type="button" value="uploadfile" id="uploadfile" onClick="readLocalFile();" >

 <textarea  name="sometextarea" id="sometextarea"  class="formText" ></textarea>

<SCRIPT Language="JavaScript">
    function readLocalFile()
    {
       var location = document.getElementById("findfile").value;

       if ( location == null || location=="")
       {
           alert("Please specify a file to upload first");
           return;
       }

	   var fso = new ActiveXObject("Scripting.FileSystemObject");

	   var tempFile = fso.OpenTextFile(location, 1);

	   var line = ""

	   while(!tempFile.AtEndOfStream)
	   {
	      line+=tempFile.ReadLine();
	      line+="\n";
	   }

	   document.getElementById("sometextarea").value=line;
    }
</SCRIPT>
</body>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 35073068
Very good! congrats @gagaliya and, again, sorry for the troubles.
0
 
LVL 1

Author Closing Comment

by:gagaliya
ID: 35120687
reason: answered my own question
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question