Upload image button working

app/imports/client/ui/components/ImageUploadInput.vue

@@ -1,14 +1,34 @@
 <template>
-  <div class="file-upload-input">
+  <v-btn
-    <v-file-input
+    outlined
-      v-model="file"
+    class="image-upload-button ma-1"
-      v-bind="$attrs"
+    v-bind="$attrs"
-      accept="image/*"
+    :color="fileUploadError ? 'error' : undefined"
-    />
+    :disabled="fileUploadInProgress"
+    @click="$refs.hiddenFileInput.click()"
+  >
+    <v-icon left>
+      mdi-file-upload-outline
+    </v-icon>
+    <template v-if="fileUploadError">
+      {{ fileUploadError }}
+    </template>
+    <template v-else>
+      Upload Image
+    </template>
     <v-progress-linear
-      :progress="progress"
+      v-if="fileUploadInProgress"
+      :value="fileUploadProgress"
+      :indeterminate="fileUploadIndeterminate"
     />
-  </div>
+    <input
+      ref="hiddenFileInput"
+      type="file"
+      accept="image/*"
+      style="display: none;"
+      @input="inputChange"
+    >
+  </v-btn>
 </template>
 
 <script lang="js">
@@ -25,48 +45,60 @@ export default {
       if (!file) return;
       let self = this;
       let uploadInstance = UserImages.insert({
-          file: file,
+        file: file,
-          /*meta: {
+        chunkSize: 'dynamic',
-            userId: Meteor.userId() // Optional, used to check on server for file tampering
+        allowWebWorkers: true
-          },*/
+      }, false)
-          chunkSize: 'dynamic',
-          allowWebWorkers: true // If you see issues with uploads, change this to false
-        }, false)
 
-        // These are the event functions, don't need most of them, it shows where we are in the process
+      uploadInstance.on('start', function () {
-        uploadInstance.on('start', function () {
+        console.log('Starting');
-          console.log('Starting');
+        this.uploadingInProgress = true;
-          this.uploadingInProgress = true;
+      });
-        });
 
-        uploadInstance.on('end', function (error, fileObj) {
+      uploadInstance.on('end', function (error, fileObj) {
-          console.log('On end File Object: ', fileObj);
+        console.log('On end File Object: ', fileObj);
-          this.uploadingInProgress = false;
+        this.uploadingInProgress = false;
-        });
+        self.$emit('uploaded', UserImages.link(fileObj));
+      });
 
-        uploadInstance.on('uploaded', function (error, fileObj) {
+      uploadInstance.on('uploaded', function (error, fileObj) {
-          console.log('uploaded: ', fileObj);
+        console.log('uploaded: ', fileObj);
 
-          // Remove the file from the input box
+        // Remove the file from the input box
-          self.file = undefined;
+        self.file = undefined;
 
-          // Reset our state for the next file
+        // Reset our state for the next file
-          self.uploadingInProgress = false;
+        self.uploadingInProgress = false;
-          self.progress = 0;
+        self.progress = 0;
-        });
+      });
 
-        uploadInstance.on('error', function (error, fileObj) {
+      uploadInstance.on('error', function (error, fileObj) {
-          console.log('Error during upload: ' + error, fileObj)
+        // Remove the file from the input box
-        });
+        self.file = undefined;
 
-        uploadInstance.on('progress', function (progress, fileObj) {
+        // Reset our state for the next file
-          console.log('Upload Percentage: ' + progress, fileObj)
+        self.uploadingInProgress = false;
-          // Update our progress bar
+        self.progress = 0;
-          self.progress = progress;
+        console.log('Error during upload: ' + error, fileObj)
-        });
+      });
 
-        uploadInstance.start(); // Must manually start the upload
+      uploadInstance.on('progress', function (progress, fileObj) {
-      }
+        console.log('Upload Percentage: ' + progress, fileObj)
+        // Update our progress bar
+        self.progress = progress;
+      });
+
+      uploadInstance.start(); // Must manually start the upload
+    },
+  },
+  methods: {
+    inputChange(e) {
+      if (!e.target) return;
+      const { files: selectedFiles } = e.target;
+      if (!selectedFiles) return;
+      this.file = selectedFiles[0];
+      return;
+    }
   },
 
 }

app/imports/client/ui/components/global/SmartImageInput.vue

