Preview foto user (#551)

* Perbaikan catatan rilis * Buat filter status * Validasi camat dan sekretaris * Fix styling * Validasi perubahan status * Fix styling * Validasi hanya pengurus aktif yang dapat ditambahkan * Perbaiki validasi * Refactor cek pengurus aktif * Buat preview foto di user * Fix styling * Susulan pengurus (#550) * Perbaikan catatan rilis * Buat filter status * Validasi camat dan sekretaris * Fix styling * Validasi perubahan status * Fix styling * Validasi hanya pengurus aktif yang dapat ditambahkan * Perbaiki validasi * Refactor cek pengurus aktif * Fix styling Co-authored-by: yogiperdana <[email protected]> * mutakhirkan catatan rilis Co-authored-by: yogiperdana <[email protected]> Co-authored-by: sarwono <[email protected]>
OpenSID · Nov 23, 2022 · 5cb7c5f · 5cb7c5f
1 parent 1090a62
commit 5cb7c5f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -36,6 +36,7 @@
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Storage;
 use Intervention\Image\Facades\Image;
 use Spatie\Permission\Traits\HasRoles;
 use Tymon\JWTAuth\Contracts\JWTSubject;
@@ -99,6 +100,11 @@ public static function datatables()
         return static::select('name', 'address', 'status', 'id', 'email', 'created_at', 'phone');
     }
 
+    public function getFotoAttribute()
+    {
+        return $this->attributes['image'] ? Storage::url('user/' . $this->attributes['image']) : null;
+    }
+
     /**
      * Uploads an image.
      *

diff --git a/catatan_rilis.md b/catatan_rilis.md
@@ -5,14 +5,18 @@ Di rilis v22.11.01 berisi perbaikan yang diminta Komunitas OpenDK.
 Terima kasih pada [] yang baru mulai berkontribusi.
 
 #### Penambahan Fitur
+
 1. [#521](https://github.com/OpenSID/OpenDK/issues/521) Penambahan fitur jabatan untuk perangkat kecamatan.
 2. [#514](https://github.com/OpenSID/OpenDK/issues/514) Penambahan fitur pengaturan perangkat kecamatan.
 3. [#519](https://github.com/OpenSID/OpenDK/issues/519) Penambahan fitur pengguna untuk perangkat kecamatan.
+4. [#546](https://github.com/OpenSID/OpenDK/issues/546) Penambahan fitur pratinjau foto pengguna.
 
 #### Perbaikan bug
+
 1. [#529](https://github.com/OpenSID/OpenDK/issues/529) Perbaikan foto pelapor di sikema tidak menampilkan foto penduduk.
 2. [#544](https://github.com/OpenSID/OpenDK/issues/544) Perbaikan form no telepon pengguna tidak bisa dikosongkan.
 
 #### Perubahan Teknis
+
 1. [#523](https://github.com/OpenSID/OpenDK/issues/523) Perbaikan relasi tabel pembangunan.
 2. [#525](https://github.com/OpenSID/OpenDK/issues/525) Perbaikan relasi tabel potensi.
diff --git a/resources/views/user/form.blade.php b/resources/views/user/form.blade.php
@@ -44,7 +44,9 @@
     <label class="control-label col-md-3 col-sm-3 col-xs-12">Foto Profil </label>
 
     <div class="col-md-6 col-sm-6 col-xs-12">
-        <input type="file" name="image" class="form-control">
+        <input type="file" name="image" id="foto" class="form-control">
+        <br>
+        <img src="{{ is_img($user->foto ?? null) }}"  id="showfoto" style="max-width:400px;max-height:250px;float:left;"/>
     </div>
 </div>
 
@@ -112,5 +114,36 @@
     var data = $('#pengurus :selected').data('nama');
     $('input[name="name"]').val(data);
 });
+
+$(function () {
+
+var fileTypes = ['jpg', 'jpeg', 'png'];  //acceptable file types
+
+function readURL(input) {
+    if (input.files && input.files[0]) {
+        var extension = input.files[0].name.split('.').pop().toLowerCase(),  //file extension from input file
+                isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types
+
+        if (isSuccess) { //yes
+            var reader = new FileReader();
+            reader.onload = function (e) {
+
+            $('#showfoto').attr('src', e.target.result);
+            $('#showfoto').removeClass('hide');
+        }
+
+            reader.readAsDataURL(input.files[0]);
+        } else { //no
+            //warning
+            $("#foto").val('');
+            alert('File tersebut tidak diperbolehkan.');
+        }
+    }
+}
+
+$("#foto").change(function () {
+    readURL(this);
+});
+});
 </script>
 @endpush