Implement preview for image upload

src/components/ImageUpload.vue

@@ -9,7 +9,7 @@
       @dragover.prevent="$event.currentTarget.classList.add('bg-gray-200')"
       @dragleave.prevent="$event.currentTarget.classList.remove('bg-gray-200')"
     >
-      <div class="relative h-full flex justify-center items-center">
+      <div class="relative h-full">
         <input
           type="file"
           ref="imageInput"
@@ -19,25 +19,38 @@
           multiple
           class="h-full w-full opacity-0 absolute z-10 cursor-pointer"
         />
-        <span class="font-semibold opacity-25 relative">
+        <div
+          v-show="!imageList.length"
+          class="
+            h-full
+            font-semibold
+            opacity-25
+            flex
+            justify-center
+            items-center
+          "
+        >
           Drag and drop images here or click here to browse.
-        </span>
+        </div>
+        <div
+          v-show="imageList.length"
+          class="h-full flex flex-row flex-wrap content-start overflow-y-auto"
+        >
+          <img
+            v-for="(preview, index) in previews"
+            :key="index"
+            :src="preview.url"
+            @click="removeImage(preview.image)"
+            alt=""
+            class="max-h-28 relative z-10"
+          />
+        </div>
       </div>
     </div>
     <div class="flex flex-col items-center m-4">
       <WarningBox v-if="invalidType" @click="invalidType = false">
         Please upload PNG, JPEG or GIF image only.
       </WarningBox>
-      <ul v-if="imageList.length">
-        <li
-          v-for="(image, index) in imageList"
-          :key="index"
-          @click="removeImage(imageList.indexOf(image))"
-          class="text-gray-600 hover:text-gray-700 font-semibold cursor-pointer"
-        >
-          {{ image.name }}
-        </li>
-      </ul>
       <button
         v-show="imageList.length"
         @click="submitImage"
@@ -69,16 +82,24 @@ export default {
   data: () => {
     return {
       imageList: [],
-      urls: [],
       invalidType: false,
     };
   },
   computed: {
+    previews: function () {
+      let tempArray = [];
+      this.imageList.forEach((image) =>
+        tempArray.push({ url: URL.createObjectURL(image), image })
+      );
+      return tempArray;
+    },
     ...mapState(["stateUser"]),
   },
   methods: {
     updateWrapper(event) {
-      this.checkImageType(event) ? this.updateImageList(event) : false;
+      this.checkImageType(event)
+        ? this.updateImageList(event)
+        : (this.$refs.imageInput.value = "");
     },
     updateImageList(event) {
       this.imageList = this.imageList.concat(
@@ -99,8 +120,8 @@ export default {
       this.invalidType = false;
       return true;
     },
-    removeImage(index) {
-      this.imageList.splice(index, 1);
+    removeImage(image) {
+      this.imageList.splice(this.imageList.indexOf(image), 1);
     },
     submitImage() {
       let formData = new FormData();
@@ -121,7 +142,7 @@ export default {
           },
           body: fd,
         };
-        const response = await fetch("../api/image", options);
+        const response = await fetch("/api/image", options);
         const data = await response.json();
         this.addStateHashArray(data.hash);
       } catch {
@@ -132,9 +153,3 @@ export default {
   },
 };
 </script>
\ No newline at end of file
-
-<style scoped>
-[v-cloak] {
-  display: none;
-}
-</style>
\ No newline at end of file