How to use uploaded file in html?

Question

Im working on a web application that can use uploaded csv file and generate graph based on them. (for graphs im using zingchart). Im having trouble with understanding how to use uploaded file.

this is function that i use for upload button

 <form>
            <div class = "uploaddat" >
                <input type="file" name="file"/>
            </div>
        </form>

and this is where i need to put uploaded file

"csv":{
    "url":"input/datasample.csv",
  "smart-scales":true,
  "vertical-labels":true

}

Im beginner, so i would really appreciate if somebody could help me

Thank you.

This can be done entirely in the browser using the FileReader API. — Christopher Reid, Mar 05 '15 at 11:34

score 0 · Answer 1 · edited May 23 '17 at 12:20

You might be able to do it with javascript, but you won't be able to send the file to the server only with HTML !

You needs to use PHP (for exemple) if you want to send the file to the server.

However, you might want to take a look to this blog post, which explains how to upload and use a file in javascript/HTML5 ! This can be a solution for you.

http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

Here is an example for uploading and parsing CSV file using PHP : How to upload and parse a CSV file in php

score 0 · Accepted Answer · answered Mar 05 '15 at 11:48

html - create a file input

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

js - put a listener on the file input that grabs the csv file you put into the input and reads it into csv inside reader.onload.

document.querySelector('#fileInput').addEventListener('change', handleFile,false)

function handleFile(e){
    var reader = new FileReader;
    var file   = e.target.files[0]

    reader.onload = function(e){
        var csv = e.target.result

        // execute chart code in here with
        // "csv":{
        //    "data-string": csv,
        //    ...
        // }

    }

    reader.readAsText(file);
}

you are using "data-string" instead of "url" in the charting options.

http://jsfiddle.net/61en8yaf/

How to use uploaded file in html?

2 Answers2