Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

upload a csv file to a textarea purely using javascript

Posted on 2011-03-01
10
Medium Priority
?
2,510 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 83

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 83

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 83

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 83

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 83

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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…
Suggested Courses

810 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