fix: プレビューを正しく表示できるようにする #601

otukado · 2025-10-27T04:24:46Z

User description

close: #590

PR Type

Bug fix, Enhancement

Description

画像プレビュー用URLを状態に保持
プレビューimgのsrcにpreviewUrlを使用
FileSeedへpreviewUrlフィールドを追加

Diagram Walkthrough

flowchart LR
  FileInput["ファイル入力"] -- FileReader.readAsDataURL --> DataURL["reader.result(データURL)"]
  DataURL -- "previewUrlに格納" --> FileSeed["FileSeed.previewUrl"]
  FileSeed -- "img :src へ" --> Preview["プレビュー表示"]

File Walkthrough

Relevant files

Enhancement

entities.ts `FileSeedにpreviewUrlプロパティを追加` src/features/file/entities.ts FileSeedにpreviewUrlを追加プレビューURLを保持可能に	+1/-0

Bug fix

NewApplicationFileForm.vue `プレビューURL保存とimg参照先の修正` src/components/newApplication/NewApplicationFileForm.vue FileReader結果をpreviewUrlとして保存 imgのsrcをnameからpreviewUrlへ変更プレビュー読み込み失敗を解消	+2/-2

Copilot

Pull Request Overview

This PR fixes the preview display functionality for uploaded files by properly passing the file's data URL to the image preview component.

Key Changes:

Added previewUrl field to the FileSeed interface to store the file's preview URL
Updated file upload logic to capture and store the FileReader result as previewUrl
Changed image source binding from filename to the actual preview URL

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/features/file/entities.ts	Added optional `previewUrl` property to `FileSeed` interface
src/components/newApplication/NewApplicationFileForm.vue	Updated file handling to store preview URL and corrected image src binding

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/newApplication/NewApplicationFileForm.vue

