browser image parsing to base64/dataURL complete; further work on new product, added animate.css just for testing

1 files changed, 60 insertions, 20 deletions

diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
index 8ea23b1..eb4958d 100644
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ b/iridescence/src/components/admin/ProductEditCard.vue
@@ -5,16 +5,13 @@
         <p class="card-header-title" v-if="currentProduct.id > 0">
           {{ currentProduct.id }}: {{ currentProduct.name }}
         </p>
-        <p class="card-header-title" v-else>
-          Add New Product
-        </p>
       </div>
       <div class="card-content">
         <div class="field">
           <input
             class="input"
             type="text"
-            placeholder="product name"
+            placeholder="(product name)"
             v-model="newProduct.name"
           />
         </div>
@@ -33,12 +30,15 @@
             />
           </p>
           <div class="control">
-            <a class="button is-info" @click="incrementQuantity(-1)">
+            <a
+              class="button is-info is-outlined"
+              @click="incrementQuantity(-1)"
+            >
               ▼
             </a>
           </div>
           <div class="control">
-            <a class="button is-info" @click="incrementQuantity(1)">
+            <a class="button is-info is-outlined" @click="incrementQuantity(1)">
               ▲
             </a>
           </div>
@@ -59,12 +59,25 @@
           </p>
         </div>
         <div class="field">
-          <input
-            class="input"
-            type="text"
-            placeholder="image"
-            v-model="newProduct.imgPath"
-          />
+          <div class="file has-name is-boxed is-fullwidth">
+            <label class="file-label">
+              <input
+                class="file-input"
+                type="file"
+                name="image"
+                accept=".jpg,.jpeg,.JPG,.JPEG"
+                @change="previewFiles"
+              />
+              <span class="file-cta">
+                <span class="file-label has-text-centered">
+                  ↑ Choose a picture…
+                </span>
+              </span>
+              <span class="file-name">
+                {{ newProduct.imgPath }}
+              </span>
+            </label>
+          </div>
         </div>
         <div class="field">
           <label class="checkbox">
@@ -76,18 +89,22 @@
           <textarea
             class="textarea"
             type="text"
-            placeholder="description"
+            placeholder="(product description)"
             v-model="newProduct.description"
           >
           </textarea>
         </div>
+        <progress
+          class="progress is-primary"
+          v-bind:value="fileProgress"
+          max="100"
+          v-if="fileProgress < 100"
+          >{{ fileProgress }}%</progress
+        >
       </div>
-      <div class="card-footer" v-if="isDifferent && isValid">
-        <div class="card-footer-item">
-          <button
-            class="button is-link is-outlined is-fullwidth"
-            @click="saveProduct"
-          >
+      <div class="card-footer">
+        <div class="card-footer-item" v-if="isDifferent && isValid">
+          <button class="button is-primary is-fullwidth" @click="saveProduct">
             Save
           </button>
         </div>
@@ -112,7 +129,8 @@ export default {
         description: this.currentProduct.description,
         featured: this.currentProduct.featured,
         categories: this.currentProduct.categories.slice(0)
-      }
+      },
+      fileProgress: 100
     };
   },
   props: {
@@ -190,6 +208,28 @@ export default {
       if (this.newProduct.quantity + amount >= 0) {
         this.newProduct.quantity += amount;
       }
+    },
+    previewFiles(event) {
+      let file = event.target.files[0];
+      if (!file) {
+        return;
+      }
+
+      let reader = new FileReader();
+
+      reader.onprogress = e => {
+        if (e && e.lengthComputable) {
+          this.fileProgress = parseInt((e.loaded / e.total) * 100, 10);
+        }
+      };
+
+      reader.onloadend = e => {
+        console.log(e.target.result);
+        this.fileProgress = 100;
+        this.newProduct.imgPath = file.name;
+      };
+
+      reader.readAsDataURL(file);
     }
   }
 };