【Vue.js】ファイルアップロード時に同じファイル名が反映されない問題を解決する

問題

Vue.jsでモーダル内でのファイルアップロード機能を実装しているとき、
モーダルを閉じてから同じファイルを連続して選択すると、
ファイル名が画面に反映されない現象に遭遇しました。

例えば、以下のようなコードでファイルをアップロードする場合です。

const file = ref<File>(new File([], ''));

function handleFileUpload([uploadedFile]: [File]) {
  file.value = uploadedFile;
}

このコードでは、ユーザーが同じファイルを再度選択しても
Vueのリアクティブシステムが変更を検知せず、
内部的に「同じ値だ」と判断しているため、ファイル名が何も反映させませんでした。

---

解決方法：key 属性を使った再レンダリングの強制

今回は key 属性を使ってコンポーネントの再レンダリングを強制させて解決しました。
以下は、key 属性を利用して問題を解決した実装例です。
keyにDate.now()を利用して、アップロード時間が入るようにしています。

修正後のコード

const file = ref<File>(new File([], ''));
const fileKey = ref<number>(0); // 再レンダリングを強制するキー

function handleFileUpload(event) {
  file.value = uploadedFile;
  fileKey.value = Date.now()
}

そして、テンプレートで key 属性を使用します。
アップロードのたびに key の値が変更され、再レンダリングされるようになります。

<template>
  <div :key="fileKey">
    <p v-if="file">Selected File: {{ file.name }}</p>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>