Tambahan ambil foto
This commit is contained in:
parent
7034f1a669
commit
e700439ecf
@ -94,6 +94,7 @@ class LoginController extends Controller
|
||||
|
||||
public function register(Request $request)
|
||||
{
|
||||
// return response()->json($request->all());
|
||||
$request->validate(
|
||||
[
|
||||
'nama_depan' => ['required'],
|
||||
@ -159,7 +160,7 @@ class LoginController extends Controller
|
||||
'nohp.required' => 'No HP harus dimasukan.',
|
||||
'nohp.min' => 'No HP memiliki minimal 10 angka.',
|
||||
|
||||
'verification_status.boolean' => 'Masa berlaku kode verifikasi sudah habis. Silahkan lakukan verifikasi lagi.',
|
||||
'verification_status.in' => 'Masa berlaku kode verifikasi sudah habis. Silahkan lakukan verifikasi lagi.',
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
@ -128,6 +128,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const startButtonKtp = document.getElementById("startButtonKtp");
|
||||
const refreshButtonKtp = document.getElementById("refreshButtonKtp");
|
||||
const imageHolderKtp = document.getElementById("imageHolderKtp");
|
||||
const selectImageKtp = document.getElementById("gambarKtp");
|
||||
const inputImageKtp = document.getElementById("ambilKtp");
|
||||
|
||||
const videoElementEkyc = document.getElementById("webcamEkyc");
|
||||
const captureButtonEkyc = document.getElementById("captureButtonEkyc");
|
||||
@ -135,6 +137,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const startButtonEkyc = document.getElementById("startButtonEkyc");
|
||||
const refreshButtonEkyc = document.getElementById("refreshButtonEkyc");
|
||||
const imageHolderEkyc = document.getElementById("imageHolderEkyc");
|
||||
const selectImageEkyc = document.getElementById("gambarEkyc");
|
||||
const inputImageEkyc = document.getElementById("ambilEkyc");
|
||||
|
||||
// Inisialisasi status kamera
|
||||
let ktpStream = null;
|
||||
@ -175,6 +179,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
|
||||
startButtonKtp.addEventListener("click", function () {
|
||||
clearPhoto(fotoInputKtp, document.getElementById("foto-preview-ktp"));
|
||||
|
||||
if (ktpStream) {
|
||||
// Matikan kamera jika sudah aktif
|
||||
turnOffCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
@ -186,6 +192,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
ktpStream = null;
|
||||
imageHolderKtp.style.display = "block";
|
||||
captureButtonKtp.style.display = "none";
|
||||
selectImageKtp.style.display = "block";
|
||||
} else {
|
||||
// Aktifkan kamera jika belum aktif
|
||||
navigator.mediaDevices
|
||||
@ -195,6 +202,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
turnOnCamera(ktpStream, videoElementKtp, startButtonKtp);
|
||||
imageHolderKtp.style.display = "none";
|
||||
captureButtonKtp.style.display = "block";
|
||||
selectImageKtp.style.display = "none";
|
||||
})
|
||||
.catch(function (error) {
|
||||
Swal.fire({
|
||||
@ -207,6 +215,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
|
||||
startButtonEkyc.addEventListener("click", function () {
|
||||
clearPhoto(fotoInputEkyc, document.getElementById("foto-preview-ekyc"));
|
||||
|
||||
if (ekycStream) {
|
||||
// Matikan kamera jika sudah aktif
|
||||
turnOffCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
@ -218,6 +228,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
ekycStream = null;
|
||||
imageHolderEkyc.style.display = "block";
|
||||
captureButtonEkyc.style.display = "none";
|
||||
selectImageEkyc.style.display = "block";
|
||||
} else {
|
||||
// Aktifkan kamera jika belum aktif
|
||||
navigator.mediaDevices
|
||||
@ -227,6 +238,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
turnOnCamera(ekycStream, videoElementEkyc, startButtonEkyc);
|
||||
imageHolderEkyc.style.display = "none";
|
||||
captureButtonEkyc.style.display = "block";
|
||||
selectImageEkyc.style.display = "none";
|
||||
})
|
||||
.catch(function (error) {
|
||||
Swal.fire({
|
||||
@ -265,6 +277,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
refreshButtonKtp.style.display = "none";
|
||||
captureButtonKtp.style.display = "block";
|
||||
startButtonKtp.style.display = "block";
|
||||
selectImageKtp.style.display = "none";
|
||||
});
|
||||
|
||||
refreshButtonEkyc.addEventListener("click", function () {
|
||||
@ -294,8 +307,22 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
refreshButtonEkyc.style.display = "none";
|
||||
captureButtonEkyc.style.display = "block";
|
||||
startButtonEkyc.style.display = "block";
|
||||
selectImageEkyc.style.display = "none";
|
||||
});
|
||||
|
||||
function dataURLtoBlob(dataURL) {
|
||||
const byteString = atob(dataURL.split(",")[1]);
|
||||
const mimeString = dataURL.split(",")[0].split(":")[1].split(";")[0];
|
||||
const ab = new ArrayBuffer(byteString.length);
|
||||
const ia = new Uint8Array(ab);
|
||||
|
||||
for (let i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
return new Blob([ab], { type: mimeString });
|
||||
}
|
||||
|
||||
captureButtonKtp.addEventListener("click", function () {
|
||||
if (ktpStream) {
|
||||
const canvas = document.createElement("canvas");
|
||||
@ -323,6 +350,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
refreshButtonKtp.style.display = "block";
|
||||
captureButtonKtp.style.display = "none";
|
||||
startButtonKtp.style.display = "none";
|
||||
selectImageKtp.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
@ -353,53 +381,96 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
refreshButtonEkyc.style.display = "block";
|
||||
captureButtonEkyc.style.display = "none";
|
||||
startButtonEkyc.style.display = "none";
|
||||
selectImageEkyc.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// gambar untuk foto wajah
|
||||
var uploadInput = document.getElementById('fotoEkyc');
|
||||
var imageHolder = document.getElementById('imageHolderEkyc');
|
||||
var gambarButton = document.getElementById('gambarEkyc');
|
||||
|
||||
gambarButton.addEventListener('click', function() {
|
||||
uploadInput.click();
|
||||
});
|
||||
|
||||
uploadInput.addEventListener('change', function(event) {
|
||||
var file = event.target.files[0];
|
||||
inputImageKtp.addEventListener("change", function (event) {
|
||||
const file = event.target.files[0];
|
||||
imageHolderKtp.style.display = "none";
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
imageHolder.src = reader.result; // Mengubah sumber gambar pada elemen img dengan ID imageHolderEkyc
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
const imageDataUrl = event.target.result;
|
||||
|
||||
// Buat elemen gambar sementara
|
||||
const img = new Image();
|
||||
|
||||
img.onload = function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Set ukuran canvas sesuai dengan gambar
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
|
||||
// Gambar gambar ke dalam canvas
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// Ambil data URL dalam format JPEG dari canvas
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
const fotoPreview =
|
||||
document.getElementById("foto-preview-ktp");
|
||||
fotoPreview.innerHTML =
|
||||
'<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
fotoInputKtp.value = fotoDataUrl;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file); // Membaca file gambar sebagai URL data
|
||||
// Set data URL gambar ke elemen gambar
|
||||
img.src = imageDataUrl;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
//gambar foto ktp
|
||||
var uploadInput = document.getElementById('fotoKtp');
|
||||
var imageHolder = document.getElementById('imageHolderKtp');
|
||||
var gambarButton = document.getElementById('gambarKtp');
|
||||
|
||||
gambarButton.addEventListener('click', function() {
|
||||
uploadInput.click();
|
||||
});
|
||||
|
||||
uploadInput.addEventListener('change', function(event) {
|
||||
var file = event.target.files[0];
|
||||
inputImageEkyc.addEventListener("change", function (event) {
|
||||
const file = event.target.files[0];
|
||||
imageHolderEkyc.style.display = "none";
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
imageHolder.src = reader.result; // Mengubah sumber gambar pada elemen img dengan ID imageHolderEkyc
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
const imageDataUrl = event.target.result;
|
||||
|
||||
// Buat elemen gambar sementara
|
||||
const img = new Image();
|
||||
|
||||
img.onload = function () {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Set ukuran canvas sesuai dengan gambar
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
|
||||
// Gambar gambar ke dalam canvas
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// Ambil data URL dalam format JPEG dari canvas
|
||||
const fotoDataUrl = canvas.toDataURL("image/jpeg");
|
||||
|
||||
const fotoPreview =
|
||||
document.getElementById("foto-preview-ekyc");
|
||||
fotoPreview.innerHTML =
|
||||
'<img src="' + fotoDataUrl + '" alt="Foto">';
|
||||
|
||||
fotoInputEkyc.value = fotoDataUrl;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file); // Membaca file gambar sebagai URL data
|
||||
// Set data URL gambar ke elemen gambar
|
||||
img.src = imageDataUrl;
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
/******************************************
|
||||
* END KTP & E-KYC CAMERA
|
||||
|
||||
@ -391,7 +391,6 @@
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
console.log(error);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@ -141,26 +141,25 @@
|
||||
<div class="input-field-signup-flex">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="Nama Depan" class="first-name-input"
|
||||
name="nama_depan" required />
|
||||
name="nama_depan" />
|
||||
</div>
|
||||
<div class="input-field-signup-flex" style="margin-left: 3%">
|
||||
<i class="fas fa-user"></i>
|
||||
<input type="text" placeholder="Nama Belakang" class="last-name-input"
|
||||
name="nama_belakang" required />
|
||||
name="nama_belakang">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field up">
|
||||
<i class="fa fa-id-card" aria-hidden="true"></i>
|
||||
<input type="text" placeholder="NIK" class="email-input" name="nik"
|
||||
maxlength="16"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 16);"
|
||||
required />
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 16);" />
|
||||
</div>
|
||||
<div class="flex-input-btn">
|
||||
<div class="input">
|
||||
<i class="fa fa-envelope" aria-hidden="true"></i>
|
||||
<input type="email" placeholder="Email" class="email-input" name="new_email"
|
||||
id="newEmail" required />
|
||||
id="newEmail">
|
||||
</div>
|
||||
<button id="verifikasiEmail" class="btn-otp" type="button"
|
||||
disabled=true>Verifikasi</button>
|
||||
@ -169,20 +168,20 @@
|
||||
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
|
||||
<input type="text" class="telp-input-signup"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
||||
placeholder="Kode Verifikasi Email" name="email_verification" required
|
||||
placeholder="Kode Verifikasi Email" name="email_verification"
|
||||
id="emailVerification">
|
||||
</div>
|
||||
<div class="input-field up">
|
||||
<i class="fa fa-phone" aria-hidden="true"></i>
|
||||
<input type="text" class="telp-input-signup" maxlength="13"
|
||||
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 15);"
|
||||
placeholder="Nomer Telepon. cth: 08xxx" name="nohp" required>
|
||||
placeholder="Nomer Telepon. cth: 08xxx" name="nohp">
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="input-field-signup-flex up gender-select-menu" style="width: 190%">
|
||||
<div class="gender-select-input" style="width: 100%; padding-left: 1rem;">
|
||||
<select style="width: 190%;" class="gender-select" id="gender-select"
|
||||
name="gender" required>
|
||||
name="gender">
|
||||
<option value="Laki-laki">Laki-laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</select>
|
||||
@ -190,8 +189,7 @@
|
||||
</div>
|
||||
<div class="input-field-signup-flex up" style="margin-left: 3%">
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i>
|
||||
<input type="date" placeholder="Tanggal Lahir" name="tanggal_lahir"
|
||||
required />
|
||||
<input type="date" placeholder="Tanggal Lahir" name="tanggal_lahir" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -230,14 +228,14 @@
|
||||
<select id="selectVillage"
|
||||
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
|
||||
class="input-field" aria-label="Default select example"
|
||||
name="village_code" required>
|
||||
name="village_code">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="input-field" id="alamat" name="alamat"
|
||||
placeholder="Alamat lengkap Anda" cols="50" rows="4"
|
||||
style="width: 190%; padding: 0rem 1rem;" required>
|
||||
style="width: 190%; padding: 0rem 1rem;">
|
||||
</div>
|
||||
<!-- ======= END FORM ADDRESS ======= -->
|
||||
|
||||
@ -246,7 +244,7 @@
|
||||
<div class="slider-container">
|
||||
<div class="slider">
|
||||
<div class="slide fade">
|
||||
<div style="display: flex; flex-direction: column; align-items: center">
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<h3 style="">Foto KTP Anda</h3>
|
||||
<div class="image-holder-ktp">
|
||||
<img src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
|
||||
@ -254,12 +252,15 @@
|
||||
</div>
|
||||
<video id="webcamKtp" autoplay playsinline></video>
|
||||
<div id="foto-preview-ktp"></div>
|
||||
<input type="file" id="fotoKtp" name="wajah" accept="image/*" required style="display: none">
|
||||
<div style="display: flex; margin-top: 1rem; gap:10px">
|
||||
<input type="hidden" id="fotoKtp" name="ktp"
|
||||
style="display: none;">
|
||||
<div style="display: flex; margin-top: 1rem; gap:10px;">
|
||||
<button type="button" class="btn-foto" id="startButtonKtp"
|
||||
data-state="off">Mulai Kamera</button>
|
||||
<button type="button" class="btn-foto" id="gambarKtp"
|
||||
data-state="off">pilih Gambar</button>
|
||||
<label for="ambilKtp" class="btn-foto text-center" id="gambarKtp"
|
||||
data-state="off">Pilih Gambar KTP<input type="file"
|
||||
id="ambilKtp" accept="image/*"
|
||||
style="display: none;"></label>
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonKtp">Ambil Foto</button>
|
||||
<button type="button" class="btn-foto"
|
||||
@ -268,22 +269,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide fade">
|
||||
<div
|
||||
style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<h3>Foto Wajah Anda</h3>
|
||||
<div class="image-holder-ekyc">
|
||||
<img class="image-holder-ekyc"
|
||||
src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
|
||||
<img src="{{ asset('assets/images/dashboard/Asset 3.png') }}"
|
||||
alt="logo ambil gambar" id="imageHolderEkyc">
|
||||
</div>
|
||||
<video id="webcamEkyc" autoplay playsinline></video>
|
||||
<div id="foto-preview-ekyc"></div>
|
||||
<input type="file" id="fotoEkyc" name="wajah" accept="image/*" required style="display: none">
|
||||
<div style="display: flex; margin-top: 1rem gap: 10px">
|
||||
<input type="hidden" id="fotoEkyc" name="wajah" accept="image/*"
|
||||
style="display: none;">
|
||||
<div style="display: flex; margin-top: 1rem; gap: 10px;">
|
||||
<button type="button" class="btn-foto" id="startButtonEkyc"
|
||||
data-state="off">Mulai Kamera</button>
|
||||
<button type="button" class="btn-foto" id="gambarEkyc"
|
||||
data-state="off">Pilih gambar</button>
|
||||
<label for="ambilEkyc" class="btn-foto text-center"
|
||||
id="gambarEkyc" data-state="off">Pilih Foto Wajah<input
|
||||
type="file" id="ambilEkyc" accept="image/*"
|
||||
style="display: none;"></label>
|
||||
<button type="button" class="btn-foto"
|
||||
id="captureButtonEkyc">Ambil Foto</button>
|
||||
<button type="button" class="btn-foto"
|
||||
@ -310,12 +312,12 @@
|
||||
<div class="input-field-signup-flex">
|
||||
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
||||
<input type="password" class="pin-input" placeholder="Password"
|
||||
name="new_password" required>
|
||||
name="new_password">
|
||||
</div>
|
||||
<div class="input-field-signup-flex" style="margin-left: 3%">
|
||||
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
||||
<input type="password" class="konfir-pin-input"
|
||||
placeholder="Konfirmasi Password" name="confirm_password" required>
|
||||
placeholder="Konfirmasi Password" name="confirm_password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -665,17 +667,34 @@
|
||||
confirmButtonText: 'OK',
|
||||
}).then(function() {
|
||||
if (response.status) {
|
||||
console.log(response);
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
},
|
||||
error: function(error) {
|
||||
if (error.responseJSON && error.responseJSON.errors) {
|
||||
let errorMessage = "Terdapat beberapa kesalahan:<br>";
|
||||
|
||||
const errors = error.responseJSON.errors;
|
||||
|
||||
for (let key in errors) {
|
||||
errorMessage += `${errors[key].join(', ')}<br>`;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Gagal',
|
||||
text: 'Ada form yang kosong atau kesalahan internet. penyebab ' +
|
||||
error,
|
||||
icon: 'error',
|
||||
title: "Gagal",
|
||||
html: errorMessage,
|
||||
icon: "error",
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: "Gagal",
|
||||
text: "Gagal mengirimkan data karena " + error
|
||||
.statusText,
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user