update style upload / connect api

src/views/UploadImage.vue

@@ -1,25 +1,100 @@
 <template>
-  <div>
-    <input
+  <div
+    style="background: #b2c573"
+    class="mt-5 d-flex justify-center parent-container py-10"
+  >
+    <!-- <input
       type="file"
       @change="onFileChanged($event)"
       accept="image/*"
       capture
     />
-    <button @click="uploadImage()">Upload</button>
+    <button @click="uploadImage()">Upload</button> -->
+    <v-row align="center" justify="center">
+      <v-col cols="12" md="8">
+        <v-card color="#4C884C" class="pa-5 text-center h-100" elevated>
+          <div class="text-sub text-left">
+            <v-icon icon="mdi-plus-box-multiple"></v-icon>
+            เพิ่มรูปภาพ
+          </div>
+          <!-- {{url}} -->
+          <v-avatar size="200" color="grey" class="elevation-3">
+            <v-img :src="url" v-if="url"></v-img>
+            <v-icon dark v-else size="80"> mdi-account </v-icon>
+          </v-avatar>
+
+          <v-file-input
+            label="แนบรูปภาพ"
+            accept="image/png, image/jpeg, image/bmp"
+            placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
+            prepend-inner-icon="mdi-camera"
+            prepend-icon=""
+            variant="solo-filled"
+            class="mt-5"
+            v-model="image"
+            @change="onFileChanged($event)"
+          ></v-file-input>
+          <v-btn
+            color="#DD6C31"
+            class="mt-4"
+            height="40"
+            @click="uploadImage()"
+            :disabled="image == null"
+          >
+            <span class="text-sub2">upload</span>
+          </v-btn>
+        </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 <script>
 import { client } from "@/utils/trpc";
 import { createFormData } from "@/utils/fileUpload";
 export default {
+  watch: {
+    image(val) {
+      console.log(val);
+      if (val == undefined) {
+        this.url = null;
+        this.image = null;
+      }
+    },
+  },
   data: () => ({
     file: null,
+    url: null,
+    image: null,
   }),
   methods: {
+    Preview_image() {
+      // console.log('this.image', this.image)
+      if (this.image && this.image !== null) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          console.log(event.target.result);
+          this.url = event.target.result;
+        };
+        reader.readAsDataURL(this.image);
+        console.log();
+      } else {
+        this.url = null;
+      }
+    },
     onFileChanged(event) {
       const file = event.target.files[0];
       this.file = file;
+      if (this.file && this.file !== null) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          console.log(event.target.result);
+          this.url = event.target.result;
+        };
+        reader.readAsDataURL(this.file);
+        console.log();
+      } else {
+        this.url = null;
+      }
     },
 
     async uploadImage() {