https://yuzu-official.com/assets/controllers/avatar_controller-67f…49deb43efd8b4176e6efa8d125b1ed7158e1f71c.js

1import { Controller } from "@hotwired/stimulus";
2
3/**
4 * アバターコントローラー
5 * ユーザーのアバター画像のアップロードとプレビューを管理する
6 */
7export default class extends Controller {
8    // ターゲットの定義
9    static targets = ["fileInput", "previewImage"];
10
11    /**
12     * ファイル選択ダイアログを開く
13     * 画像のアップロードをトリガーする
14     */
15    openFileDialog() {
16        this.fileInputTarget.click();
17    }
18
19    /**
20     * 画像プレビューを表示する
21     * 選択されたファイルが画像であることを確認し、プレビューを更新する
22     */
23    displayPreview() {
24        const file = this.fileInputTarget.files[0];
25
26        if (file && file.type.startsWith("image/")) {
27            const reader = new FileReader();
28
29            reader.onload = (event) => {
30                this.previewImageTarget.src = event.target.result;
31            };
32
33            reader.readAsDataURL(file);
34        } else {
35            this.fileInputTarget.value = ""; // ファイルをリセット
36        }
37    }
38};