How to insert csv file record inside data extension from cloud page?

Question

I have created a cloud page where I have provided browse button and after selecting CSV file I am reading CSV file in the script so there are 100 contact records in csv and I am sending WhatsApp message to all of the contacts so I am able to send Whatsapp message but now I want to insert all of these contacts inside data extension from javascript so how we can do this from JAvascript, I can't use SSJS because I am using dom so that will not work with SSJS.

1) Can we write AMP Script inside Javascript code not inside SSJS?
2) Can we insert Record from JAVASCRIPT code?

Answer 1

You can't perform this action on the client-side. Since you already have this data available, why don't you post your data back to your cloud page (or another page just for processing) and then parse it and insert the contacts into a DE? Here's a very general snippet that takes a csv from a cloudpage and passes it to another page for processing:

CSV Upload Page:

<form method="post" action="YOUR PROCESSING PAGE" id="csv_upload">
  <p>
    Upload File:
  </p>
  <input id="csvUpload" type="file" name="file"/>
  <input type="hidden" maxlength="" name="csv" id="csv" value="" />
  <br/>
  <br/>
  <button id="button" type="submit">Submit</button>
</form>
<script >
function uploadCSV() {};
uploadCSV.prototype.getCsv = function(e) {
  let input = document.getElementById('csvUpload');
  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);
      });
      reader.readAsBinaryString(myFile);
    }
  });
}
uploadCSV.prototype.getParsecsvdata = function(data) {
  let parsedata = [];
  let newLinebrk = data.split("\n");
  for (let i = 0; i < newLinebrk.length; i++) {
    parsedata.push(newLinebrk[i].split(","))
  }
  document.getElementById("csv").value = parsedata;
}
var parseCsv = new uploadCSV();
parseCsv.getCsv();
</script>

Processing Page

%%[
SET @csv_data = RequestParameter("csv")   
/* NOW PARSE THIS DATA AND INSERT TO DE W/ AMPSCRIPT OR SSJS */
]%%