Solved

upload a csv file to a textarea purely using javascript

Posted on 2011-03-01
10
2,313 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
  • 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

828 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