Merge pull request #758 from cmho/754-add-avatar-preview

[754] Adds preview for avatar image prior to submit

resources/assets/js/components.js

@@ -43,6 +43,7 @@ require('./components/commentform');
 require('./components/searchform');
 require('./components/bookmarkform');
 require('./components/statusform');
+require('./components/settingspage');
 //require('./components/embed');
 //require('./components/notifications');
 

resources/assets/js/components/settingspage.js

@@ -0,0 +1,14 @@
+$(document).ready(function () {
+    $('#avatarInput').on('change', function(e) {
+        var file = document.getElementById('avatarInput').files[0];
+        var reader = new FileReader();
+
+        reader.addEventListener("load", function() {
+            $('#previewAvatar').html('<img src="' + reader.result + '" class="rounded-circle box-shadow" />');
+        }, false);
+
+        if (file) {
+            reader.readAsDataURL(file);
+        }
+    });
+});

resources/assets/sass/custom.scss

@@ -455,3 +455,10 @@ details summary::-webkit-details-marker {
 .notification-tooltip .arrow::before {
   border-bottom-color:#dc3545 !important;
 }
+
+#previewAvatar {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}

resources/views/settings/home.blade.php

@@ -22,6 +22,7 @@
             <label class="custom-file-label" for="avatarInput">Select a profile photo</label>
           </div>
           <p><span class="small font-weight-bold">Must be a jpeg or png. Max avatar size: <span id="maxAvatarSize"></span></span></p>
+          <div id="previewAvatar"></div>
           <p class="mb-0"><button type="submit" class="btn btn-primary px-4 py-0 font-weight-bold">Upload</button></p>
         </div>
         </form>