Fix #18 Allow raw file data in VueFilePreview

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-<div class="container">
+<div class="container mb-3">
+  <h2>Demo VueFileIcon</h2>
+  <div>
+    <demo-icons></demo-icons>
+  </div>
   <h2>Demo Basic</h2>
   <div class="bg-dark p-3">
     <demo-basic></demo-basic>
@@ -9,6 +13,10 @@
   <div>
     <demo-advanced></demo-advanced>
   </div>
+  <h2>Demo VueFilePreview</h2>
+  <div>
+    <demo-previews></demo-previews>
+  </div>
 </div>
 </template>
 <style>
@@ -22,11 +30,15 @@
 
   import DemoBasic from './demo/demo-basic.vue';
   import DemoAdvanced from './demo/demo-advanced.vue';
+  import DemoIcons from './demo/demo-icons.vue';
+  import DemoPreviews from './demo/demo-previews.vue';
 
   export default {
     components: {
       DemoBasic,
-      DemoAdvanced
+      DemoAdvanced,
+      DemoIcons,
+      DemoPreviews
     }
   }
 

src/components/vue-file-agent.vue

@@ -13,7 +13,7 @@
     <template v-for="(fileData, index) in filesData">
       <slot name="file-preview" v-bind:fileData="fileData" v-bind:index="index">
         <VueFilePreview 
-          :fileData="fileData" :index="index" :deletable="isDeletable" :editable="editable === true" :errorText="errorText" :disabled="disabled" @remove="removeFileData($event)"
+          :value="fileData" :index="index" :deletable="isDeletable" :editable="editable === true" :errorText="errorText" :disabled="disabled" @remove="removeFileData($event)"
            :key="fileData.id" class="file-preview-wrapper grid-box-item grid-block"></VueFilePreview>
       </slot>
     </template>

src/components/vue-file-preview.vue

@@ -47,20 +47,37 @@
 
   import utils from '../lib/utils';
   import VueFileIcon from './vue-file-icon.vue';