github-actions · 2025-10-27T04:25:42Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 590 - Partially compliant Compliant requirements: FileReaderのreader.resultを用いてプレビュー用URLを状態に保持の src にプレビュー用URLを使用送信用のFileオブジェクトを引き続き保持 Non-compliant requirements: URL.createObjectURLの利用（データURLで代替しているため必須ではないが、明示はなし） Requires further human verification: 実ブラウザでPNG/JPEG/GIF等の代表的な画像が正しくプレビュー表示されることの確認大きいファイルや複数選択時の動作・パフォーマンス確認
⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review 型の整合性 reader.resultはstring \| ArrayBuffer \| nullの可能性があり、previewUrlに割り当てる前に型ガードやnullチェックが必要な可能性があります。template側で未定義/nullの場合のフォールバックも要確認。 reader.onload = () => { emit('input', [ ...props.files, { name: file.name, file: file, previewUrl: reader.result } as FileSeed ]) メモリ管理 DataURLはファイルサイズに比例してメモリを消費します。大量/大容量ファイルでのパフォーマンスを考慮し、必要に応じてURL.createObjectURLの利用やアンマウント時の解放検討が必要です。 for (const file of Array.from(e.target.files)) { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { emit('input', [ ...props.files, { name: file.name, file: file, previewUrl: reader.result } as FileSeed ]) } } オプショナル扱い previewUrlがオプショナルのため、プレビュー描画側でundefined時の表示制御が必要です。現在のテンプレートでundefinedを許容するかを確認してください。 export interface FileSeed { file: File name: string previewUrl?: string }

src/features/file/entities.ts

reiroop · 2025-11-06T05:40:41Z

src/components/newApplication/NewApplicationFileForm.vue

 const emit = defineEmits<(e: 'input', value: FileSeed[]) => void>()

 const inputRef = ref()
+const filePreviewUrls = ref<string[]>([])


今はなさそうですが、props.filesが親側で変更された場合に追従できない気がします

src/components/newApplication/NewApplicationFileForm.vue

- refactor: `files` を `v-model` で渡す

src/components/newApplication/NewApplicationFileForm.vue

reiroop · 2025-11-07T01:18:37Z

src/components/newApplication/NewApplicationFileForm.vue

+  files,
+  files => {
+    filePreviewUrls.value = files.map(({ file }) => {
+      if (previewUrlCache.has(file)) {


previewUrlCache.get(file)を取得してundefinedでなかったらreturnする方が型的には安全そうな気がします

reiroop · 2025-11-07T01:56:05Z

src/components/newApplication/NewApplicationFileForm.vue

-    'input',
-    props.files.filter((_, i) => index !== i)
-  )
+  files.value.splice(index, 1)


悩みどころだけどremoveFileでもrevokeObjectURLを呼ばないとユーザーの操作次第では重くなりそうな気がします

src/components/newApplication/NewApplicationFileForm.vue

reiroop · 2025-11-18T14:44:01Z

src/components/newApplication/NewApplicationFileForm.vue

+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return previewUrlCache.get(file)!


previewUrlCache.get(file)を取得してundefinedでなかったらreturnする方が型的に保証されていて安全なので、そうする方がいい気がします

reiroop · 2025-11-18T14:57:48Z

src/components/newApplication/NewApplicationFileForm.vue

+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  URL.revokeObjectURL(previewUrlCache.get(file)!)


previewUrlCache.get(file)がundefinedでない時だけrevokeObjectURLを呼ぶ、みたいなラフな実装でいいので、null assertionはあんまり使わないようにお願いします
型チェックの恩恵は受けられないより受けられる方がましです

reiroop · 2025-11-18T15:02:15Z

src/components/newApplication/NewApplicationFileForm.vue

+  files.value.splice(index, 1)
 }
+
+const filePreviewUrls = computed(() => {


必須ではないんですけど、useFilePreviewUrlsみたいなcomposableをこのコンポーネント内か別ファイルに作って、previewUrlCacheはその中でだけ参照されるようにしつつ、onUnmountedをその中で呼び出すようにすると、特定の役割をしている変数と処理群をまとめられるので可読性と将来的な変更のしやすさが上げられたり、変数の可視範囲を狭められて将来誤った変更をする可能性を減らせたりするので良いんじゃないかなと思います

otukado requested review from Copilot and reiroop October 27, 2025 04:24

otukado self-assigned this Oct 27, 2025

Copilot AI reviewed Oct 27, 2025

View reviewed changes

src/components/newApplication/NewApplicationFileForm.vue Outdated Show resolved Hide resolved

github-actions bot added the Review effort 2/5 label Oct 27, 2025

reiroop requested changes Oct 31, 2025

View reviewed changes

src/features/file/entities.ts Outdated Show resolved Hide resolved

otukado closed this Oct 31, 2025

otukado force-pushed the fix/file-image-preview branch from 871ca1f to 3fe4144 Compare October 31, 2025 14:31

otukado reopened this Nov 5, 2025

otukado requested a review from reiroop November 6, 2025 04:38

reiroop reviewed Nov 6, 2025

View reviewed changes

src/components/newApplication/NewApplicationFileForm.vue Outdated Show resolved Hide resolved

otukado added 3 commits November 6, 2025 22:14

fix: プレビュー表示できるようにする

136d961

- refactor: `files` を `v-model` で渡す

refactor: filePreviewUrls を files が更新されたときに再計算する

76411df

optimize: FileReader の結果をキャッシュする

3366719

otukado force-pushed the fix/file-image-preview branch from c3ab260 to 3366719 Compare November 6, 2025 14:34

otukado requested a review from reiroop November 6, 2025 14:35

reiroop reviewed Nov 6, 2025

View reviewed changes

src/components/newApplication/NewApplicationFileForm.vue Outdated Show resolved Hide resolved

refactor: readAsDataURL ではなくcreateObjectURL を用いた実装にする

638048c

otukado requested a review from reiroop November 7, 2025 01:06

reiroop reviewed Nov 7, 2025

View reviewed changes

src/components/newApplication/NewApplicationFileForm.vue Outdated Show resolved Hide resolved

otukado added 2 commits November 10, 2025 11:16

fixup! refactor: readAsDataURL ではなくcreateObjectURL を用いた実装にする

2ecd1ba

fixup! refactor: readAsDataURL ではなくcreateObjectURL を用いた実装にする

dd96f59

otukado requested a review from reiroop November 18, 2025 08:48

reiroop reviewed Nov 18, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: プレビューを正しく表示できるようにする #601

fix: プレビューを正しく表示できるようにする #601

Uh oh!

otukado commented Oct 27, 2025 •

edited by github-actions bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions bot commented Oct 27, 2025

Uh oh!

Uh oh!

reiroop Nov 6, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reiroop Nov 7, 2025

Uh oh!

reiroop Nov 7, 2025 •

edited

Loading

Uh oh!

Uh oh!

reiroop Nov 18, 2025

Uh oh!

reiroop Nov 18, 2025

Uh oh!

reiroop Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
		return previewUrlCache.get(file)!

		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
		URL.revokeObjectURL(previewUrlCache.get(file)!)

fix: プレビューを正しく表示できるようにする #601

Are you sure you want to change the base?

fix: プレビューを正しく表示できるようにする #601

Uh oh!

Conversation

otukado commented Oct 27, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

github-actions bot commented Oct 27, 2025

PR Reviewer Guide 🔍

Uh oh!

Uh oh!

reiroop Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

reiroop Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

reiroop Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

reiroop Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

reiroop Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

reiroop Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

otukado commented Oct 27, 2025 •

edited by github-actions bot

Loading

reiroop Nov 7, 2025 •

edited

Loading