[4.0] Media Manager: invalidate browser's cache (#34925)

joomla · Jul 27, 2021 · 002ca82 · 002ca82
1 parent 9180bf3
commit 002ca82
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/administrator/components/com_media/resources/scripts/app/Api.es6.js b/administrator/components/com_media/resources/scripts/app/Api.es6.js
@@ -26,6 +26,7 @@ class Api {
     this.audioExtensions = options.audioExtensions;
     this.videoExtensions = options.videoExtensions;
     this.documentExtensions = options.documentExtensions;
+    this.mediaVersion = (new Date().getTime()).toString();
   }
 
   /**

diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/image.vue b/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
@@ -8,7 +8,7 @@
       <div class="image-background">
         <div
           class="image-cropped"
-          :style="{ backgroundImage: 'url(' + thumbUrl + ')' }"
+          :style="{ backgroundImage: getHashedURL }"
         />
       </div>
     </div>
@@ -187,6 +187,7 @@
 </template>
 
 <script>
+import { api } from '../../../app/Api.es6';
 import * as types from '../../../store/mutation-types.es6';
 
 export default {
@@ -199,14 +200,17 @@ export default {
     };
   },
   computed: {
-    /* Get the item url */
-    thumbUrl() {
-      return this.item.thumb_path;
-    },
     /* Check if the item is an image to edit */
     canEdit() {
       return ['jpg', 'jpeg', 'png'].indexOf(this.item.extension.toLowerCase()) > -1;
     },
+    /* Get the hashed URL */
+    getHashedURL() {
+      if (this.item.adapter.startsWith('local-')) {
+        return `url(${this.item.thumb_path}?${api.mediaVersion})`;
+      }
+      return `url(${this.item.thumb_path})`;
+    },
   },
   methods: {
     /* Preview an item */

diff --git a/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue b/administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue
@@ -40,7 +40,7 @@
         />
         <img
           v-if="isImage()"
-          :src="item.url"
+          :src="getHashedURL"
           :type="item.mime_type"
         >
       </div>
@@ -58,6 +58,7 @@
 </template>
 
 <script>
+import { api } from '../../app/Api.es6';
 import * as types from '../../store/mutation-types.es6';
 
 export default {
@@ -68,6 +69,13 @@ export default {
       // Use the currently selected directory as a fallback
       return this.$store.state.previewItem;
     },
+    /* Get the hashed URL */
+    getHashedURL() {
+      if (this.item.adapter.startsWith('local-')) {
+        return `${this.item.url}?${api.mediaVersion}`;
+      }
+      return this.item.url;
+    },
   },
   methods: {
     /* Close the modal */