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);
     },