如何使用$dispatch将ID传入模态框并保存至数据库

1. 修改按钮，传递Application ID到模态框 #

在applications.blade的按钮中，更新x-on:click事件，在open-modal调度中携带目标应用的ID参数：

<a href="#" class="block px-5 py-1 hover:bg-gray-100" 
x-on:click="$dispatch('open-modal', { name: 'bspms-attachments', applicationId: {{ $application->id }} })">Attach
</a>

注：确保$application->id是当前页面对应的数据模型变量

2. 在模态框中接收ID并绑定到表单 #

首先，在toggle-button的表单内添加隐藏输入框，用于存储传递过来的ID：

<div id="uploadModal1" class="modal">
    <div class="modal-content">
        <span class="close" id="closeModal1">&times;</span>
        <h2>Upload File</h2>
        <form action="{{ route('file.upload') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- 隐藏输入框存储application ID -->
            <input type="hidden" name="application_id" x-bind:value="applicationId">
            <input type="file" name="fileInput1">
            <button type="submit">Upload</button>
        </form>      
    </div>
</div>

然后修改modals.blade中的x-pop-up组件，添加Alpine.js状态来接收并暂存ID：

<x-pop-up name="bspms-attachments" :show="false" focusable class="w-[650px]"
    x-data="{ applicationId: null }"
    x-on:open-modal.window="if ($event.detail.name === 'bspms-attachments') { 
        applicationId = $event.detail.applicationId;
        console.log('Received Application ID:', applicationId); // 控制台调试用
    }"> 
    {{-- Define the width for the modal. The minimum width is 500px --}}
    <x-slot:title>
        Documents/Attachments
    </x-slot:title>
    
    {{-- Content starts here --}}
    <x-toggle-button></x-toggle-button>
</x-pop-up>

这段代码会监听全局的open-modal事件，当触发的模态框名称匹配时，将传递的ID存入组件状态，再通过x-bind:value绑定到表单的隐藏输入框。

3. 控制器中接收ID并写入数据库 #

更新控制器代码，从请求中获取application_id并完成数据库写入：

use Illuminate\Http\Request;

public function upload(Request $request)
{
    // 此处省略文件上传的逻辑处理，确保$originalFile、$fileInputName、$filePath已正确获取
    
    ApplicationsAttachment::create([
        'application_id' => $request->application_id, // 从表单请求中获取ID
        'file_name' => $fileInputName,
        'file_type' => explode('/', $originalFile->getMimeType())[1],
        'file_path' => $filePath,
        'file_size' => $originalFile->getSize(), // 注意：getMaxFilesize()是服务器允许的最大上传尺寸，应使用getSize()获取文件实际大小
    ]);
    
    // 后续响应逻辑（比如跳转、返回提示）
}

4. 验证调试 #

点击Attach按钮打开模态框后，打开浏览器控制台（F12），可以看到打印的Received Application ID:及对应数值，确认ID传递正常。提交表单后，检查数据库applications_attachments表的application_id字段，验证是否已正确写入。

内容的提问来源于stack exchange，提问作者Hayato Yorikawa