Keep page media count updated when adding/removing media files

themes/grav/app/pages/page/media.js

@@ -116,6 +116,7 @@ export default class PageMedia extends FilesField {
 
         // accepted
         this.updateThumbsSize();
+        this.updateMediaCount();
         $('.dz-preview').prop('draggable', 'true');
     }
 
@@ -127,6 +128,8 @@ export default class PageMedia extends FilesField {
 
     onDropzoneRemovedFile(file, ...extra) {
         super.onDropzoneRemovedFile(file, ...extra);
+
+        this.updateMediaCount();
         if (this.sortable) {
             this.sortable.options.onSort();
         }
@@ -141,6 +144,11 @@ export default class PageMedia extends FilesField {
       }
     }
 
+    updateMediaCount() {
+      const element = this.container.closest('.pagemedia-field').find('[data-pagemedia-count]');
+      element.text(`(${this.dropzone.files.length})`);
+    }
+
     attachDragDrop() {
         this.container.delegate('[data-dz-insert]', 'click', (e) => {
             let target = $(e.currentTarget).parent('.dz-preview').find('.dz-filename');

themes/grav/templates/forms/fields/pagemedia/pagemedia.html.twig

@@ -32,7 +32,7 @@
     <div class="form-label">
         <label class="media-collapser">
           <i class="fa fa-fw small fa-chevron-{{ pageMediaStore.collapsed ? 'right' : 'down' }}"></i>
-          {{ field.label|t }} ({{ admin.page.media|length }})
+          {{ field.label|t }} <span data-pagemedia-count>({{ admin.page.media|length }})</span>
         </label>
         <div class="{{ pageMediaStore.collapsed ? 'hidden' : '' }}">
           <input type="range" min="70" step="10" max="200" value="{{ pageMediaStore.width }}" class="media-resizer">