Save Button Click Handler Not Firing in Custom DocumentUpload Modal with Dropzone #12517

Hi,

I'm developing a custom modal in our ASP.NET Zero application for uploading documents. I'm encountering an issue where the "Save" button in the modal doesn't respond to clicks.

Setup:

I have a modal defined using Razor views (.cshtml). The modal includes standard input fields, a dropdown for selecting an entity type, a Select2 component for searching/associating the document with an entity, and a Dropzone area for file uploads. I've implemented a custom JavaScript modal object (app.modals.CreateOrEditDocumentUploadModal) following ABP conventions. The "Save" button in the modal footer has the class save-button as expected by the ABP framework and my script. The Problem:

When I click the "Save" button, absolutely nothing happens. No JavaScript errors appear in the console. I have added console.log statements directly inside the save button's click event handler (attached using $(document).on('click', 'button.save-button', ...) within the modal's init function) and inside the main save() function. None of these logs appear when the button is clicked. Other interactive elements in the modal work fine (e.g., the "Cancel" button closes the modal, the entity type dropdown populates the Select2 search, files are added to Dropzone). The form validation (using jQuery Validate) seems to initialize correctly. Submitting the form via pressing Enter also fails to trigger the save logic. What I've Verified:

Button HTML: I have inspected the "Save" button element, and it correctly has the class save-button. <button type="button" class="btn btn-primary save-button">Save</button> Script File & Caching: I have confirmed the content of my CreateOrEditDocumentUploadModal.js file includes the save button initialization code. I have performed hard reloads (Ctrl+Shift+R) multiple times after updates. Console Logs: When the modal initializes, I see logs for form initialization, Dropzone initialization, and file addition. Crucially, I do not see the log [DEBUG] Save button found: ... which should appear during initialization, nor [DEBUG] Save button clicked when the button is pressed. Test Handler: I tried adding a specific test event handler in the browser console after the modal opens: $(document).off('click.testDebug').on('click.testDebug', 'button.save-button', function(e) { console.log("[TEST DEBUG] Specific save button clicked!", e); }); Clicking the save button does not produce this test log either. Dropzone Suspicions: The issue seems related to Dropzone. If I attempt to replace Dropzone with FilePond, different integration issues arise, suggesting a potential conflict or specific requirement for how file upload components interact within this modal setup. Relevant Code Snippets:

Modal Footer (from _ModalFooterWithSaveAndCancel.cshtml or embedded in the main view): <div class="modal-footer"> <button type="button" class="btn btn-secondary close-button" data-dismiss="modal">@L("Cancel")</button> <button type="button" class="btn btn-primary save-button">@L("Save")</button> </div> JavaScript Save Button Initialization (from CreateOrEditDocumentUploadModal.js): // Inside app.modals.CreateOrEditDocumentUploadModal.init function // --- SAVE BUTTON INITIALIZATION --- var $saveButton = modal.find('button.save-button'); console.log('[DEBUG] Looking for save button. Found:', $saveButton.length); if (!$saveButton.length) { console.error('[ERROR] Save button not found'); abp.notify.error('Save button not initialized'); return; // Stop initialization if save button is missing } console.log('[DEBUG] Save button found:', $saveButton.length, 'Classes:', $saveButton.attr('class')); // Attach click handler using event delegation // Remove any previous handlers to prevent duplicates $(document).off('click', 'button.save-button').on('click', 'button.save-button', function (e) { e.preventDefault(); // Prevent default button action console.log('[DEBUG] Save button clicked'); // <-- This log is NOT appearing save(); // Call the save function }); // Also handle form submission (e.g., pressing Enter in a field) _$form.on('submit', function (e) { e.preventDefault(); // Prevent default form submission console.log('[DEBUG] Form submit triggered'); // <-- This log is also NOT appearing save(); // Call the save function }); Beginning of the Save Function (from CreateOrEditDocumentUploadModal.js): // Inside app.modals.CreateOrEditDocumentUploadModal // --- SAVE FUNCTION --- function save() { console.log('[DEBUG] Save function called'); // <-- This log is also NOT appearing // ... validation and AJAX logic ... } Dropzone Initialization (from CreateOrEditDocumentUploadModal.js): // Inside init function // Initialize Dropzone if (typeof Dropzone === 'undefined') { /* Error handling / } console.log('[DEBUG] Dropzone script loaded:', typeof Dropzone); Dropzone.autoDiscover = false; var $dropzone = modal.find('#document-upload-dropzone'); if (!$dropzone.length) { / Error handling */ } console.log('[DEBUG] Dropzone container found:', $dropzone.length); _dropzone = new Dropzone($dropzone[0], { url: '#', paramName: 'Files', autoProcessQueue: false, uploadMultiple: true, // ... other options ... init: function () { // Ensure the hidden file input has the correct name this.hiddenFileInput.name = 'Files'; } }); console.log('[DEBUG] Dropzone initialized'); Could you please advise on why the event handlers for the save button (both the delegated click and the form submit) are not firing? Is there a known interaction or conflict between Dropzone initialization and ABP modal event handling that I might be missing? Initially i tried Filepond and it was working well initially but then saving was preventied by Dropzone conflict and I could not use it and reverwted back to Dropzone. and Dropzone and save button are not working well together,