1<form>
2    <label for="file-upload">Choose a file:</label>
3    <input type="file" id="file-upload" name="file-upload">
4    <button type="submit">Upload</button>
5    <progress id="progress-bar" max="100" value="0"></progress>
6</form>

Este formulário permite que o usuário selecione um arquivo do seu dispositivo e faça o upload dele para o servidor. O elemento form contém um elemento label e um elemento input do tipo "file", usado para selecionar o arquivo a ser enviado. O elemento button dispara o upload quando clicado.
O CSS estiliza o formulário para deixá-lo apresentável e fácil de usar. O código JS escuta o evento de envio do formulário, impede o comportamento padrão de submissão, cria um novo objeto FormData, anexa o arquivo selecionado aos dados do formulário e envia esses dados ao servidor por meio de uma requisição fetch. Por fim, a resposta do servidor é registrada no console.

1<form>
2    <label for="file-upload">Choose a file:</label>
3    <input type="file" id="file-upload" name="file-upload">
4    <button type="submit">Upload</button>
5    <progress id="progress-bar" max="100" value="0"></progress>
6</form>

A barra de progresso é adicionada ao HTML com o elemento progress. No código JS, um objeto XMLHttpRequest é criado para gerenciar o upload. O evento de upload é monitorado para receber atualizações de progresso, e a barra de progresso é atualizada de acordo. Por fim, o evento de load é monitorado para capturar a resposta do servidor, que é registrada no console.
Observe que a barra de progresso só será exibida se o servidor suportar o envio de atualizações de progresso durante o upload. Se o servidor não suportar esse recurso, a barra de progresso não será atualizada.