JavaScript: Convert uploaded CSV file contents to Array

Question

I need some help with converting uploaded csv file contents to an array using JavaScript code.

Following is what I have done so far:

I've a csv file, that contains list of all clientIDs e.g.

ClientIDs
1
2
3

Using following html code, I upload the file

<form id = "FileUpload" method="post" enctype="multipart/form-data">
   <div> <p><p>
       <b>Select file containing all clientIDs:</b>
       <input type="file" id="FileUpload" name="csv"/>
       <input type="hidden" name="action" value="upload"/>
       <input type="submit" name="FileUpload" value="Upload File"/>
   </div>
</form>

Now, the part I am stuck at. The JS that read and converts file contents

if(document.getElementById("FileUpload").value != "") {
   console.log("The file was uploaded");
   //Process the file and convert its contents to array
}

Can someone please help?

Thanks in advance.

You might want to take a look at some of the code examples here: developer.mozilla.org/en-US/docs/… — fet
– fet, Commented Nov 30, 2016 at 1:02

Andrei Savin · Accepted Answer · 2016-11-30 02:04:49Z

2

Assuming the id's are separated by new line, you can do something like this:

var reader = new FileReader();

reader.onload = function (e) {
    var arr = e.target.result.split("\n");
    // Continue processing...
};

reader.readAsText(document.getElementById("FileUpload").files[0]);

See also: https://developer.mozilla.org/en/docs/Web/API/FileReader

edited Nov 30, 2016 at 2:04

answered Nov 30, 2016 at 1:08

Andrei Savin

2,5044 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ravi Singh Over a year ago

Thanks for the comment Andrei.. the only change I had to make was using readAsText instead of readAsDataURL. Other than that, its all working now.

Andrei Savin Over a year ago

You are correct, I edited my answer to reflect that.

Ravi Singh Over a year ago

Hi Andrei, Another question, the answer works fine and displays correct value inside onload function, but when I try to print the value outside that function, the array still displays empty values. e.g. reader.onload = function (e) { uploadedClientList = e.target.result.split("\n"); console.log("Take 1:" + uploadedClientList); }; console.log("Take 2:" + uploadedClientList); Take 1 works fine, but Take 2 is still empty

Andrei Savin Over a year ago

Ravi, this is the way JavaScript works. JavaScript is non-blocking: there is no guarantee that uploadedClientList will be set up before Take 2 executes. One way to enforce the order of execution is to use callback functions. I think this tutorial explains it pretty well: sebastianmetzger.com/…

Ravi Singh Over a year ago

Thanks Andrei.. That info was really helpful.. Task completed. :)

Collectives™ on Stack Overflow

JavaScript: Convert uploaded CSV file contents to Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related