feat: added tiff files preview support (filebrowser#1222)

frontend/package.json

@@ -21,6 +21,7 @@
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
     "qrcode.vue": "^1.7.0",
+    "utif": "^3.1.0",
     "vue": "^2.6.10",
     "vue-i18n": "^8.15.3",
     "vue-lazyload": "^1.3.3",

frontend/src/components/files/ExtendedImage.vue

@@ -10,11 +10,12 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img :src="src" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
+    <img src="" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
   </div>
 </template>
 <script>
 import throttle from 'lodash.throttle'
+import UTIF from 'utif'
 
 export default {
   props: {
@@ -61,6 +62,9 @@ export default {
     }
   },
   mounted() {
+    if (!this.decodeUTIF()) {
+      this.$refs.imgex.src = this.src
+    }
     let container = this.$refs.container
     this.classList.forEach(className => container.classList.add(className))
     // set width and height if they are zero
@@ -85,6 +89,20 @@ export default {
     }
   },
   methods: {
+    // Modified from UTIF.replaceIMG
+    decodeUTIF() {
+      const sufs = ["tif", "tiff", "dng", "cr2", "nef"]
+      let suff = document.location.pathname.split(".").pop().toLowerCase()
+      if (sufs.indexOf(suff) == -1) return false
+      let xhr = new XMLHttpRequest()
+      UTIF._xhrs.push(xhr)
+      UTIF._imgs.push(this.$refs.imgex)
+      xhr.open("GET", this.src)
+      xhr.responseType = "arraybuffer"
+      xhr.onload = UTIF._imgLoaded
+      xhr.send()
+      return true
+    },
     onLoad() {
       let img = this.$refs.imgex