<input type="file”>で同じファイルを選択できるようにする

<video>に読み込んだ動画の秒数を取得する - なんでもノート に続きtipsの3個目。でファイルを選択し、再度同じファイルを選択しても1度目のvalueが残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の最後にvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

const ref = React.useRef<HTMLInputElement>(null);

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  // ここに処理を書く

  if (ref.current) {
    ref.current.value ="";
  }
}

// …(略)…

<input ref={ref} type="file" onChange={onChange} />

2つ目はclickイベントでvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

const ref = React.useRef<HTMLInputElement>(null);

const onClick = () => {
  if (ref.current) {
    ref.current.value ="";
  }
}

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  // ここに処理を書く
}

// …(略)…

<input ref={ref} type="file" onClick={onClick} onChange={onChange} />