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/edit.vue

@@ -10,12 +10,8 @@
 			@submit.prevent="edit()">
 			<input type="hidden" name="_method" value="PUT"/>
 
-			<div class="col-md-4">
-				<uploader file-name="image" :image-src="data.storageURL+nominee.image"/>
-			</div>
-
 			<div class="col-md-8">
-				
+
 				<div class="form-group">
 					<label for="name">Nama</label>
 					<input type="text" name="name" class="form-control" :value="nominee.name" required/>
@@ -23,12 +19,12 @@
 
 				<div class="form-group">
 					<label for="student_id">No. Anggota</label>
-					<input type="text" name="student_id" class="form-control" :value="nominee.student_id" required/>
+					<input type="text" name="no_anggota" class="form-control" :value="nominee.no_anggota" required/>
 				</div>
 
 				<div class="form-group">
 					<label for="Unit">Unit</label>
-					<input type="text" name="unit" class="form-control" :value="nominee.Unit" required/>
+					<input type="text" name="unit" class="form-control" :value="nominee.unit" required/>
 				</div>
 
 				<div class="form-group">
@@ -57,10 +53,18 @@
 					</select>
 				</div>
 
+                <div id="imagePreview">
+                    <img :src="imageUrl" v-if="imageUrl" alt="Preview">
+                </div>
+                <div>
+                    <label for="image">Masukkan Gambar</label>
+                    <input name="photo" type="file" accept="image/*" id="file-input" @change="handleImageChange">
+                </div>
+
 				<div class="form-group pull-right">
 					<input type="submit" value="Submit" class="btn btn-info">
-					<router-link 
-						:to="{name:'Maklumat Calon'}" 
+					<router-link
+						:to="{name:'Maklumat Calon'}"
 						class="btn btn-default">
 						Back
 					</router-link>
@@ -75,6 +79,7 @@
 export default{
 	data: function () {
 		return {
+            imageUrl: '',
 			loading: false
 		}
 	},
@@ -84,7 +89,38 @@ export default{
 			this.$router.push({name:'Maklumat Calon'});
 	},
 
+    mounted: function () {
+        if(this.nominee.id) {
+            this.imageUrl = this.createBase64ImageUrl(this.nominee.photo);
+            document.getElementById('imagePreview').style.display = 'block';
+        }
+    },
+
 	methods: {
+        createBase64ImageUrl: function(base64ImageData) {
+            return "data:image/png;base64," + base64ImageData;
+        },
+        handleImageChange(event) {
+            const file = event.target.files[0]; // Get the selected file
+            const imageType = /image.*/; // RegExp to check if the file is an image
+
+            // Check if the selected file is an image
+            if (file && file.type.match(imageType)) {
+                const reader = new FileReader(); // Create a FileReader object
+
+                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
+                };
+
+                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';
+            }
+        },
 		edit: function () {
 			if (this.loading) return;
 			var vm = this;
@@ -94,7 +130,7 @@ export default{
 				success: function (response) {
 					$.notifyClose();
 					vm.loading = false;
-					if (vm.util.showResult(response, 'success', 'ajax')) 
+					if (vm.util.showResult(response, 'success', 'ajax'))
 						vm.$router.push({name: 'Maklumat Calon'});
 				},
 				error: function (error) {
@@ -122,4 +158,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>