Krajee Bootstrap File Input二次打开模态框后无法识别文件上传

I see exactly what's going on here—your current approach of destroying and reinitializing the file input inside the modal's hidden event is causing conflicts, and you're ending up with duplicate event bindings and inconsistent state. Let's fix this step by step.

The Root Issues #

1. You're reinitializing the file input when the modal is closing, not when it's opening—this means the control is being attached to a hidden DOM element, leading to unexpected behavior.
2. You're not unbinding old event handlers before reattaching them, so each time you open the modal, you add another layer of change and filebatchuploadsuccess listeners, causing logic conflicts.
3. The original file input's value isn't being fully reset, leaving residual state that confuses the Krajee control.

The Solution #

We'll refactor your code to initialize the file input only when the modal is shown, clean up properly when it's hidden, and avoid duplicate event bindings.

Step 1: Extract the Initialization Logic into a Reusable Function

This keeps your code DRY and ensures consistent setup every time:

private initFileUpload(): void {
    // Destroy any existing file input instance first to avoid conflicts
    if ($("#fileFileUpload").data('fileinput')) {
        $("#fileFileUpload").fileinput('destroy');
    }

    // Reset the original file input to clear any residual file selection
    $("#fileFileUpload").val('');

    // Initialize the Krajee file input with your config
    $("#fileFileUpload").fileinput({
        showPreview: true,
        uploadAsync: false,
        uploadUrl: '/fileupload',
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        allowedPreviewTypes: ['image'],
        uploadExtraData: { 
            memberId: $("#hidMemberId").val() 
        },
        resizeImage: true,
        theme: 'fa',
        minFileCount: 1,
        maxFileCount: 1,
        dropZoneEnabled: false,
        showRemove: false,
        showUpload: false,
        showCancel: false,
        overwriteInitial: true
    })
    // Unbind any existing change handlers before attaching a new one
    .off('change')
    .on("change", () => {
        // Unbind old upload success handlers to prevent duplicate triggers
        $("#fileFileUpload").off('filebatchuploadsuccess');
        
        // Trigger upload and bind success handler
        $("#fileFileUpload").fileinput('upload')
        .on("filebatchuploadsuccess", (event, data: any) => {
            this.uploadFinished(data);
        });
    });
}

Step 2: Update Modal Event Bindings

We'll initialize the control when the modal is fully visible, and clean up when it's hidden:

// Initialize file input ONLY when the modal is fully shown
$('#modalUpload').on('shown.bs.modal', () => {
    this.initFileUpload();
});

// Clean up when the modal is hidden
$('#modalUpload').on('hidden.bs.modal', () => {
    $("#divCropper").hide();
    $("#divFileInput").show();

    // Destroy the file input instance if it exists
    if ($("#fileFileUpload").data('fileinput')) {
        $("#fileFileUpload").fileinput('destroy');
    }

    // Reset the original input to ensure no leftover state
    $("#fileFileUpload").val('');
});

Why This Works #

• Initializing on shown.bs.modal: Ensures the DOM element is visible and ready for the Krajee control to attach properly.
• Destroying before reinitializing: Prevents multiple instances of the file input from conflicting with each other.
• Unbinding events with off(): Eliminates duplicate event triggers that would cause unexpected behavior (like multiple upload attempts).
• Resetting the original input: Clears any cached file selection, so the control starts fresh every time the modal opens.

Test It Out #

Now when you close the modal, the control is destroyed and the input is reset. When you reopen it, a brand new, properly initialized file input is ready to use—no more "You must select at least 1 file to upload" errors after selecting a file.

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