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

<template>
	<div class="panel panel-default">
		<div class="panel-body">
			<form class="row" method="POST" id="add_form" :action="data.API + 'nominee'" enctype="mutlipart/formdata"
				@submit.prevent="add()">
				<div class="col-md-8">

					<div class="form-group">
						<label for="name">Nama Calon</label>
						<input type="text" name="name" class="form-control" required />
					</div>

					<div class="form-group">
						<label for="no_anggota">No. Anggota</label>
						<input type="text" name="no_anggota" class="form-control" required />
					</div>

					<div class="form-group">
						<label for="unit">Unit</label>
						<input type="text" name="unit" class="form-control" required />
					</div>

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

					<div class="form-group">
						<label for="pengalaman">Pengalaman Kerja</label>
						<textarea name="pengalaman" class="form-control" placeholder="(Optional)"></textarea>
					</div>

					<div class="form-group">
						<label for="position_id">Jawatan</label>
						<select class="form-control" v-model="position_id" name="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">
							<option value="">--- Select Partylist (Optional) ---</option>
							<option v-for="partylist in data.partylists" :value="partylist.id">{{ partylist.name }}</option>
						</select>
					</div> -->

                    <div id="imagePreview">
                        <img :src="imageUrl" v-if="imageUrl" alt="Preview">
                    </div>
					<div>
						<label for="image">Muatnaik  Gambar</label>
						<input name="photo" type="file" accept="image/*" id="file-input" @change="handleImageChange">
					</div>


					<div class="form-group pull-right">
						<router-link :to="{ name: 'Maklumat Calon', query: { position_id: position_id } }"
							class="btn btn-default">
							Cancel
						</router-link>
						<input type="submit" value="Submit" class="btn btn-info">
						
					</div>
				</div>
			</form>
		</div>
	</div>
</template>

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

	methods: {
		add: function () {
			if (this.loading) return;
			var vm = this;
			this.loading = true;
			this.util.notify('Adding Nominee', 'progress', 0);
			$('#add_form').ajaxSubmit({
				success: function (response) {
					$.notifyClose();
					vm.loading = false;
					if (vm.util.showResult(response, 'success', 'ajax'))
						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');
				},
				uploadProgress: function (a, b, c, progress) {
					vm.util.notify('Adding Nominee', 'progress', progress);
				}
			})
		},

        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';
            }
        }
	},

	computed: {
		position_id: {
			get: function () {
				return this.$route.query.position_id;
			},

			set: function (id) {
				this.$router.replace({ query: { position_id: id } });
			}
		}
	}
}
</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>