-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🚸 Refactor profile picture upload process to use a Livewire component
- Loading branch information
1 parent
671cf4a
commit fd28698
Showing
9 changed files
with
124 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <?php | ||
|
|
||
| namespace App\Http\Livewire; | ||
|
|
||
| use App\Profile; | ||
| use Livewire\Component; | ||
| use Livewire\WithFileUploads; | ||
| use App\Http\Requests\Concerns\HasImageUploads; | ||
|
|
||
| class ProfilePictureEditorModal extends Component | ||
| { | ||
| use WithFileUploads; | ||
| use HasImageUploads; | ||
| public Profile $profile; | ||
| public $image; | ||
| public $user; | ||
|
|
||
| public function mount() | ||
| { | ||
| $this->user = auth()->user(); | ||
| } | ||
|
|
||
| public function updatedImage() | ||
| { | ||
| $this->validate([ | ||
| 'image' => $this->uploadedImageRules(), | ||
| ]); | ||
| } | ||
|
|
||
| public function submit() | ||
| { | ||
| $msg = $this->profile->processImage($this->image); | ||
| return redirect(route('profiles.show', $this->profile))->with('flash_message', $msg, 'images'); | ||
| } | ||
|
|
||
| public function render() | ||
| { | ||
| return view('livewire.profile-picture-editor-modal'); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <?php | ||
|
|
||
| namespace App\Http\Requests; | ||
|
|
||
| use App\Http\Requests\Concerns\HasImageUploads; | ||
| use Illuminate\Foundation\Http\FormRequest; | ||
| use Illuminate\Validation\Rule; | ||
|
|
||
| class ProfilePictureUpdateRequest extends FormRequest | ||
| { | ||
| use HasImageUploads; | ||
|
|
||
| /** | ||
| * Get the validation rules that apply to the request. | ||
| * | ||
| * @return array | ||
| */ | ||
| public function rules() | ||
| { | ||
| return ['data.*.image' => $this->uploadedImageRules()]; | ||
| // return ['image' => 'required|image|max:220']; | ||
| } | ||
|
|
||
| /** | ||
| * Get the error messages for the defined validation rules. | ||
| * | ||
| * @return array | ||
| */ | ||
| public function messages() | ||
| { | ||
| return [ | ||
| 'image.max' => $this->uploadedImageMessages('max'), | ||
| ]; | ||
| } | ||
|
|
||
|
|
||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
resources/views/livewire/profile-picture-editor-modal.blade.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <div id="profile_picture_editor" class="modal fade" tabindex="-1" role="dialog" aria-hidden="false" wire:ignore.self> | ||
| <div class="modal-dialog modal-dialog-scrollable modal-md"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title mt-0"><i class="fas fa-camera"></i> Update Profile Picture</h5> | ||
| <button type="button" class="close" data-dismiss="modal" aria-label="Close" wire:click="closeModal"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="modal-body"> | ||
| <div class="container-md"> | ||
| <form wire:submit.prevent="submit" enctype="multipart/form-data" method="GET"> | ||
| @csrf | ||
| <img id="file-img" src="{{ $profile->imageUrl }}" wire:ignore/> | ||
| <br> | ||
| <br> | ||
| <div class="control-group"> | ||
| <div class="controls"> | ||
| {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'wire:model' => 'image', 'class' => 'd-none form-control']) !!} | ||
| @error('image') <span class="error">{{ $message }}</span> @enderror | ||
| <label for="file" class="btn btn-secondary btn-block"><i class="fas fa-plus"></i> Select Image</label> | ||
| {!! Form::inlineErrors('image') !!} | ||
| </div> | ||
| </div> | ||
| <button type="submit" class="btn btn-primary btn-block" data-toggle="replace-icon" data-newicon="fas fa-sync fa-spin" data-inputrequired="#file"> | ||
| <i class="fas fa-upload"></i> Save Image | ||
| </button> | ||
| </form> | ||
| <br> | ||
| <br> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters