1

The goal is to select a CSV file on a computer to insert the data in a distant PostgreSQL table using POST request.

Once the CSV file has been selected in a html page, a click on a button causes it to be processed in the browser.

const btnIntegrer = document.querySelector(".btn-integrer")

btnIntegrer.addEventListener("click", () => {

const fichierCsvInput = document.querySelector(".fichier-csv")
const fichierCsv = fichierCsvInput.files[0]
reader.readAsText(fichierCsv)
let data = ''
let datafinal = ``
reader.addEventListener("load", (e) => {
    data = e.target.result
    const ligneTab = data.split("\r\n")
    ligneTab.forEach( ligne => datafinal += `${ligne}\n` )
})

fetch('http://blabla/testapi?', {
    method: "POST",
    headers: {
        "Content-Type": "text/csv"
    },
    body: datafinal
    })
    .then(result => {
        console.log('insertion réussie:', result)
    } )
    .catch(err => {
        console.assert.error('insertion échouée:', err)
    })
  })

I don't know how to deal with the CSV file to get a correct body in the load event like in the doc.

I have an error in the console : code "PGRST102" details null hint null message 'parse error (not enough input) at ""' Obviously, there is an issue with datafinal but I can't get rid of it.

my original csv:
num,description 3,bli bli 4,bli

Leehan
  • 145
  • 7

1 Answers1

1

the problem was that fetch is async so datafinal was empty. I moved the fetch inside the load event. Now it is good.

Leehan
  • 145
  • 7