Solved

upload a csv file to a textarea purely using javascript

Posted on 2011-03-01
10
2,279 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
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…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now