43 lines
1.6 KiB
PHP
43 lines
1.6 KiB
PHP
|
<form wire:submit.prevent="save">
|
||
|
|
@if($avatar)
|
||
|
|
<div
|
||
|
|
class="d-flex flex-column justify-content-center"
|
||
|
|
wire:ignore
|
||
|
|
x-data="{
|
||
|
|
setUp() {
|
||
|
|
const cropper = new Cropper(document.getElementById('avatar'), {
|
||
|
|
aspectRatio: 1/1,
|
||
|
|
autoCropArea: 1,
|
||
|
|
viewMode: 1,
|
||
|
|
crop (event) {
|
||
|
|
@this.set('x', event.detail.x)
|
||
|
|
@this.set('y', event.detail.y)
|
||
|
|
@this.set('width', event.detail.width)
|
||
|
|
@this.set('height', event.detail.height)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}"
|
||
|
|
x-init="setUp"
|
||
|
|
>
|
||
|
|
<div class="d-flex justify-content-center text-center mt-4 mb-4">
|
||
|
|
<img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 100%;">
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-end text-end mt-4 mb-4">
|
||
|
|
<button type="submit" class="btn btn-gradient btn-small">
|
||
|
|
<span>Save Avatar</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@else
|
||
|
|
<div class="mb-2 mx-2">
|
||
|
|
<label for="avatar" style="width: 100%;">
|
||
|
|
<img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 100%;">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mb-2 mx-2">
|
||
|
|
<input type="file" name="avatar" id="avatar" class="sr-only" wire:model="avatar">
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</form>
|