Add and fix nominee profile photo uploads

- Run artisan migrate to add column photo in nominee table
- npm run development/watch

resources/assets/js/components/demo/admin/nominee/add.vue

@@ -46,9 +46,12 @@
 						</select>
 					</div>
 
+                    <div id="imagePreview">
+                        <img :src="imageUrl" v-if="imageUrl" alt="Preview">
+                    </div>
 					<div>
 						<label for="image">Masukkan Gambar</label>
-						<input type="file" accept="image/*" @change="uploadImage($event)" id="file-input">
+						<input name="photo" type="file" accept="image/*" id="file-input" @change="handleImageChange">
 					</div>
 
 
@@ -70,6 +73,7 @@
 export default {
 	data: function () {
 		return {
+            imageUrl: '',
 			loading: false
 		}
 	},
@@ -88,6 +92,8 @@ export default {
 						vm.$router.push({ name: 'Maklumat Calon' });
 				},
 				error: function (error) {
+                    alert('Nominee with the same name has already registered');
+                    location.reload();
 					$.notifyClose();
 					vm.loading = false;
 					vm.util.showResult(error, 'error', 'ajax');
@@ -98,30 +104,27 @@ export default {
 			})
 		},
 
-		uploadImage(event) {
+        handleImageChange(event) {
+            const file = event.target.files[0]; // Get the selected file
+            const imageType = /image.*/; // RegExp to check if the file is an image
 
-			const URL = 'http://foobar.com/upload';
+            // Check if the selected file is an image
+            if (file && file.type.match(imageType)) {
+                const reader = new FileReader(); // Create a FileReader object
 
-			let data = new FormData();
-			data.append('name', 'my-picture');
-			data.append('file', event.target.files[0]);
+                reader.onload = (e) => {
+                    this.imageUrl = e.target.result; // Set the imageUrl to the data URL of the image
+                    document.getElementById('imagePreview').style.display = 'block'; // Display the div
+                };
 
-			let config = {
-				header: {
-					'Content-Type': 'image/png'
-				}
-			}
-
-			axios.put(
-				URL,
-				data,
-				config
-			).then(
-				response => {
-					console.log('image upload response > ', response)
-				}
-			)
-		}
+                reader.readAsDataURL(file); // Read the image data as a data URL
+            } else {
+                // Clear the file input and hide the div if the selected file is not an image
+                event.target.value = '';
+                this.imageUrl = '';
+                document.getElementById('imagePreview').style.display = 'none';
+            }
+        }
 	},
 
 	computed: {
@@ -136,4 +139,19 @@ export default {
 		}
 	}
 }
-</script>
+</script>
+
+<style scoped>
+    #imagePreview {
+        width: 200px;
+        height: 200px;
+        border: 1px solid #ccc;
+        margin-bottom: 10px;
+        display: none; /* Initially hide the div */
+    }
+
+    #imagePreview img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+</style>