E-Vote/resources/assets/js/components/demo/admin/nominee/edit.vue

<template>
<div class="panel panel-default">
	<div class="panel-body">
		<form 
			method="POST"
			class="row"
			id="edit_form"
			:action="data.API+'nominee/'+id"
			enctype="multipart/form-data"
			@submit.prevent="edit()">
			<input type="hidden" name="_method" value="PUT"/>

			<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/>
				</div>

				<div class="form-group">
					<label for="student_id">No. Anggota</label>
					<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/>
				</div>

				<div class="form-group">
					<label for="umur">Umur</label>
					<input type="text" name="umur" class="form-control" :value="nominee.umur" required/>
				</div>

				<div class="form-group">
					<label for="jawatan_sekarang">Jawatan Sekarang</label>
					<input type="text" name="jawatan_sekarang" class="form-control" :value="nominee.jawatan_sekarang" required/>
				</div>

				<div class="form-group">
					<label for="education">Taraf Pendidikan</label>
					<input type="text" name="education" class="form-control" :value="nominee.education" placeholder="(Optional)" />
				</div>

				<div class="form-group">
					<label for="experience">Pengalaman Kerja </label>
					<textarea name="experience" class="form-control" placeholder="(Optional)">{{ nominee.experience}}</textarea>
				</div>

				<div class="form-group">
					<label for="position_id">Jawatan</label>
					<select class="form-control" name="position_id" :value="nominee.position_id" required>
						<option value="0" disabled>--- Pilih Jawatan ---</option>
						<option v-for="position in data.positions" :value="position.id">{{ position.name }}</option>
					</select>
				</div>

				<div class="form-group">
					<label for="partylist_id">Partylist</label>
					<select class="form-control" name="partylist_id" :value="nominee.partylist_id">
						<option value="">--- Select Partylist (Optional) ---</option>
						<option v-for="partylist in data.partylists" :key="partylist.id" :value="partylist.id">{{ partylist.name }}</option>
					</select>
				</div>

                <div id="imagePreview">
                    <img :src="imageUrl" v-if="imageUrl" alt="Preview">
                </div>
                <div>
                    <label for="image">Muat Naik 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="Simpan" class="btn btn-info">
					<router-link
						:to="{name:'Maklumat Calon'}"
						class="btn btn-default">
						Kembali
					</router-link>
				</div>
			</div>
		</form>
	</div>
</div>
</template>

<script>
export default{
	data: function () {
		return {
            imageUrl: '',
			loading: false
		}
	},

	created: function () {
		if (!this.nominee.id)
			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;
			this.loading = true;
			this.util.notify('Kemaskini undian', 'progress', 0);
			$('#edit_form').ajaxSubmit({
				success: function (response) {
					$.notifyClose();
					vm.loading = false;
					if (vm.util.showResult(response, 'success', 'ajax'))
						vm.$router.push({name: 'Maklumat Calon',query:{refresh:true}});
				},
				error: function (error) {
					$.notifyClose();
					vm.loading = false;
					vm.util.showResult(error, 'error', 'ajax');
				},
				uploadProgress: function (a, b, c, progress) {
					this.util.notify('Kemaskini undian', 'progress', progress);
				}
			})
		}
	},

	computed: {
		id: function () {
			return this.$route.params.id;
		},

		nominee: function () {
			for (var i in this.data.nominees)
				if(this.data.nominees[i].id == this.id)
					return this.data.nominees[i];
			return {}
		}
	}
}
</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>