JSFiddle - React, Tailwind, and code Playground

HTML

<form id="leFormulaire" action="/echo/html/" method="post">

  <div class="content">

    <label for="imageInput">Envoyer une image</label>
    <input type="file" name="image" id="imageInput" accept="image/*" required>

    <!-- Affichera la prévisualisation de l'image -->
    <button type="submit">Envoyer</button>

  </div>

  <div class="preview">

    <img alt="Image envoyée">

    <!-- Remettras le formulaire a zéro et fermeras la prévisualisation -->
    <button type="reset">Annuler</button>

    <!-- Enverras le formulaire normalement -->
    <button type="submit">Valider</button>

  </div>

</form>

CSS

html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  width: 100%;
  max-width: 480px;
}


/* Etapes du formulaire ( contenu + pré-vue ) */

form div {
  display: flex;
  flex-direction: column;
}

form .content {
  display: flex;
}

form .preview {
  display: none;
}


form.preview-open .content {
  display: none;
}

form.preview-open .preview {
  display: flex;
}


/* Elements du formulaire ( label, input, img ... ) */

form label {
  border-bottom: 1px solid #eee;
  padding: 0.5em 0;
}

form input,
form img {
  display: block;
  margin: 1em 0;
  max-width: 100%;
}

button {
  margin: 0.5em 0;
  border: 0.25em;
  padding: 1em;
  cursor: pointer;
  background: #eee;
}

button[type="submit"] {
  background: green;
  color: white;
}

JavaScript

const form = document.getElementById("leFormulaire")
const imageInput = document.getElementById("imageInput")
const imagePreview = form.querySelector("img")

const onSubmitEvent = (event) => {

  // Bloque l'envoie du formulaire
  event.preventDefault()

  // Affiche l'image jointe dans <input type="file"> dans une balise <img>
  const url = URL.createObjectURL(imageInput.files[0])
  imagePreview.src = url

  // Affiche la partie suivante du formulaire et retire l'évement bloquant
  togglePreview(true)
}

const togglePreview = (enable = false) => {

  // Ajoute ou supprime l'évenement bloquant 
  if (enable) form.onsubmit = null
  else form.onsubmit = onSubmitEvent

  // Masque ou Affiche l'une des partie du formulaire
  form.classList.toggle("preview-open", enable)

}

// Attache les évenements au formulaire
form.onsubmit = onSubmitEvent
form.onreset = () => togglePreview(false)