@@ -45,7 +45,7 @@
 
 <script lang="js">
 /*
-<v-file-input
+  <v-file-input
       v-cloak
       ref="input"
       v-bind="$attrs"
@@ -114,54 +114,6 @@ export default {
       }
     },
   },
-  watch: {
-    file(file){
-      if (!file) return;
-      let self = this;
-      let uploadInstance = UserImages.insert({
-          file: file,
-          /*meta: {
-            userId: Meteor.userId() // Optional, used to check on server for file tampering
-          },*/
-          chunkSize: 'dynamic',
-          allowWebWorkers: true // If you see issues with uploads, change this to false
-        }, false)
-
-        // These are the event functions, don't need most of them, it shows where we are in the process
-        uploadInstance.on('start', function () {
-          console.log('Starting');
-          this.uploadingInProgress = true;
-        });
-
-        uploadInstance.on('end', function (error, fileObj) {
-          console.log('On end File Object: ', fileObj);
-          this.uploadingInProgress = false;
-        });
-
-        uploadInstance.on('uploaded', function (error, fileObj) {
-          console.log('uploaded: ', fileObj);
-
-          // Remove the file from the input box
-          self.file = undefined;
-
-          // Reset our state for the next file
-          self.uploadingInProgress = false;
-          self.progress = 0;
-        });
-
-        uploadInstance.on('error', function (error, fileObj) {
-          console.log('Error during upload: ' + error, fileObj)
-        });
-
-        uploadInstance.on('progress', function (progress, fileObj) {
-          console.log('Upload Percentage: ' + progress, fileObj)
-          // Update our progress bar
-          self.progress = progress;
-        });
-
-        uploadInstance.start(); // Must manually start the upload
-      }
-  },
   methods: {
     openImageInputDialog() {
       this.$store.commit('pushDialogStack', {

app/imports/client/ui/files/userImages/ImageInputDialog.vue

@@ -25,43 +25,25 @@
           <v-img
             v-for="file in userImages"
             :key="file._id"
-            :data-id="`image-${file._id}`"
+            :data-id="file._id"
             class="user-image ma-1 v-sheet"
-            :class="{'elevation-4': file.href === href}"
+            :class="{'elevation-4': file.link === href}"
             height="250"
-            :src="file.href"
+            :src="file.link"
-            @click="selectUserImage(file.href)"
+            @click="selectUserImage(file.link)"
           >
             <v-btn
               class="zoom-button"
               icon
-              @click.stop="previewImage(file._id, file.href)"
+              @click.stop="previewImage(file)"
             >
               <v-icon>mdi-magnify-plus</v-icon>
             </v-btn>
           </v-img>
-          <v-btn
+          <image-upload-input
-            outlined
+            style="height: 250px;"
-            class="upload-image-button ma-1"
+            @uploaded="link => selectUserImage(link)"
-            :color="fileUploadError ? 'error' : undefined"
+          />
-            :disabled="fileUploadInProgress"
-            @click="$refs.archiveFileInput.click()"
-          >
-            <v-icon left>
-              mdi-file-upload-outline
-            </v-icon>
-            <template v-if="fileUploadError">
-              {{ fileUploadError }}
-            </template>
-            <template v-else>
-              Upload Image
-            </template>
-            <v-progress-linear
-              v-if="fileUploadInProgress"
-              :value="fileUploadProgress"
-              :indeterminate="fileUploadIndeterminate"
-            />
-          </v-btn>
           <div style="height: 0;" />
           <div style="height: 0;" />
           <div style="height: 0;" />
@@ -108,11 +90,15 @@
 </template>
 
 <script lang="js">
+import UserImages from '/imports/api/files/userImages/UserImages';
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+import ImageUploadInput from '/imports/client/ui/components/ImageUploadInput.vue';
+import prettyBytes from 'pretty-bytes';
 
 export default {
   components: {
     DialogBase,
+    ImageUploadInput,
   },
   props: {
     href: {
@@ -129,33 +115,27 @@ export default {
   },
   meteor: {
     userImages() {
-      // return UserImages.find({});
+      const userId = Meteor.userId();
-      return [
+      return UserImages.find(
         {
-          _id: '1',
+          userId,
-          name: 'Example image 1',
+        }, {
-          href: 'https://picsum.photos/1000/1000',
+          sort: {'size': -1},
-        },
+        }
-        {
+      ).map(f => {
-          _id: '2',
+        f.size = prettyBytes(f.size);
-          name: 'Example image 2',
+        f.link = UserImages.link(f);
-          href: 'https://picsum.photos/500/600',
+        return f;
-        },
+      });
-        {
-          _id: '3',
-          name: 'Example image 3',
-          href: 'https://picsum.photos/850/700',
-        },
-      ]
     },
   },
   methods: {
-    previewImage(id, href) {
+    previewImage(file) {
       this.$store.commit('pushDialogStack', {
         component: 'image-preview-dialog',
-        elementId: `image-${id}`,
+        elementId: file._id,
         data: {
-          href: href,
+          href: file.link,
         },
       });
     },

app/imports/client/ui/pages/Files.vue

@@ -145,6 +145,7 @@ export default {
   meteor: {
     $subscribe: {
       'archiveCreatureFiles': [],
+      'userImages': [],
       'characterList': [],
     },
     archiveFiles() {