Laravel中Uppy多上传实例初始化及名称分配技术问询

Hey there! Let's break down how to solve both of your Uppy challenges in your Laravel app—dynamic instance initialization and unique upload field names.

1. Initialize Multiple Uppy Instances Dynamically #

Since you need flexible numbers of uploaders (like per child in a family), the trick is to mark each upload container with unique identifiers and loop through them to create individual Uppy instances. Here's how to do it:

First, set up your dynamic HTML containers (this would be generated via Laravel loops, like @foreach):

<!-- Example: Laravel loop generating upload containers -->
@foreach($familyMembers as $index => $member)
    <div class="kt_uppy" 
         data-uppy-name="national_id_{{ $index + 1 }}" 
         id="uppy-national-id-{{ $index + 1 }}">
    </div>
    <div class="kt_uppy" 
         data-uppy-name="driving_license_{{ $index + 1 }}" 
         id="uppy-driving-license-{{ $index + 1 }}">
    </div>
@endforeach

Then, update your JavaScript to loop through all .kt_uppy containers and create a Uppy instance for each:

<script>
const Dashboard = Uppy.Dashboard;
const XHRUpload = Uppy.XHRUpload;

// Loop through every upload container
document.querySelectorAll('.kt_uppy').forEach((container) => {
    // Pull unique identifiers from data attributes
    const uploadFieldName = container.dataset.uppyName;
    const containerId = container.id;

    // Shared core config for all instances
    const coreConfig = {
        autoProceed: true,
        restrictions: {
            maxFileSize: 1000000, // 1MB
            maxNumberOfFiles: 1,
            minNumberOfFiles: 1
        }
    };

    // Dashboard config tailored to each container
    const dashboardConfig = {
        proudlyDisplayPoweredByUppy: false,
        target: containerId,
        inline: true,
        resultName: 'uppyResult',
        replaceTargetContent: true,
        showProgressDetails: true,
        note: null,
        height: 170,
        metaFields: [
            { id: 'name', name: 'Name', placeholder: 'File name' },
            { id: 'caption', name: 'Caption', placeholder: 'Describe this image' }
        ],
        browserBackButtonClose: true,
    };

    // Create a unique Uppy instance for this container
    const uppy = Uppy.Core(coreConfig);
    uppy.use(Dashboard, dashboardConfig);

    // Configure upload handling (we'll tackle the unique name here too)
    uppy.use(XHRUpload, {
        endpoint: '{{ route('upload') }}',
        formData: true,
        // This sets the upload field name (matches <input name="...">)
        fieldName: uploadFieldName,
        // Add Laravel CSRF token to the request (critical for security)
        beforeRequest: (req) => {
            req.setHeader('X-CSRF-Token', '{{ csrf_token() }}');
        }
    });

    // Optional: Add event listeners for each instance (e.g., post-upload actions)
    uppy.on('complete', (result) => {
        console.log(`Upload for ${uploadFieldName} finished:`, result);
    });
});
</script>

This approach automatically initializes a Uppy instance for every .kt_uppy container—no matter how many you generate dynamically in Laravel.

2. Assign Unique name Attributes to Each Instance #

The fieldName option in the XHRUpload config is exactly what you need here. As shown above, we pull uploadFieldName from the container's data-uppy-name attribute (e.g., national_id_1) and pass it to fieldName.

When the file is uploaded, this acts exactly like an <input type="file" name="national_id_1"> field. In your Laravel controller, you can access each file using:

// Example: Retrieve the first family member's national ID
$nationalId = $request->file('national_id_1');
// Retrieve their driving license
$drivingLicense = $request->file('driving_license_1');

Quick Notes #

• Unique Container IDs: Make sure each .kt_uppy container has a unique id (we used the loop index in the example) to avoid Dashboard conflicts.
• CSRF Protection: Always include the CSRF token in XHR requests—Laravel blocks unauthenticated POST requests without it.
• Flexibility: You can extend the data-* attributes to pass other context (like a family member's ID) and include it in the upload request via the beforeRequest hook.

内容的提问来源于stack exchange，提问作者Mohammad Hosseini