make picture map

resources/js/views/Addjob.vue

@@ -12,7 +12,10 @@
                                 <input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile">
                                 <v-tooltip right>
                                     <template v-slot:activator="{ on }">
+                                        <v-layout column align-center>
                                             <img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="200">
+                                            <v-btn color="error" v-if="srcImage !== 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'" @click="srcImage = 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'">ลบรูปภาพ</v-btn>
+                                        </v-layout>
                                     </template>
                                     <span>{{ status }}</span>
                                 </v-tooltip>
@@ -131,7 +134,10 @@
                                     <label>รูปภาพแผนที่</label>
                                 </v-flex>                           
                                 <v-flex sm12 xs12>
-                                    <v-btn color="deep-orange darken-4" class="px-2" small outline><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
+                                    <input type="file" accept="image/*" class="input-file" ref="inputFileMap" @change="selectFileMap">
+                                    <v-btn color="deep-orange darken-4" class="px-2" small outline @click="$refs.inputFileMap.click()"><v-icon>file_copy</v-icon>&nbsp;เลือกไฟล์</v-btn>
+                                    <v-btn color="error" v-if="srcImageMap" @click="srcImageMap = null">ลบรูปภาพ</v-btn>
+                                    <img :src="srcImageMap" alt="">
                                 </v-flex>                            
                                 <v-flex sm12 xs12>
                                     <v-text-field
@@ -363,6 +369,7 @@ export default {
         return {
             status: 'ยังไม่ได้เลือกไฟล์',
             srcImage: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png',
+            srcImageMap: null,
             rules: {
                 required: v => !!v || 'จำเป็นต้องกรอก',
                 email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
@@ -477,6 +484,17 @@ export default {
                 this.srcImage = e.target.result
             }
         },
+        selectFileMap (e) {
+            const file = e.target.files
+            if (!file.length) {
+                return
+            }
+            const fileReader = new FileReader()
+            fileReader.readAsDataURL(file[0])
+            fileReader.onload = e => {
+                this.srcImageMap = e.target.result
+            }
+        },
         createJob () {
             if (this.amphoes.findIndex(x => x.amphoe_code === this.amphoe.amphoe_code) === -1) {this.amphoe = ''}
             if (this.tumbons.findIndex(x => x.tumbon_code === this.tumbon.tumbon_code) === -1) {this.tumbon = ''}