+  import FileData from '../lib/file-data';
 
   export default {
-    props: ['fileData', 'deletable', 'editable', 'errorText', 'disabled'],
+    props: ['value', 'deletable', 'editable', 'errorText', 'disabled'],
     components: {
       VueFileIcon
     },
     data: function(){
       return {
         isEditInputFocused: false,
         isEditCancelable: true,
+        fileData: this.getFileData(),
       }
     },
+    computed: {
+    },
     methods: {
-
+      getFileData(){
+        return null;
+        // return this.value instanceof FileData ? this.value : FileData.fromRawSync(this.value, {});
+      },
+      updateFileData(){
+        if(this.value instanceof FileData){
+          this.fileData = this.value;
+          return;
+        }
+        FileData.fromRaw(this.value, {}).then(fileData => {
+          this.fileData = fileData;
+        });
+        this.fileData = FileData.fromRawSync(this.value, {});
+      },
       createThumbnail(fileData, video){
         var canvas = document.createElement('canvas');
         utils.createVideoThumbnail(video, canvas, this.fileData.thumbnailSize).then((thumbnail) => {
@@ -165,7 +182,14 @@
         this.editInputBlured();
         return true;
       },
-
+    },
+    created(){
+      this.updateFileData();
+    },
+    watch: {
+      value(){
+        this.updateFileData();
+      }
     },
   }
 </script>

src/demo/demo-icons.vue

@@ -0,0 +1,31 @@
+<template>
+<!-- {% raw %} -->
+<div class="bg-light">
+  <span :key="ext" v-for="(color, ext) in icons" style="width: 42px; height: 42px; display: inline-block;" :style="{color: color}">
+    <VueFileIcon :ext="ext" style="width: 100%; height: 100%; fill: currentColor;"></VueFileIcon>
+  </span>
+</div>
+<!-- {% endraw %} -->
+</template>
+
+<script>
+
+export default {
+  data: function(){
+    return {
+      icons: {
+        pdf: 'red',
+        doc: 'blue',
+        ods: 'green',
+        zip: 'orange',
+        db: 'brown',
+      }
+    };
+  },
+  methods: {
+  },
+  mounted: function(){
+  }
+}
+
+</script>

src/demo/demo-previews.vue

@@ -0,0 +1,50 @@
+<template>
+<!-- {% raw %} -->
+<div class="theme-default">
+  <div class="vue-file-agent grid-block-wrapper" style="padding: 0;">
+    <template v-for="(fileData, i) in filesData">
+      <VueFilePreview :key="i" :value="fileData" class="file-preview-wrapper grid-box-item grid-block"></VueFilePreview>
+    </template>
+  </div>
+</div>
+<!-- {% endraw %} -->
+</template>
+
+<script>
+
+export default {
+  data: function(){
+    return {
+      filesData: this.getFilesDataInitial(),
+    };
+  },
+  methods: {
+    getFilesDataInitial: function(){
+      var filesBaseUrl = window.location.host == 'localhost:4000' ? '/vue-file-agent/website/assets/files/' : 'https://safrazik.github.io/vue-file-agent/website/assets/files/';
+
+      var videoData = {"name":"Cat Licking Its Paw.mp4","lastModified":1565241222998,"sizeText":"433 KB","size":443767,"type":"video/mp4","ext":"mp4", "dimensions": {"width": 640, "height": 360}};
+      videoData.videoThumbnail = filesBaseUrl + '/Cat Licking Its Paw-thumb.png';
+      videoData.imageColor = [66, 62, 45];
+
+      var filesData = [];
+      [
+        {"name":"sample.pdf","lastModified":1565232623243,"sizeText":"3 KB","size":3028,"type":"application/pdf","ext":"pdf"},
+        {"name":"DSC_0261.jpg","lastModified":1564648335292,"sizeText":"64 KB","size":65762,"type":"image/jpeg","ext":"jpg"},
+        {"name":"Important sheet.ods","lastModified":1564392646095,"sizeText":"31 KB","size":31276,"type":"","ext":"ods"},
+        videoData,
+        {"name":"Collection of something.zip","lastModified":1564392646087,"sizeText":"2 MB","size":1640378,"type":"application/x-zip-compressed","ext":"zip"},
+        {"name":"Document 3.doc","lastModified":1564392646097,"sizeText":"109 KB","size":111303,"type":"","ext":"doc"},
+      ].forEach(function(fd){
+        fd.url = filesBaseUrl + fd.name;
+        // fd.progress = 10;
+        filesData.push(fd);
+      });
+
+      return filesData;
+    },
+  },
+  mounted: function(){
+  }
+}
+
+</script>

src/lib/file-data.js

@@ -43,7 +43,7 @@ class FileData {
       d.setTime(file.lastModified);
     }
     file.lastModifiedDate = d;
-    file.name = data.name;
+    file.name = typeof data.name == 'function' ? data.name() : data.name;
     file.size = data.size;
     file.type = data.type;
     return file;
@@ -151,8 +151,8 @@ class FileData {
   }
 
   setUrl(url){
+    this.url = url;
     return new Promise((resolve, reject)=> {
-      this.url = url;
       if(this.isImage()){
         this.resizeImage().then(()=> { 
           resolve(this);
@@ -245,15 +245,26 @@ class FileData {
     }
   }
 
-  static fromRaw(fileDataRaw, options){
+  static getFromRaw(fileDataRaw, options, isSync = false){
       var fileData = new FileData(fileDataRaw, options);
       var promise = fileData.setUrl(fileDataRaw.url);
       fileDataRaw.progress = fileData.progress.bind(fileData); // convert it as a function
       fileDataRaw.src = fileData.src.bind(fileData);
       fileDataRaw.name = fileData.name.bind(fileData); // convert it as a function
+      if(isSync){
+        return fileData;
+      }
       return promise;
   }
 
+  static fromRaw(fileDataRaw, options){
+    return FileData.getFromRaw(fileDataRaw, options, false);
+  }
+
+  static fromRawSync(fileDataRaw, options){
+    return FileData.getFromRaw(fileDataRaw, options, true);
+  }
+
   static fromRawArray(filesDataRaw, options){
     var promises = [];
     filesDataRaw.forEach((fileDataRaw)=> {