Redesign Profile Picture Uploading UX

app/Http/Controllers/ProfilesController.php

@@ -272,7 +272,7 @@ public function update(Profile $profile, string $section, ProfileUpdateRequest $
 
     public function updateImage(Profile $profile, ProfileImageRequest $request): RedirectResponse
     {
-        return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images'));
+        return redirect()->route('profiles.show', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images'));
     }
 
     /**

app/Http/Livewire/BannerImageEditor.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\Facades\Storage;
+
+class BannerImageEditor extends ProfileHeaderEditorModal
+{
+
+    public $fancy_header_right;
+    public $banner_image;
+    public $banner_image_exists;
+    protected $listeners = ['removeFancyHeader'];
+
+    public function mount()
+    {
+        $this->banner_image_exists = $this->profile->hasMedia('banners');
+        $this->fancy_header_right = $this->profile->hasFancyHeaderRight();
+    }
+
+    public function updatedBannerImage()
+    {
+        $this->validate([
+            'banner_image' => $this->image_rules,
+            'fancy_header_right' => 'boolean',
+        ]);
+    }
+
+    public function submit()
+    {
+        $this->authorize('update', $this->profile);
+
+        $message = "Profile layout has been updated.";
+
+        $this->validate([
+                        'banner_image' => "nullable|{$this->image_rules}", 
+                        'fancy_header_right' => 'boolean'
+                    ]);
+
+        if (!is_null($this->banner_image)) 
+        {
+            $message = "Profile cover image has been updated.";
+
+            $this->profile->processImage($this->banner_image, 'banners');
+        }
+
+        $profile_info = $this->profile->information->first();
+
+        $profile_info->data = array_merge($profile_info->data ?? [], [
+                                'fancy_header' => true,
+                                'fancy_header_right' => (bool) $this->fancy_header_right,
+                            ]);
+
+        $profile_info->save();
+
+        redirect()->route('profiles.show', $this->profile)->with('flash_message', $message);
+    }
+
+    public function render()
+    {   
+        return view('livewire.banner-image-editor');
+    }
+}

app/Http/Livewire/ProfileHeaderEditorModal.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Profile;
+use Livewire\Component;
+use Livewire\WithFileUploads;
+use App\Http\Requests\Concerns\HasImageUploads;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class ProfileHeaderEditorModal extends Component
+{
+
+    use WithFileUploads, HasImageUploads, AuthorizesRequests;
+
+    public $user;
+    public Profile $profile;
+    public bool $fancy_header;
+    public $image_rules;
+
+    public function mount()
+    {
+        $this->image_rules = $this->uploadedImageRules();
+        $this->fancy_header = $this->profile->hasFancyHeader();
+    }
+
+    public function render()
+    {
+        return view('livewire.profile-header-editor-modal');
+    }
+}

app/Http/Livewire/ProfileImageEditor.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Livewire;
+
+class ProfileImageEditor extends ProfileHeaderEditorModal
+{
+    public $image;
+
+    public function updatedImage()
+    {
+        $this->validate([
+            'image' => $this->image_rules
+        ]);
+    }
+
+    public function submit()
+    {
+        $this->authorize('update', $this->profile);
+
+        $message = "Profile layout has been updated.";
+
+        $this->validate([
+            'image' => "nullable|{$this->image_rules}"
+        ]);
+
+        if (!is_null($this->image))
+        {
+            $message = $this->profile->processImage($this->image, 'images');
+        }
+
+        $profile_info = $this->profile->information->first();
+
+        $profile_info->data = array_merge($profile_info->data ?? [], ['fancy_header' => false]);
+
+        $profile_info->save();
+
+        redirect()->route('profiles.show', $this->profile)->with('flash_message', $message);
+    }
+
+    public function render()
+    {
+        return view('livewire.profile-image-editor');
+    }
+
+}

app/Profile.php

@@ -19,6 +19,7 @@
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Http;
 
 /**
  * @method public()
@@ -573,7 +574,7 @@ public function getImageThumbUrlAttribute()
      */
     public function getBannerUrlAttribute()
     {
-        return url($this->getFirstMediaUrl('banners', 'large') ?: '/img/default.png');
+        return url($this->getFirstMediaUrl('banners', 'large'));
     }
 
     /**
@@ -596,6 +597,16 @@ public function getApiUrlAttribute()
         return route('api.index', ['person' => $this->slug, 'with_data' => true]);
     }
 
+    public function hasFancyHeader()
+    {
+        return $this->information->first()->data['fancy_header'];
+    }
+
+    public function hasFancyHeaderRight()
+    {
+        return $this->information->first()->data['fancy_header_right'];
+    }
+
     ///////////////
     // Relations //
     ///////////////

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=24be537863fbbe2259218dfb56ecef72",
+    "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
-    "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd",
+    "/css/app.css": "/css/app.css?id=1db270db632f6d9af0123a31855e03c3",
     "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880"
 }

resources/assets/js/app.js

@@ -569,7 +569,9 @@ $(function() {
     $('.datepicker.month').datepicker(profiles.config.datepicker.month);
 
     //show preview of uploaded image
-    $('input[type="file"]').on('change', (e) => profiles.preview_selected_image(e));
+    $('input[type="file"]').on('change', function(e) {
+        profiles.preview_selected_image(e);
+    });
 
     // enable drag and drop sorting for items with sortable class
     if ($('.sortable').length > 0) {

resources/assets/sass/_profile.scss

@@ -51,7 +51,7 @@
 		background-attachment: fixed;
 		background-position: center top;
 		background-size: cover;
-		height: 85vh;
+		height: calc(70vh - 20px);
 		position: relative;
 
 		@media (max-width: map-get($grid-breakpoints, lg)){
@@ -85,6 +85,12 @@
 			background: $light;
 			width: auto;
 		}
+
+		.edit_banner_button {
+			position: absolute;
+			bottom: 2px;
+			right: 2px;
+		}
 	}
 
 	.profile_list_photo {
@@ -240,3 +246,10 @@
 .profile_photo{
 		width: 100%
 }
+
+a.edit_photo_button {
+	position: relative;
+	top: -33px;
+	right: 2px;
+}
+

resources/views/livewire/banner-image-editor.blade.php

@@ -0,0 +1,46 @@
+<div wire:ignore.self>
+    <h5>2- Select Cover Image</h5>
+    <form wire:submit.prevent="submit" enctype="multipart/form-data" method="GET">
+        @csrf
+        @if ($errors->any())
+            <div class="alert alert-danger" role="alert">
+                <p><strong>There are some errors. Please correct them and try again.</strong></p>
+                @foreach ($errors->all() as $error)
+                    {{ $error }}
+                @endforeach
+            </div>
+        @endif
+        <div class="d-flex align-items-center justify-content-center">
+            <div @if(!$banner_image_exists) style="display:none" @endif>
+                <img id="banner-img" src="{{ $profile->banner_url }}" wire:ignore/>
+            </div>
+            <div @if($banner_image_exists) class="col-4" @endif>
+                {!! Form::file('banner_image', ['id' => 'banner', 'name' => 'banner_image', 'accept' => 'image/*', 'wire:model' => 'banner_image', 'class' => 'd-none form-control']) !!}
+                <label for="banner" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
+                <small class="text-muted">This will use a full-width header style - please use a high-quality image (1280 × 720 pixels or larger).</small>
+            </div>
+        </div>
+
+        <fieldset class="form-group row py-2" @if(!$banner_image_exists) style="display:none" @endif>
+            <div>
+                <div id="fancy_header_options">
+                    <div class="form-group">
+                        <input id="fancy_header_right" type="checkbox" wire:model="fancy_header_right">
+                        <label class="form-check-label" for="fancy_header_right">Align Header Right</label>
+                    </div>
+
+                </div>
+            </div>
+        </fieldset>
+
+        <div class="control-group  border-top-1 mt-4 p-4">
+            <div class="row justify-content-center">
+                <button type="button" class="btn btn-secondary mr-3 col-3" data-dismiss="modal" aria-label="Close">Cancel</button>
+
+                <button type="submit" class="btn btn-primary ml-3 col-3" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#cover">
+                    <i class="fas fa-upload"></i> Save
+                </button>
+            </div>
+        </div>
+    </form>
+</div>