fix: backport various fixes (#39203, #39236, #39239, #39248, #39251) (#39252)

web_src/js/features/dropzone.ts

@@ -132,7 +132,7 @@ export async function initDropzone(dropzoneEl: HTMLElement) {
         const file = {name: attachment.name, uuid: attachment.uuid, size: attachment.size};
         dzInst.emit('addedfile', file);
         dzInst.emit('complete', file);
-        if (isImageFile(file.name)) {
+        if (isImageFile(file)) {
           const imgSrc = `${attachmentBaseLinkUrl}/${file.uuid}`;
           dzInst.emit('thumbnail', file, imgSrc);
         }

web_src/js/modules/fomantic/modal.ts

@@ -66,9 +66,9 @@ function onModalBeforeHidden(this: any) {
 function onModalApproveDefault(this: any) {
   const $modal = $(this);
   const selectors = $modal.modal('setting', 'selector');
-  const elModal = $modal[0];
-  const elApprove = elModal.querySelector(selectors.approve);
-  const elForm = elApprove?.closest('form');
+  const elModal = $modal[0] as HTMLElement;
+  const elApprove = elModal.querySelector<HTMLElement>(selectors.approve);
+  const elForm = elApprove?.closest<HTMLFormElement>('form');
   if (!elForm) return true; // no form, just allow closing the modal
 
   // "form-fetch-action" can handle network errors gracefully,
@@ -78,6 +78,7 @@ function onModalApproveDefault(this: any) {
   // There is an abuse for the "modal" + "form" combination, the "Approve" button is a traditional form submit button in the form.
   // Then "approve" and "submit" occur at the same time, the modal will be closed immediately before the form is submitted.
   // So here we prevent the modal from closing automatically by returning false, add the "is-loading" class to the form element.
+  if (!elForm.reportValidity()) return false;
   elForm.classList.add('is-loading');
   return false;
 }