JavaScript Read Local CSV File
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this tutorial we will show you the solution of JavaScript read local csv file, here we used events of onload, onchange and ‘readAsBinaryString()’ method for reads csv file.
The readAsBinaryString() method is used to start reading the contents of the specified blob or file.
When the read operation is finished the readyState becomes DONE and the FileReader onload event is triggered. At that time the result attribute contains the raw binary data from the file.
Step By Step Guide On JavaScript Read Local CSV File :-
Here we defined input tag of file type for collects local csv files from user and in script we accessing input element by id using ‘querySelector()’ method and stored on variable ‘inp’.
We created file reader object ‘fr’ by new FileReader() constructor and ‘onchange’ event get triggered when user loads csv files then stored contents on file and we reading whole content by using ‘fr’ then when it focus losses onload event will printed all contents on console.
<!DOCTYPE html>
<html>
<head>
<title>READ CSV FILE</title>
</head>
<body>
<input type="file">
<script>
const inp=document.querySelector('input');
const fr=new FileReader();
fr.onload=(e)=>{
console.log(e.target.result);
}
inp.onchange=(e)=>{
const [file]=e.target.files;
fr.readAsBinaryString(file);
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined input tag of file type for loads csv file by user. In script we defined variable ‘inp’ for store user csv files.
- Then we created file reader object ‘fr’ because we need file reader which is helpful for reads file contents line by line.
- The onchange event will waits for changes that means waits for users upload response then when user uploaded file successfully onchange event will occurred with parameter ‘e’.
- Ther we loading files and using ‘readAsBinaryString()’ method we reads uploaded file with the help of file reader object ‘fr’.
- File reader object ‘fr’ loads whole content by ‘e’ then we printed all contents on console by console.log() method.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to read local csv file using javascript.
When we executes program on browser we can see input tag with file type for user needs to upload csv type files and needs to open console for seeing fetched result of file contents by using shortcut ‘ctrl+shift+j’ will open console panel with uploaded csv file contents but result is string type text file.
I hope this tutorial on JavaScript read local csv file helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
