html5のFileオブジェクトからimg/videoタグで使えるURLを取得する

こんな関数で取得できる

const f = (file: File) => {
  const reader = new FileReader();
  const promise = new Promise((resolve, reject) => {
    reader.onerror = e => reject(e);
    reader.onabort = e => reject(e);
    reader.onload = e => resolve(e.target?.result);
  });
  reader.readAsDataURL(file);
  return promise;
};

...

const url = f(event.currentTarget.files[0]);
return <video><source src={url} /></video>

参考

• Web アプリケーションからのファイルの使用 - Web API | MDN
• FileReader - Web API | MDN