Add File Preview Component

Author: PHPJunior

CHANGELOG.md

@@ -1,6 +1,10 @@
 CHANGE LOG
 ==========
 
+## v1.1.4
+
+* [ Added ] File Preview Component
+
 ## v1.1.3
 
 * [ Added ] Test

README.md

@@ -107,6 +107,7 @@ In `resources/assets/js/app.js` file:
  Vue.component('chat-room' , require('./components/laravel-video-chat/ChatRoom.vue'));
  Vue.component('group-chat-room', require('./components/laravel-video-chat/GroupChatRoom.vue'));
  Vue.component('video-section' , require('./components/laravel-video-chat/VideoSection.vue'));
+ Vue.component('file-preview' , require('./components/laravel-video-chat/FilePreview.vue'));
  
  Vue.use(VueTimeago, {
      name: 'timeago', // component name, `timeago` by default

resources/assets/js/components/ChatRoom.vue

@@ -27,10 +27,7 @@
                                         {{ message.text }}
                                     </p>
                                     <div class="row">
-                                        <div class="col-md-3" v-for="file in message.files">
-                                            <img :src="file.file_details.webPath" alt="" class="img-responsive">
-                                            <a :href="file.file_details.webPath" target="_blank" download>Download - {{ file.name }}</a>
-                                        </div>
+                                        <file-preview :file="file" v-for="file in message.files" :key="file.id"></file-preview>
                                     </div>
                                 </div>
                             </li>
@@ -78,11 +75,9 @@
                 </div>
             </div>
         </div>
+
         <div class="row">
-            <div class="col-md-3" v-for="file in conversation.files">
-                <img :src="file.file_details.webPath" alt="" class="img-responsive">
-                <a :href="file.file_details.webPath" target="_blank" download>Download - {{ file.name }}</a>
-            </div>
+            <file-preview :file="file" v-for="file in conversation.files" :key="file.id"></file-preview>
         </div>
     </div>
 </template>

resources/assets/js/components/FilePreview.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="col-md-3">
+        <img :src="file.file_details.webPath" alt="" class="img-responsive" :alt="file.name">
+        <a class="btn btn-success" :href="file.file_details.webPath" target="_blank" download :title="file.name">Download</a>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['file']
+    }
+</script>

resources/assets/js/components/GroupChatRoom.vue

@@ -26,11 +26,9 @@
                                     <p v-bind:class="{ 'pull-right' : check(message.sender.id) , 'pull-left' : !check(message.sender.id)}">
                                         {{ message.text }}
                                     </p>
+
                                     <div class="row">
-                                        <div class="col-md-3" v-for="file in message.files">
-                                            <img :src="file.file_details.webPath" alt="" class="img-responsive">
-                                            <a :href="file.file_details.webPath" target="_blank" download>Download - {{ file.name }}</a>
-                                        </div>
+                                        <file-preview :file="file" v-for="file in message.files" :key="file.id"></file-preview>
                                     </div>
                                 </div>
                             </li>
@@ -57,12 +55,11 @@
             </div>
         </div>
         </div>
+
         <div class="row">
-            <div class="col-md-3" v-for="file in conversation.files">
-                <img :src="file.file_details.webPath" alt="" class="img-responsive">
-                <a :href="file.file_details.webPath" target="_blank" download>Download - {{ file.name }}</a>
-            </div>
+            <file-preview :file="file" v-for="file in conversation.files" :key="file.id"></file-preview>
         </div>
+
     </div>
 </template>
 <script>