title: Jquery AJAX read from an uploaded CSV file and convert it to JSON
body: <p>So I managed to get my file uploader from bootstrap to display the "path" of the file. </p>
  
  <pre><code>&lt;div class="input-group"&gt;
      &lt;div class="input-group-prepend"&gt;
          &lt;span class="input-group-text" id="submitFile" onclick="upload()"&gt;Upload&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="custom-file"&gt;
          &lt;input type="file" class="custom-file-input" id="uploadFile"
                 aria-describedby="inputGroupFileAddon01"&gt;
          &lt;label class="custom-file-label" for="uploadFile"&gt;Choose file&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My only problem is that I am confused with how to take that file and parse only the first column of values client side so my API call can read that information and perform database calls. Here is my <code>script</code></p>
  
  <pre><code>&lt;script&gt;
  function upload(){
  
      var csv = $("#uploadFile").val();
      console.log("CSV: " + csv);
  
      $.ajax({
          type: 'POST',
          url: endpoint + '/upload',
          dataType: 'json',
          data: //not sure how to load this,
  
          success: function(response){
              if(response === true)
                  alert("Successfully")
              else
                  alert("Invalid");
          }
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>One of the ways that I could do this is to parse my CSV file and take the entries and place it into an array but I would be left with multiple columns worth of values. Other than that I am not sure how to process files client-side</p>
  
  <p>Example CSV:</p>
  
  <pre><code>HEADER1,HEADER2,HEADER3
  ONE, TWO,THREE
  FOUR,FIVE,SIX
  ONE,TWO,THREE
  </code></pre>
  
  <p>*EDIT
  So for clarity I want to do the following
  1: Using the browser to open up a selected file and parse it to an array
  2: Save that array as a json format for my api call</p>