Skip to content

Commit fd28698

Browse files
betsyecastrobetsyecastro
committed
🚸 Refactor profile picture upload process to use a Livewire component
1 parent 671cf4a commit fd28698

File tree

9 files changed

+124
-43
lines changed

9 files changed

+124
-43
lines changed

‎app/Http/Controllers/ProfilesController.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ public function update(Profile $profile, string $section, ProfileUpdateRequest $
272272

273273
public function updateImage(Profile $profile, ProfileImageRequest $request): RedirectResponse
274274
{
275-
return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images'));
275+
return redirect()->route('profiles.show', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images'));
276276
}
277277

278278
/**

‎app/Http/Livewire/ProfilePictureEditorModal.php

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?php
2+
3+
namespace App\Http\Livewire;
4+
5+
use App\Profile;
6+
use Livewire\Component;
7+
use Livewire\WithFileUploads;
8+
use App\Http\Requests\Concerns\HasImageUploads;
9+
10+
class ProfilePictureEditorModal extends Component
11+
{
12+
use WithFileUploads;
13+
use HasImageUploads;
14+
public Profile $profile;
15+
public $image;
16+
public $user;
17+
18+
public function mount()
19+
{
20+
$this->user = auth()->user();
21+
}
22+
23+
public function updatedImage()
24+
{
25+
$this->validate([
26+
'image' => $this->uploadedImageRules(),
27+
]);
28+
}
29+
30+
public function submit()
31+
{
32+
$msg = $this->profile->processImage($this->image);
33+
return redirect(route('profiles.show', $this->profile))->with('flash_message', $msg, 'images');
34+
}
35+
36+
public function render()
37+
{
38+
return view('livewire.profile-picture-editor-modal');
39+
}
40+
}

‎app/Http/Requests/ProfilePictureUpdateRequest.php

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?php
2+
3+
namespace App\Http\Requests;
4+
5+
use App\Http\Requests\Concerns\HasImageUploads;
6+
use Illuminate\Foundation\Http\FormRequest;
7+
use Illuminate\Validation\Rule;
8+
9+
class ProfilePictureUpdateRequest extends FormRequest
10+
{
11+
use HasImageUploads;
12+
13+
/**
14+
* Get the validation rules that apply to the request.
15+
*
16+
* @return array
17+
*/
18+
public function rules()
19+
{
20+
return ['data.*.image' => $this->uploadedImageRules()];
21+
// return ['image' => 'required|image|max:220'];
22+
}
23+
24+
/**
25+
* Get the error messages for the defined validation rules.
26+
*
27+
* @return array
28+
*/
29+
public function messages()
30+
{
31+
return [
32+
'image.max' => $this->uploadedImageMessages('max'),
33+
];
34+
}
35+
36+
37+
}

‎public/js/app.js

Lines changed: 0 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/js/app.js": "/js/app.js?id=d764e6cb74d3a3a53a24d6b53f91e9c0",
2+
"/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9",
33
"/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
44
"/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd",
55
"/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880"

‎resources/assets/js/app.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,6 @@ var profiles = (function ($, undefined) {
7474
$(file_input).siblings('.invalid-feedback').removeClass('d-block');
7575
};
7676

77-
/**
78-
* Submits img update
79-
*
80-
* @param {Event} event the triggered event
81-
*/
82-
const submit_img_update = function (event) {
83-
const file_input = event.target;
84-
$(file_input).closest('form').submit();
85-
};
86-
8777
/**
8878
* Reindex numbers in field ids, names, and labels to match sort order,
8979
* e.g. if the first item's name is "thing[3]", rename it to "thing[0]"
@@ -557,7 +547,6 @@ var profiles = (function ($, undefined) {
557547
deobfuscate_mail_links: deobfuscate_mail_links,
558548
on_list_updated: on_list_updated,
559549
preview_selected_image: preview_selected_image,
560-
submit_img_update : submit_img_update,
561550
replace_icon: replace_icon,
562551
registerTagEditors: registerTagEditors,
563552
registerProfilePickers: registerProfilePickers,
@@ -582,7 +571,6 @@ $(function() {
582571
//show preview of uploaded image
583572
$('input[type="file"]').on('change', function(e) {
584573
profiles.preview_selected_image(e);
585-
profiles.submit_img_update(e);
586574
});
587575

588576
// enable drag and drop sorting for items with sortable class

‎resources/views/livewire/profile-picture-editor-modal.blade.php

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<div id="profile_picture_editor" class="modal fade" tabindex="-1" role="dialog" aria-hidden="false" wire:ignore.self>
2+
<div class="modal-dialog modal-dialog-scrollable modal-md">
3+
<div class="modal-content">
4+
<div class="modal-header">
5+
<h5 class="modal-title mt-0"><i class="fas fa-camera"></i> Update Profile Picture</h5>
6+
<button type="button" class="close" data-dismiss="modal" aria-label="Close" wire:click="closeModal">
7+
<span aria-hidden="true">&times;</span>
8+
</button>
9+
</div>
10+
11+
<div class="modal-body">
12+
<div class="container-md">
13+
<form wire:submit.prevent="submit" enctype="multipart/form-data" method="GET">
14+
@csrf
15+
<img id="file-img" src="{{ $profile->imageUrl }}" wire:ignore/>
16+
<br>
17+
<br>
18+
<div class="control-group">
19+
<div class="controls">
20+
{!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'wire:model' => 'image', 'class' => 'd-none form-control']) !!}
21+
@error('image') <span class="error">{{ $message }}</span> @enderror
22+
<label for="file" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
23+
{!! Form::inlineErrors('image') !!}
24+
</div>
25+
</div>
26+
<button type="submit" class="btn btn-primary btn-block" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#file">
27+
<i class="fas fa-upload"></i> Save Image
28+
</button>
29+
</form>
30+
<br>
31+
<br>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>

‎resources/views/profiles/edit/information.blade.php

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,12 @@
22
<div class="row">
33
@foreach($data as $info)
44
<div class="col col-md-4">
5-
{!! Form::open(['url' => route('profiles.update-image', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!}
65
<label for="file">Icon</label>
7-
<img id="file-img" class="profile_photo" src="{{ $profile->imageUrl }}" />
8-
<br />
9-
<br />
10-
<div class="control-group">
11-
<div class="controls">
12-
{!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!}
13-
<label for="file" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label>
14-
{!! Form::inlineErrors('image') !!}
15-
</div>
16-
</div>
17-
<button type="submit" class="btn btn-primary btn-block" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#file">
18-
<i class="fas fa-upload"></i> Replace Image
19-
</button>
20-
{!! Form::close() !!}
21-
<br>
22-
<br>
6+
<img class="profile_photo" src="{{ $profile->image_url }}" alt="{{ $profile->full_name }}">
7+
<a class="btn-sm btn-info btn" href="#" data-target="#profile_picture_editor" data-toggle="modal" role="button">
8+
<i class="fas fa-camera"></i> Edit
9+
</a>
10+
<livewire:profile-picture-editor-modal :profile="$profile">
2311
{!! Form::open(['url' => route('profiles.update-banner', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!}
2412
<label for="banner">Banner</label>
2513
<img id="banner-img" class="profile_photo" src="{{ $profile->banner_url }}" />

‎resources/views/profiles/show.blade.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@
3737
@if(!$information->fancy_header)
3838
<div class="col-md-5 col-sm-6">
3939
<img class="profile_photo" src="{{ $profile->image_url }}" alt="{{ $profile->full_name }}">
40+
<a class="btn-sm btn-info btn" href="#" data-target="#profile_picture_editor" data-toggle="modal" role="button">
41+
<i class="fas fa-camera"></i> Edit
42+
</a>
43+
<livewire:profile-picture-editor-modal :profile="$profile">
4044
</div>
4145
@endif
4246
<div class="@if($information->fancy_header)col-lg-5 @else col-md-7 col-sm-6 @endif">

0 commit comments

Comments
 (0)