When uploading a file, automatically determine the best fitting attachment type

assets/controllers/elements/collection_type_controller.js

@@ -21,6 +21,7 @@ import {Controller} from "@hotwired/stimulus";
 
 import * as bootbox from "bootbox";
 import "../../css/components/bootbox_extensions.css";
+import accept from "attr-accept";
 
 export default class extends Controller {
     static values = {
@@ -112,6 +113,33 @@ export default class extends Controller {
                 dataTransfer.items.add(file);
 
                 rowInput.files = dataTransfer.files;
+
+                //Check the file extension and find the corresponding attachment type based on the data-filetype_filter attribute
+                const attachmentTypeSelect = newElement.querySelector("select");
+                if (attachmentTypeSelect) {
+                    let foundMatch = false;
+                    for (let j = 0; j < attachmentTypeSelect.options.length; j++) {
+                        const option = attachmentTypeSelect.options[j];
+                        //skip disabled options
+                        if (option.disabled) {
+                            continue;
+                        }
+
+                        const filter = option.getAttribute('data-filetype_filter');
+                        if (filter) {
+                            if (accept({name: file.name, type: file.type}, filter)) {
+                                attachmentTypeSelect.value = option.value;
+                                foundMatch = true;
+                                break;
+                            }
+                        } else { //If no filter is set, chose this option until we find a better match
+                            if (!foundMatch) {
+                                attachmentTypeSelect.value = option.value;
+                                foundMatch = true;
+                            }
+                        }
+                    }
+                }
             }
 
         });

package.json

@@ -46,6 +46,7 @@
         "@zxcvbn-ts/language-en": "^3.0.1",
         "@zxcvbn-ts/language-fr": "^3.0.1",
         "@zxcvbn-ts/language-ja": "^3.0.1",
+        "attr-accept": "^2.2.5",
         "barcode-detector": "^3.0.5",
         "bootbox": "^6.0.0",
         "bootswatch": "^5.1.3",

yarn.lock

@@ -2556,6 +2556,11 @@ async-function@^1.0.0:
   resolved "https://registry.yarnpkg.com/async-function/-/async-function-1.0.0.tgz#509c9fca60eaf85034c6829838188e4e4c8ffb2b"
   integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
 
+attr-accept@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
+  integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"