So I currently have a web app running on Github Pages that features an interactive map (created using Mapbox GL JS)–the data for which is stored using two different GeoJSON files. I have an upload feature where users can upload a new csv file with map data & I’ve successfully implemented the logic that converts that csv data into the GeoJSON format I need.

Now, I’m struggling to overwrite the existing GeoJSON files with the newly added data from the user after they upload. What is the best way to do this?

To recap, basically:
step 1. user uploads csv file (works)
step 2. csv file data gets converted to GeoJSON data (works)
step 3. new GeoJSON data should overwrite old GeoJSON file data & then page refreshes so map can reflect changes (I am lost here.)

Please lmk if anyone can help (or if you need any more info to do so)!

// map.js file
// Event listeners for upload buttons
document.getElementById('apply-master-sites-upload').addEventListener('click', function () {
    convertCSVtoGeoJSON('master-sites-upload', function (err, geojson) { 
        if (!err) {
            console.log('Successfully converted CSV to GeoJSON:', geojson); // this works!
            // make a POST request to the server
            fetch('/upload-master-sites', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ geojson: geojson })
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        }
    });
});
document.getElementById('apply-app-deployment-upload').addEventListener('click', function () {
    convertCSVtoGeoJSON('app-deployment-upload', function (err, geojson) {
        if (!err) {
            console.log('Successfully converted CSV to GeoJSON:', geojson); // this works!
            // make a POST request to the server
            fetch('/upload-app-deployment', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ geojson: geojson })
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        }
    });
});

// server.js file
const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());

app.post('/upload-master-sites', (req, res) => {
    const geojson = req.body.geojson;

    fs.writeFileSync('./data/master_site_listing.geojson', JSON.stringify(geojson));

    res.json({ message: 'Master sites data uploaded successfully.' });
});

app.post('/upload-app-deployment', (req, res) => {
    const geojson = req.body.geojson;

    fs.writeFileSync('./data/app_deployment.geojson', JSON.stringify(geojson));

    res.json({ message: 'App deployment data uploaded successfully.' });
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

I have been trying to figure out a server-side solution but I keep getting a 405 Method Not Allowed error with no further details as to what’s going on.

What I wanted was for the GeoJSON files in my project’s repository to update for all future viewers & for the map’s points to change and reflect the contents of the newly entered dataset.