Began file input

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

@@ -1,43 +1,47 @@
 <template>
-  <div>
-    <v-text-field
+  <outlined-input
+    :name="label"
+    class="mb-6 pt-1"
+  >
+    <v-file-input
+      v-cloak
       ref="input"
       v-bind="$attrs"
-      class="dc-text-field"
+      v-model="file"
+      class="dc-file-field"
       :loading="loading"
       :error-messages="errors"
-      :value="safeValue"
       :disabled="isDisabled"
       :outlined="!regular"
-      @input="input"
+      @drop.prevent="addDropFile"
+      @dragover.prevent
       @focus="focused = true"
       @blur="focused = false"
       @keyup="e => $emit('keyup', e)"
-    >
-      <template #append>
-        <slot name="value" />
-      </template>
-      <template #prepend>
-        <slot name="prepend" />
-      </template>
-      <template #append-inner>
-        <input
-          type="file"
-          @change="handleFileChange"
-          @dragover="handleDragOver"
-          @drop="handleDrop"
-        >
-      </template>
-    </v-text-field>
-    <input
-      v-model="url"
-      type="text"
-      @change="handleUrlChange"
-    >
-  </div>
+    />
+  </outlined-input>
 </template>
 
 <script lang="js">
+/*
+  States to handle:
+  - Empty
+  - Image from URL
+  - Image from file
+  - Image from file being uploaded
+  - Upload fail
+  - File invalid as image (size, extension)
+  Actions to handle
+  - Changing an image
+    - Do we delete the old one, or leave it in the user's account?
+  - Select image from user's files
+  - URL image
+
+  TODO
+  Clicking opens image input dialog
+  Drag-drop opens image input dialog with a file ready to upload
+*/
+import UserImages from '/imports/api/files/userImages/UserImages';
 import SmartInput from '/imports/client/ui/components/global/SmartInputMixin';
 
 export default {
@@ -47,6 +51,54 @@ export default {
       url: '',
     };
   },
+  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: {
     handleUrlChange() {
       this.$emit('change', this.url);
@@ -56,10 +108,10 @@ export default {
       this.uploadFile(file);
     },
     handleDragOver(event) {
-      event.preventDefault();
+      // TODO
     },
     handleDrop(event) {
-      event.preventDefault();
+      // TODO
       const file = event.dataTransfer.files[0];
       this.uploadFile(file);
     },

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

@@ -0,0 +1,65 @@
+<template lang="html">
+  <dialog-base
+    v-if="model"
+    :color="model.color"
+  >
+    <template slot="toolbar">
+      <v-tabs
+        v-model="tab"
+        grow
+      >
+        <v-tab>User Files</v-tab>
+        <v-tab>From URL</v-tab>
+      </v-tabs>
+    </template>
+    <div>
+      <v-tabs-items v-model="tab">
+        <v-tab-item>
+          <user-images-list v-model="url" />
+        </v-tab-item>
+        <v-tab-item>
+          <v-card>
+            <v-card-text>
+              <v-text-field
+                v-model="url"
+                label="URL"
+              />
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+      </v-tabs-items>
+    </div>
+    <v-spacer slot="actions" />
+    <v-btn
+      slot="actions"
+      text
+      @click="$store.dispatch('popDialogStack')"
+    >
+      Done
+    </v-btn>
+  </dialog-base>
+</template>
+
+<script lang="js">
+import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
+
+export default {
+  components: {
+    DialogBase,
+  },
+  props: {
+  },
+  data() {
+    return {
+      tab: 0,
+      file: undefined,
+      progress: 0,
+      url: '',
+    };
+  },
+};
+</script>
+
+<style lang="css" scoped>
+
+</style>

app/imports/client/ui/files/UserImageList.vue

@@ -0,0 +1,95 @@
+<template>
+  <v-row
+    dense 
+    @drop.prevent="addDropFile"
+    @dragover.prevent="imageDragOver"
+  >
+    <v-col cols="12">
+      <v-subheader> Images </v-subheader>
+    </v-col>
+    <template v-if="userImages && userImages.length">
+      <v-col
+        v-for="userImage in userImages"
+        :key="userImage._id"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="3"
+        xl="2"
+      >
+        <user-image-card :model="userImage" />
+      </v-col>
+    </template>
+    <v-col
+      key="upload"
+      cols="12"
+      sm="6"
+      md="4"
+      lg="3"
+      xl="2"
+      class="layout column justify-center"
+    >
+      <input
+        ref="uploadImageInput"
+        type="file"
+        accept=".json"
+        style="display: none;"
+        @input="uploadImageFile"
+      >
+      <v-btn
+        outlined
+        style="height: 100%; width: 100%; min-height: 120px;"
+        class="archive-button"
+        :color="uploadImageError ? 'error' : undefined"
+        :disabled="uploadImageInProgress"
+        @click="$refs.uploadImageInput.click()"
+      >
+        <v-icon left>
+          mdi-file-upload-outline
+        </v-icon>
+        <template v-if="uploadImageError">
+          {{ uploadImageError }}
+        </template>
+        <template v-else>
+          Upload archive
+        </template>
+        <v-progress-linear
+          v-if="uploadImageInProgress"
+          :value="imageUploadProgress"
+          :indeterminate="imageUploadIndeterminate"
+        />
+      </v-btn>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="js">
+import prettyBytes from 'pretty-bytes';
+import UserImages from '/imports/api/files/userImages/UserImages';
+import UserImageCard from '/imports/client/ui/files/UserImageCard.vue';
+
+export default {
+  components: {
+    UserImageCard,
+  },
+  meteor: {
+    $subscribe: {
+      'userImages': [],
+    },
+    userImages() {
+      const userId = Meteor.userId();
+      return UserImages.find({
+        userId
+      }, {
+        sort: {
+          size: -1
+        },
+      }).map(f => {
+        f.size = prettyBytes(f.size);
+        f.link = UserImages.link(f);
+        return f;
+      });
+    }
+  }
+}
+</script>

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

@@ -131,7 +131,6 @@ export default {
     $subscribe: {
       'archiveCreatureFiles': [],
       'characterList': [],
-      'userImages': [],
     },
     archiveFiles() {
       const userId = Meteor.userId();
@@ -147,20 +146,6 @@ export default {
         return f;
       });
     },
-    userImages() {
-      const userId = Meteor.userId();
-      return UserImages.find({
-        userId
-      }, {
-        sort: {
-          size: -1
-        },
-      }).map(f => {
-        f.size = prettyBytes(f.size);
-        f.link = UserImages.link(f);
-        return f;
-      });
-    }
   },
   watch: {
     archiveUploadInProgress(val){