画像を一度アップロードした後はアップローダーを非表示にするUIで更新時も新規同様にファイル選択出来るようにするマークアップ方法

結論

HTMLの <label> タグとfor属性及びid属性を使います。
(初歩的な内容ですが題名の通り実装するやり方が思い付かずハマりました😇)

画像アップロード後に変更リンクだけ表示される場面

※ サンプルは Vue.js

📝 ファイル選択のinput要素は画像アップロード後もDOMに残したいので、input要素のみ v-show しています。

---

---

<div v-if="imageUrl" class="button-group">
  <label for="image">
    <span class="update-image-text">画像を変更する</span>
  </label>
</div>

<div v-show="!imageUrl">
  <input type="file" id="image" class="upload-image-input"/>
</div>

変更リンクをクリックした表示

labelのforとinputのidが紐づいているので、アップローダーが非表示になっていてもファイル選択可能 📝