Загрузка изображений в Интернет с использованием ajax через сервер

Question

Я пытаюсь загрузить изображения через ajax на веб-страницу, сохранив их в папке и их имена в json. Я делаю это через форму на стороне клиента.

Пока изображения сохраняются в папке, а их имена сохраняются в файле json.

Но, когда я отправляю на стороне клиента, изображение появляется только при третьей загрузке, которая является первым изображением, перечисленным в файле json. При каждом последующем отправлении загружается первое изображение, указанное в файле json.

Кроме того, я заметил, что если я обновлю sh страницу или закроется и go вернется, произойдут ошибки. Кажется, что загрузка изображений происходит только в том случае, если страница json пуста, а я загружаю в пустой файл json?

Это правильный способ go о загрузке изображений и как это сделать? Я исправляю эту проблему?

Я не хочу использовать e js или php или базы данных. Спасибо.

Код моего сервера на данный момент:

const upload = multer({limits:{fileSize:4000000}}).single('avatar')
app.post('/upload', (req, res)=>{
    upload(req, res, async function(err){ 
     // check for error thrown by multer- file size etc
     if( err|| req.file === undefined){
         console.log(err)
         res.send("error occured")
     }else{
        var image = await sharp(req.file.buffer)
            .resize({ width: 200, height:200 }) 
            .toFile('./client/'+req.file.originalname)
            .catch( err => { console.log('error: ', err) })
        res.send(req.body)
        var ImageName = {
            id: uuidv4(),
            name: req.file.originalname
        }

        var data = JSON.stringify(ImageName, null, 2);
        fs.appendFile('./client/images.json', data+'\r\n', (err) => {
            if (err) throw err;
            console.log("filename saved to json file");
        })
     }
    })
})

Клиентская сторона js:

  event.preventDefault() // prevent form from posting without JS
  var xhttp = new XMLHttpRequest(); // create new AJAX request

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { // sucess from server
      console.log('sent'+this.responseText+ xhttp.status);

    }else{ // errors occured
      console.log(xhttp.status);
    }
  }

  xhttp.open("POST", "upload")
  var formData = new FormData()
  formData.append('name', document.getElementById('name').value) 
  formData.append('avatar', document.getElementById('avatar').files[0]) 
  xhttp.send(formData)
}

$('form').on("submit", function(){ 
  $.ajax({
    type: "GET",
    data: {format: "JSON"},
    error: function(){
      $("#status").html("<p> An error occured </p>");
    },
    success:
      function(data){
        var $image = $('#new-image')
        $.getJSON("images.json", function(data){
          $("form").submit(function(){
            $image.append('<img src= "' + data["name"] + '">');
          })
      })
  }
    })
  })