[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2570
  • Last Modified:

upload a csv file to a textarea purely using javascript

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
gagaliya
Asked:
gagaliya
  • 5
  • 4
1 Solution
 
nepaluzCommented:
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
gagaliyaAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
gagaliyaAuthor Commented:
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
 
leakim971PluritechnicianCommented:
Sorry, forget my comments. I think it's a good to close this question without award points and open a new one.
0
 
gagaliyaAuthor Commented:
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
 
leakim971PluritechnicianCommented:
Very good! congrats @gagaliya and, again, sorry for the troubles.
0
 
gagaliyaAuthor Commented:
reason: answered my own question
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now