diff --git a/app/Http/Controllers/Web/Produktivitas/PetaniController.php b/app/Http/Controllers/Web/Produktivitas/PetaniController.php index 92a99ef..336c77a 100644 --- a/app/Http/Controllers/Web/Produktivitas/PetaniController.php +++ b/app/Http/Controllers/Web/Produktivitas/PetaniController.php @@ -224,6 +224,13 @@ class PetaniController extends Controller $validatedData = $this->validatePetani($request); + if ($request->input('hapus_foto') == '1') { + if ($petani->foto && Storage::exists($petani->foto)) { + Storage::delete($petani->foto); + } + $validatedData['foto'] = null; + } + if ($request->hasFile('file_ktp')) { $file_ktp = $request->file('file_ktp'); $validatedData['path_ktp'] = $file_ktp->store('petani/ktp'); @@ -235,6 +242,10 @@ class PetaniController extends Controller $validatedData['file_kk'] = $file_kk->getClientOriginalName(); } if ($request->hasFile('foto')) { + + if ($petani->foto && Storage::exists($petani->foto)) { + Storage::delete($petani->foto); + } $file_foto = $request->file('foto'); $validatedData['foto'] = $file_foto->store('petani/foto'); } diff --git a/public/assets/img/avatars/3.jpg b/public/assets/img/avatars/3.jpg new file mode 100644 index 0000000..93c4cc0 Binary files /dev/null and b/public/assets/img/avatars/3.jpg differ diff --git a/resources/views/produktivitas/petani/add.blade.php b/resources/views/produktivitas/petani/add.blade.php index 15fbb69..c460c44 100644 --- a/resources/views/produktivitas/petani/add.blade.php +++ b/resources/views/produktivitas/petani/add.blade.php @@ -1,3 +1,17 @@ +@push('style') + + + +@endpush + +@push('scripts') + + @extends('layout.main') @section('content') @@ -29,7 +43,7 @@
Foto profil petani
+ + @endsection @push('scripts') @@ -300,24 +332,74 @@ } }); $('#add-petani-desa').select2(); + + let croppieInstance = null; $('#fotoPreview').on('click', function () { + $('#foto').val(''); $('#foto').click(); }); $('#foto').on('change', function (e) { - const file = e.target.files[0]; if (!file) return; + if(!file.type.match(/^image\/(png|jpeg|jpg)$/)) { + return; + } + const reader = new FileReader(); reader.onload = function (event) { - $('#fotoPreview').attr('src', event.target.result); + $('#cropModal').modal('show'); + + if (!croppieInstance) { + const el = document.getElementById('croppie-container'); + croppieInstance = new Croppie(el, { + viewport: { width: 200, height: 200,}, + boundary: { width: 300, height: 300 }, + showZoomer: true, + enableOrientation: true + }); + } + + setTimeout(function() { + croppieInstance.bind({ + url: event.target.result + }); + }, 200); }; reader.readAsDataURL(file); }); + $('#cropImageBtn').on('click', function() { + croppieInstance.result({ + type: 'base64', + format: 'png', + size: 'viewport' + }).then(function(base64) { + + $('#fotoPreview').attr('src', base64); + + function dataURLtoFile(dataurl, filename) { + let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); + while(n--){ + u8arr[n] = bstr.charCodeAt(n); + } + return new File([u8arr], filename, {type: mime}); + } + + let croppedFile = dataURLtoFile(base64, 'foto_profil_crop.png'); + + let dataTransfer = new DataTransfer(); + dataTransfer.items.add(croppedFile); + document.getElementById('foto').files = dataTransfer.files; + + $('#cropModal').modal('hide'); + }); + }); + // 1 MB = 1048576 bytes $.validator.addMethod('maxfilesize', function (value, element, param) { return this.optional(element) || (element.files[0] && element.files[0].size <= param); diff --git a/resources/views/produktivitas/petani/edit.blade.php b/resources/views/produktivitas/petani/edit.blade.php index cc3dd1b..33764db 100644 --- a/resources/views/produktivitas/petani/edit.blade.php +++ b/resources/views/produktivitas/petani/edit.blade.php @@ -1,5 +1,19 @@ @extends('layout.main') +@push('style') + + + +@endpush + +@push('scripts') + + @section('content')
@if ($errors->any()) @@ -23,20 +37,24 @@
@csrf @method('PUT') +
- Foto profil petani -
+ + @endsection @push('scripts') @@ -306,24 +342,86 @@ }); $('#edit-petani-desa').select2(); + let croppieInstance = null; + $('#fotoPreview').on('click', function () { + $('#foto').val(''); $('#foto').click(); }); $('#foto').on('change', function (e) { - const file = e.target.files[0]; if (!file) return; + if(!file.type.match(/^image\/(png|jpeg|jpg)$/)) { + return; + } + const reader = new FileReader(); reader.onload = function (event) { - $('#fotoPreview').attr('src', event.target.result); + $('#cropModal').modal('show'); + + if (!croppieInstance) { + const el = document.getElementById('croppie-container'); + croppieInstance = new Croppie(el, { + viewport: { width: 200, height: 200 }, + boundary: { width: '100%', height: 280 }, + showZoomer: true, + enableOrientation: true + }); + } + + setTimeout(function() { + croppieInstance.bind({ + url: event.target.result + }); + }, 200); }; reader.readAsDataURL(file); }); - // 1 MB = 1048576 bytes + + $('#cropImageBtn').on('click', function() { + croppieInstance.result({ + type: 'base64', + format: 'png', + size: 'viewport', + }).then(function(base64) { + + $('#fotoPreview').attr('src', base64); + + $('#hapus_foto').val('0'); + $('#btnHapusFoto').show(); + + function dataURLtoFile(dataurl, filename) { + let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); + while(n--){ + u8arr[n] = bstr.charCodeAt(n); + } + return new File([u8arr], filename, {type: mime}); + } + + let croppedFile = dataURLtoFile(base64, 'foto_profil_crop.png'); + + let dataTransfer = new DataTransfer(); + dataTransfer.items.add(croppedFile); + document.getElementById('foto').files = dataTransfer.files; + + $('#cropModal').modal('hide'); + }); + }); + + $('#btnHapusFoto').on('click', function() { + $('#hapus_foto').val('1'); + + $('#foto').val(''); + + $('#fotoPreview').attr('src', "{{ asset('assets/img/avatars/3.jpg') }}"); + + $(this).hide(); + }); $.validator.addMethod('maxfilesize', function (value, element, param) { return this.optional(element) || (element.files[0] && element.files[0].size <= param); }, 'File size must be less than {0} bytes.'); diff --git a/resources/views/produktivitas/petani/header.blade.php b/resources/views/produktivitas/petani/header.blade.php index 70b8c67..15c31de 100644 --- a/resources/views/produktivitas/petani/header.blade.php +++ b/resources/views/produktivitas/petani/header.blade.php @@ -7,10 +7,10 @@
@if (!isset($petani)) - Foto Petani + Foto Petani @else - Foto Petani + Foto Petani @endif