1º problema foi depois do app.js tive que copiar do vídeo da aula e depois a imagem não aparece

2º - problema foi depois jquery.js

quando tento editar dá erro:

DebugFilesKeyError flask.debughelpers.DebugFilesKeyError: You tried to access the file 'arquivo' in the request.files dictionary but it does not exist. The mimetype for the request is 'application/x-www-form-urlencoded' instead of 'multipart/form-data' which means that no file contents were transmitted. To fix this error you should provide enctype="multipart/form-data" in your form.

The browser instead transmitted some file names. This was submitted: 'Need_For_SpeedUnderground.jpg'

Baixei as duas versões mas deu problema do mesmo jeito, por isso acho que tem haver app.js e jquery.js

/* https://code.jquery.com/jquery-3.6.0.js / / https://code.jquery.com/jquery-3.6.4.js */

@app.route('/editar/<int:id>')
def editar(id):
    if 'usuario_logado' not in session or session['usuario_logado'] == None:

    return redirect(url_for('login', proxima=url_for('editar', id=id)))
    
    jogo = Jogos.query.filter_by(id=id).first()

    capa_jogo = recupera_imagem(id)

    return render_template('editar.html', titulo='Editando o Jogo', jogo=jogo, capa_jogo=capa_jogo)


@app.route('/atualizar', methods=['POST',])

def atualizar():

    jogo = Jogos.query.filter_by(id=request.form['id']).first()

    jogo.nome = request.form['nome']

    jogo.categoria = request.form['categoria']

    jogo.console = request.form['console']

    db.session.add(jogo)

    db.session.commit()

    arquivo = request.files['arquivo']

    upload_path = app.config['UPLOAD_PATH']

    arquivo.save(f'{upload_path}/capa{jogo.id}.jpg')

    return redirect(url_for('index'))

Descobri a erro que ta dando: Porque no arquivo editar.html na tag do form faltou uma uma configuração: enctype="multipart/form-data"

antes: form action="{{ url_for('atualizar') }}" method="post"

depois: form action="{{ url_for('atualizar') }}" method="post" enctype="multipart/form-data"

Só falta descobrir pq imagem que seleciono não aparece no editar.html , ou seja, no momento que eu escolho a imagem ela some aí eu salvo e volto depois ela está lá. Se eu alterar um jogo(nome ou console ou categoria) e não alterar o campo imagem ele perde a imagem depois quando clico em editar.

Finalmente seguindo as aulas muito tempo depois o professor colocou app.js aí pude pegar o código e deu certo com código do professor:

$('form input[type="file"]').change(event => {
  let arquivos = event.target.files;
  if (arquivos.length === 0) {
    console.log('sem imagem pra mostrar')
  } else {
      if(arquivos[0].type == 'image/jpeg') {
        $('img').remove();
        let imagem = $('<img class="img-fluid">');
        imagem.attr('src', window.URL.createObjectURL(arquivos[0]));
        $('figure').prepend(imagem);
      } else {
        alert('Formato não suportado')
      }
  }
});