problemas na implementação de uma ideia em javascript

Galera to meio desesperado já.
O cenario é esse: "uma pagina de cadastro de pessoas é carregada recebendo um numero que faz uma busca no banco de dados e retorna uma pessoa do banco de dados. A seguir ele preenche alguns elementos da tela com os dados encontrados na tabela do banco sobre essa pessoa. Entre os objetos da model de pessoas há um model.ImageField que guarda uma foto de cada pessoa." O que eu preciso de preciso é: Eu quero que a imagem encontrada referente a pessoa que foi buscada (na tabela de pessoas) seja apresentada no html, mas ao mesmo tempo quero que caso o usuario queira alterar a foto ele só precise clicar em cima da propria imagem já apresentada e então o explorador de arquivos seja aberto para que uma nova imagem seja escolhida. Assim que escolhida a nova imagem, a nova imagem deve ser exibida no html no lugar da antiga temporariamente, mas a substituição da foto no banco de dados deve ser efetuada somente depois que um botão submit seja clicado
meu codigo:
<script>

// Quando a imagem da pessoa for clicada
document.getElementById("imagem-pessoa").addEventListener('click', function() {
// Abrir o explorador de arquivos ao clicar no campo de arquivo oculto
document.getElementById("input-imagem").click();
});

// Quando uma nova imagem for selecionada
document.getElementById("input-imagem").addEventListener('change', function(event) {
// Capturar a nova imagem selecionada
const novaImagem = event.target.files[0];
// Atualizar temporariamente a imagem no HTML
const urlNovaImagem = URL.createObjectURL(novaImagem);
document.getElementById("imagem-pessoa").src = urlNovaImagem;
});
</script>

o html-
<img class="rectangle" id="imagem-pessoa" src="{{ pessoa.imagem.url }}" alt="Imagem da Pessoa">>
<input type="file" id="input-imagem" style="display: none;" accept="image/*">

nao está funcionando