✨ Site > File > Handle unreadable file and image preview

lib/watcher.js

@@ -104,7 +104,7 @@ class Watcher
             const mimeType = mime.lookup(relativePath)
             const file = {}
 
-            file.path     = relativePath
+            file.path = relativePath
             file.canRead = true
 
             // Test mime type

site/src/components/file/script.js

@@ -16,6 +16,16 @@ export default
         downloadUrl()
         {
             return `${this.$store.state.url}/${this.$store.state.projects.current.slug}/files/${this.content.path.full}`
+        },
+
+        isImage()
+        {
+            return ['jpg', 'jpeg', 'png', 'tiff', 'gif', 'webp'].indexOf(this.content.extension) !== -1
+        },
+
+        isCode()
+        {
+            return this.content.versions.length > 0
         }
     },
 

site/src/components/file/template.html

@@ -1,10 +1,17 @@
-<div class="file" :class="[versionsActive ? 'version-active' : '']">
+<div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
     <header>
-        <a href="#" @click.prevent="onDifferencesClick">Differences <span v-if="differencesActive">(on)</span></a>
-        <a href="#" @click.prevent="onVersionsClick">Versions <span v-if="versionsActive">(on)</span></a>
+        <a href="#" @click.prevent="onDifferencesClick" v-if="isCode">Differences <span v-if="differencesActive">(on)</span></a>
+        <a href="#" @click.prevent="onVersionsClick" v-if="isCode">Versions <span v-if="versionsActive">(on)</span></a>
         <a :href="downloadUrl" download>Download</a>
-        {{ content.path.directory }} {{ content.name }}
+        {{ content.path.directory }}/{{ content.name }}
     </header>
-    <versions :file="content" :content="content.versions" v-if="versionsActive"></versions>
-    <viewer :differences-active="differencesActive"></viewer>
+    <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
+    <viewer :differences-active="differencesActive" v-if="isCode"></viewer>
+    <div class="preview" v-if="isImage">
+    	<img :src="downloadUrl">
+    </div>
+    <div class="cant-read" v-if="!isCode && !isImage">
+    	<br>Sorry, I can't read this file.
+    	<br>But you can <a :href="downloadUrl" download>download it</a>
+    </div>
 </div>