How to access uploaded file using javascript?

Question

I want to access csv file from js.

So I upload it using POST form tag in html.

Than how could I access it using js?

Do you need it on the server? You can access it on clientside *without submitting it* (see [this answer](http://stackoverflow.com/questions/942105/file-data-from-input-element)); or you can submit it to the server, then ask for it again using AJAX. — Amadan, Nov 16 '15 at 05:38

score 2 · Accepted Answer · answered Nov 16 '15 at 05:47

2

With simple ajax request you can do it. With raw java script you can access your file like this.

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var responseText = xhttp.responseText;    //The responseText is the content of your file.
    }
  };
  xhttp.open("GET", "/directory-of-uploaded-files/filename", true);
  xhttp.send();

And with jquery

$.ajax({
  url: "/directory-of-uploaded-files/filename",
  method: "get",
  cache: false,
  success: function(file_content){
    console.log(file_content);  //file_content is the content of your file.
  },
  error: function (e) {
    alert("Error");
  }
});

answered Nov 16 '15 at 05:47

sohan nohemy

615
5
13

I like this answer because it gives a practical example that would work if the file is stored on the server's file system in a known and accessible location. One of the things I'd like to know is whether the file is being processed and turned into (for example) table data in a database when it's uploaded, because if it is, things will get a bit more involved. – Damon Kaswell Nov 16 '15 at 05:54
When console.log(xhttp) there is csv text in xhttp.responseText. but console.log(xhttp.responseText) is empty. – YB Yu Nov 16 '15 at 06:01
Because may be you are calling console.log(xhttp.responseText) before response is received. So you have to use a call back function. For xhr it is onreadystatechange, exactly how I have used it in the example. You have to check readyState and status too. ReadyState = 4 means data is fully loaded and ready to be processed now. So you will get data right that moment. – sohan nohemy Nov 16 '15 at 06:27
when you can get the content of the file. Then you can use a javascript library to convert file text to csv. ex. var csv = parseCsv(xhr.responseText); The csv can be two parts. csv.headers and csv.data. Headers is the headers and data is the array of parsed rows – sohan nohemy Nov 16 '15 at 06:32
Yeah. That's what I exactly did. Thx for help. – YB Yu Nov 16 '15 at 06:59
Hi, It seems that you are console.log as a way of debugging. Please be aware of this. It might help you. link http://stackoverflow.com/questions/33718904/javascript-console-log-does-not-works-as-expected?noredirect=1#comment55208114_33718904 – sohan nohemy Nov 16 '15 at 07:27

score 0 · Answer 2 · answered Nov 16 '15 at 05:34

You can't without making AJAX calls. Once it's on the server, the client will need to request it.

What you're asking for is a core concern with web development, and how you're going to be able to accomplish it is heavily dependent on what your server is running. For example, if you've posted this CSV file to a server running PHP and MySQL, and it's now stored in a MySQL database, you'll need server-side PHP for retrieving the file from the database and providing its contents to the client.

I hope this helps.

How to access uploaded file using javascript?

2 Answers2