enhance(frontend): 投稿フォームのファイルアップロードUIをドライブのものと統合

[kakkokari-gtyih]

What

• ドライブファイルのとローカルファイルを統合
• 並び替えに対応
• アップロード中止により投稿の可否のコンディションが変化した場合（文字が空でアップロードされるファイルが0個になった場合など）、投稿処理を中止するように

2025-06-07.162555.mp4

Why

#16173 (comment)

Additional info (optional)

TODO: アップロードファイル側の画像拡大表示

動作が若干不安定かもしれない（かなりテストしたけど…）

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

❌ Patch coverage is 0% with 153 lines in your changes missing coverage. Please review.
✅ Project coverage is 13.95%. Comparing base (78435dc) to head (9321df9).
⚠️ Report is 197 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/frontend/src/components/MkPostForm.vue	0.00%	57 Missing and 22 partials ⚠️
...ges/frontend/src/components/MkPostFormAttaches.vue	0.00%	39 Missing and 9 partials ⚠️
packages/frontend/src/utility/file-type.ts	0.00%	15 Missing and 9 partials ⚠️
...s/frontend/src/components/MkDriveFileThumbnail.vue	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #16175      +/-   ##
===========================================
- Coverage    13.97%   13.95%   -0.02%     
===========================================
  Files          237      240       +3     
  Lines        11273    11416     +143     
  Branches      3728     3785      +57     
===========================================
+ Hits          1575     1593      +18     
- Misses        7578     7663      +85     
- Partials      2120     2160      +40     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[syuilo]

ファイル名やファイルサイズは確認できた方が良いことを考えると縦に並べた方が良いかもしれない

[kakkokari-gtyih]

ファイル名やファイルサイズは確認できた方が良いことを考えると縦に並べた方が良いかもしれない

ファイル数が多いと場所取りそう
v-tooltipにファイル名を入れてクリックで詳細情報を展開（画像の拡大表示を含む）にするとか

[syuilo]

ふーむスマホとの相性が悪そうなんよね

[syuilo]

うっかり巨大なファイルを上げてしまったりすることを防止したいから何らかのアクションの必要なしに基本的なファイル情報は見えている必要はあると思う

[kakkokari-gtyih]

うっかり巨大なファイルを上げてしまったりすることを防止したい

明らかに大きいファイルはアップロードに時間が掛かる（＝progressがなかなか更新されない）ので気付ける気はする（微妙に大きいファイルの場合は回線によっては気付けないかもしれないけど…）

[kakkokari-gtyih]

それか大きいファイルはサイズ決め打ちで警告を出すか

[kakkokari-gtyih]

ふーむスマホとの相性が悪そうなんよね

横長になるとそれはそれでスマホでの並び替えとの相性が悪くなりそう

[syuilo]

ファイル名に公開したくない情報が含まれていて気づかずにアップロードしてしまうというのもたまにあるわね

[kakkokari-gtyih]

そうなるとデザインをPostFormAttachesに寄せるんじゃなくて（ドライブファイル含め）UploaderItemsに寄せる方が良いということになるわね

[syuilo]

検討中

[kakkokari-gtyih]

アップロードの際に常にダイアログを出すようにする設定を追加して詳細情報をちゃんと確認したい人はそちらをオンにしてもらうのはどうかしら

[kakkokari-gtyih]

アップロードの際に常にダイアログを出すようにする設定を追加して詳細情報をちゃんと確認したい人はそちらをオンにしてもらうのはどうかしら

👀 （Related to #16205 ）

[syuilo]

うーーーーーむ