feat(pat contentbrowser): configurable accepted mimetypes for uploads. pat-tinymce uses this to ensure only 'image/*' mimetypes in image modal.

Author: petschki

src/pat/contentbrowser/README.md

@@ -32,6 +32,7 @@ Show a widget to select items in an offcanvas miller-column browser.
 | separator                  | string  | ','                                     | Select2 option. String which separates multiple items.                                                                                           |
 | upload                     | boolean | false                                   | Allow file and image uploads from within the related items widget.                                                                               |
 | uploadAddImmediately       | boolean | true                                    | Add uploaded item(s) immediately to the selected items field.                                                                                    |
+| uploadAcceptedMimetypes    | string  |                                         | Define accepted mimetypes of files to be uploaded.For example "image/*" accepts only images                                                      |
 | recentlyUsed               | boolean | false                                   | Show the recently used items dropdown.                                                                                                           |
 | recentlyUsedKey            | integer |                                         | Storage key for saving the recently used items. This is generated with fieldname and username in the patternoptions.                             |
 | recentlyUsedMaxItems       | integer | 20                                      | Maximum items to keep in recently used list. 0: no restriction.                                                                                  |

src/pat/contentbrowser/contentbrowser.js

@@ -46,6 +46,7 @@ parser.addArgument("recently-used-max-items");
 parser.addArgument("b-size");
 parser.addArgument("upload");
 parser.addArgument("upload-add-immediately");
+parser.addArgument("upload-accepted-mimetypes");
 parser.addArgument("sort-on");
 parser.addArgument("sort-order");
 

src/pat/contentbrowser/src/App.svelte

@@ -33,6 +33,7 @@
     export let fieldId;
     export let upload;
     export let uploadAddImmediately = true;
+    export let uploadAcceptedMimetypes;
     export let favorites;
     export let recentlyUsed;
     export let recentlyUsedKey;
@@ -100,6 +101,7 @@
         fieldId: fieldId,
         uploadEnabled: upload,
         uploadAddImmediately: uploadAddImmediately,
+        uploadAcceptedMimetypes: uploadAcceptedMimetypes,
         favorites: favorites,
         recentlyUsed: recentlyUsed,
         recentlyUsedKey: recentlyUsedKey,

src/pat/contentbrowser/src/ContentBrowser.svelte

@@ -87,6 +87,7 @@
             hiddenInputContainer: ".upload-wrapper",
             maxFiles:
                 $config.maximumSelectionSize > 0 ? $config.maximumSelectionSize : null,
+            acceptedFiles: $config.uploadAcceptedMimetypes,
             success: (fileupload, obj) => {
                 if ($config.maximumSelectionSize == 1) {
                     // remove currently selected item and save the uid of the uploaded item

src/pat/tinymce/js/links.js

@@ -50,7 +50,7 @@ const LinkType = Base.extend({
             "data-val": this.value(),
         };
     },
-    updateRelatedItems: function () {},
+    updateRelatedItems: function () { },
 });
 
 const ExternalLink = LinkType.extend({
@@ -94,20 +94,25 @@ const InternalLink = LinkType.extend({
         return this.el.querySelector("input");
     },
 
-    createContentBrowser: async function () {
+    contentBrowserOptions: function () {
         const options = {
             selection: [],
             ...this.linkModal.options?.relatedItems,
         };
         options["maximum-selection-size"] = 1;
         // enable upload in ContentBrowser instead of separate tab
         options["upload"] = 1;
-        const inputEl = this.getEl();
         const element = this.tiny.selection.getNode();
         const linkType = this.tiny.dom.getAttrib(element, "data-linktype");
         if (linkType === "internal" || linkType === "image") {
             options.selection.push(this.tiny.dom.getAttrib(element, "data-val"));
         }
+        return options;
+    },
+
+    createContentBrowser: async function () {
+        const inputEl = this.getEl();
+        const options = this.contentBrowserOptions();
         const ContentBrowser = (await import("../../contentbrowser/contentbrowser"))
             .default;
         this.contentBrowserPattern = new ContentBrowser(inputEl, options);
@@ -125,6 +130,13 @@ const InternalLink = LinkType.extend({
 const ImageLink = InternalLink.extend({
     name: "imagelinktype",
     trigger: ".pat-imagelinktype-dummy",
+
+    contentBrowserOptions: function () {
+        const options = InternalLink.prototype.contentBrowserOptions.call(this);
+        options["uploadAcceptedMimetypes"] = "image/*";
+        return options;
+    },
+
     toUrl: function () {
         const value = this.value();
         return this.tinypattern.generateImageUrl(