How to save a csv file uploaded from my machine into a data object in javascript?

Question

I'm building a page that can display a chart of sensor data from a csv file. The user should be able to click on a button to choose a desired csv file from his machine to be displayed on a chart. I'm using the Highcharts library for that. The chart works as desired, but I can only input the csv file in code. When I upload a file and update nothing happens. So how can I make "data.csv" dynamic? My idea was to somehow save it into a global data object, that can then be passed into ajax url. I don't know how to implement this, since this is my very first javascript project.

<!DOCTYPE html> <!-- Write your comments here -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script> <!-- library include-->
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
  <title>Airmeter</title>
</head>

<body>

    <div id="container"></div>
    <form id='form'>
    
    <input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" id="input" />  
    <button type='submit'>
    update the chart
    </button>
    </form>
    
   
  
    

  <script>
$.ajax({
  type: "GET",
  url: "data.csv",
  success: function (data) {
    setTitle(data)
  }
});


function setTitle(raw_data){

  let newTitle;
 
  
  let chart = Highcharts.chart('container', {
    
    chart: {
      zoomType: 'xy',
      events: {
        load: function() {
          this.update({
            title: {
              text: 'Airmeter: '+ newTitle
            }
          })
        }
        
      }
    
    },
    
    xAxis:{
     
      title:{
          text: 'Zeit'
      }
  },

  yAxis:{
      

    title:{
        text: 'CO2 in ppm'
    }

} ,
  
exporting:{
  enabled: true
},


    title: {
      text: null
    },

    credits:{                  
      enabled: false
  },

    data: {
      csv: raw_data,
      parsed(e) {
        newTitle=e[0][1]  //set the first column as title of the chart
        e.shift()
        
      }
      
    }
  
  
  });

}


  </script>

</body>

</html>

I would really appreciate help. Thanks for your time and have nice day!

Answer 1

If the CSV will always be on your local machine rather than a server, you don't really need to be using an AJAX call and you could use the FileAPI and a CSV parser to pass the data to your setTitle function.

But to help with your approach, try doing these changes to your code:

1. Add an onChange event to your input, so whenever a file is selected, the javascript code can 'react' to it.
2. Wrap your AJAX call in the 'change' event handler.
3. Pass the selected file name to your AJAX request's URL.

In terms of code changes (untested):

<script>
// Add an event listener, so when a file is selected, the graph is drawn again
document.getElementById("input").addEventListener("change", drawGraph, false);

// Wrap your current AJAX call in the event handler
function drawGraph() {

  // Obtain the name of the file selected by the user in the <input>
  var fileName = document.getElementById('input').files[0].name;

  $.ajax({
    type: "GET",
    url: fileName, // use this name to fetch the selected file
    success: function (data) {
      setTitle(data)
    }
  });
}

// Leave the rest of the script block as it is
// ...

</script>