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>

This form allows the user to select a file from their device and upload it to the server. The form element contains a label element and an input element of type "file", which is used to select the file to upload. The button element triggers the upload when clicked.
The CSS styles the form to make it look presentable and easy to use. The JS code listens for the form's submit event, prevents the default form submission behavior, creates a new FormData object, appends the selected file to the form data, and sends the form data to the server using a fetch request. Finally, the response from the server is logged to the 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>

The progress bar is added to the HTML with the progress element. In the JS code, an XMLHttpRequest object is created to handle the upload. The upload event is listened to for progress updates, and the progress bar is updated accordingly. Finally, the load event is listened to for the server's response, which is logged to the console.
Note that the progress bar will only display if the server supports sending progress updates during the upload. If the server does not support this feature, the progress bar will not update.