How to deal with a csv file from a html page in a fetch() POST request. #2914

Inrap · 2023-08-23T13:14:18Z

Inrap
Aug 23, 2023

beginner with JS

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

HTML could look like this :

<!DOCTYPE html >
<html lang="fr">
  <head>
     <meta chardet="UTF-8" >
     <link  rel="stylesheet" href="./style.css" >
     <title>postgrest</title>
  </head>
  <body>
    <div class="fichier-csv-container">
        <label for="fichier-csv" ></label></label><input type="file" class="fichier-csv" id="fichier-csv" name="fichiercsv" required></input>
        <p class="btn-integrer">integrer</p>
    </div>
  </body>
 <script type="module" src="./testpost.js" ></script>

Once the CSV file has been selected, a click on btn-integrer 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.

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

Thanks

Answered by Inrap

Aug 24, 2023

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

View full answer

Inrap · 2023-08-24T11:46:48Z

Inrap
Aug 24, 2023
Author

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

1 reply

laurenceisla Aug 24, 2023
Collaborator

Cool, so this solved your issue? You can mark your own answer as "answered" if that's so.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to deal with a csv file from a html page in a fetch() POST request. #2914

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to deal with a csv file from a html page in a fetch() POST request. #2914

Inrap Aug 23, 2023

Replies: 1 comment · 1 reply

Inrap Aug 24, 2023 Author

laurenceisla Aug 24, 2023 Collaborator

Inrap
Aug 23, 2023

Replies: 1 comment 1 reply

Inrap
Aug 24, 2023
Author

laurenceisla Aug 24, 2023
Collaborator