Javascript upload and parse file on fly

Question

Is it possible to upload file using

<input type="file">

and then parse it to javascript array without saving the file on server-side? Could you advice any plugin to do it with csv (or any other) file type.

Is it good idea to do things such way without using back-end?

Thanks.

If you are talking about reading the contents of a file client-side, then use FileReader: developer.mozilla.org/en-US/docs/Web/API/FileReader. If not, please clarify your question. — Ray Nicholus
– Ray Nicholus, Commented Oct 9, 2013 at 19:34
This is exactly what i'm looking for. Here is implementation of my problem: rohitrox.github.io/js_csv — Fyodor Khruschov
– Fyodor Khruschov, Commented Oct 9, 2013 at 19:58
Then the code you will need to emulate can be found at github.com/RohitRox/js_csv/blob/master/index.html#L100. — Ray Nicholus
– Ray Nicholus, Commented Oct 9, 2013 at 20:00

Aman Kumar · Accepted Answer · 2018-05-29 07:08:54Z

36

Js code for upload csv and parse it client side and then plot them into console

function uploadDealcsv () {}; 

  /*------ Method for read uploded csv file ------*/
  uploadDealcsv.prototype.getCsv = function(e) {
       
      let input = document.getElementById('dealCsv');
      input.addEventListener('change', function() {

        if (this.files && this.files[0]) {

            var myFile = this.files[0];
            var reader = new FileReader();
            
            reader.addEventListener('load', function (e) {
                
                let csvdata = e.target.result; 
                parseCsv.getParsecsvdata(csvdata); // calling function for parse csv data 
            });
            
            reader.readAsBinaryString(myFile);
        }
      });
    }

    /*------- Method for parse csv data and display --------------*/
    uploadDealcsv.prototype.getParsecsvdata = function(data) {

        let parsedata = [];

        let newLinebrk = data.split("\n");
        for(let i = 0; i < newLinebrk.length; i++) {

            parsedata.push(newLinebrk[i].split(","))
        }

        console.table(parsedata);
    }


  
  var parseCsv = new uploadDealcsv();
  parseCsv.getCsv();

<input type="file" id="dealCsv"/>

answered May 29, 2018 at 7:08

Aman Kumar

4,5573 gold badges21 silver badges40 bronze badges

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

1 Comment

Victor Kwok Over a year ago

Can also use reader.readAsText instead, if setting an encoding method is required.

Collectives™ on Stack Overflow

Javascript upload and parse file on fly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related