antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: avatar validation

Browse Source
This commit is contained in:
antv
2026-08-04 21:06:10 +07:00
parent e249f08ecc
commit ac76212819
1 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/user-avatar-section.blade.php
+45 -6
View File
@@ -7,25 +7,64 @@
@if($mode !== 'edit')
<div class="flex-1">
<label class="block text-[13px] font-bold text-gray-700 mb-1" for="avatar">Thay đổi ảnh đại diện</label>
<input type="file" name="avatar" id="avatar" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#3462f7] file:text-white hover:file:bg-[#254edb]" onchange="previewAvatar(event)">
<input type="file" name="avatar" id="avatar" accept="image/jpeg, image/png, image/webp" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#3462f7] file:text-white hover:file:bg-[#254edb]" onchange="previewAvatar(event)">
@error('avatar')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
</div>
@endif
</div>
@if($mode !== 'edit')
<x-error-dialog id="modal-avatar-size-error" title="Ảnh quá lớn" message="Ảnh đại diện không được vượt quá 2MB. Vui lòng chọn ảnh nhẹ hơn!" buttonText="Đã hiểu" />
@once
@push('scripts')
<script>
function previewAvatar(event) {
const input = event.target;
if (input.files && input.files[0]) {
// 1. Separate configuration to ease extension (Open/Closed Principle)
const AVATAR_CONFIG = {
MAX_SIZE_BYTES: 2 * 1024 * 1024, // 2MB
DEFAULT_IMG_SRC: '{{ asset('images/avatar.png') }}',
PREVIEW_ELEMENT_ID: 'avatar-preview'
};
// 2. Separate Validation function (Single Responsibility Principle)
function isValidAvatar(file) {
if (file.size > AVATAR_CONFIG.MAX_SIZE_BYTES) {
if (window.openModal) {
window.openModal('modal-avatar-size-error');
}
return false;
}
return true;
}
// 3. Separate UI Reset function (Single Responsibility Principle)
function resetAvatarInput(inputElement) {
inputElement.value = '';
document.getElementById(AVATAR_CONFIG.PREVIEW_ELEMENT_ID).src = AVATAR_CONFIG.DEFAULT_IMG_SRC;
}
// 4. Separate image rendering function (Single Responsibility Principle)
function renderAvatarPreview(file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById('avatar-preview').src = e.target.result;
document.getElementById(AVATAR_CONFIG.PREVIEW_ELEMENT_ID).src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
reader.readAsDataURL(file);
}
// 5. Main function acting as Controller
function previewAvatar(event) {
const input = event.target;
if (!input.files || !input.files[0]) return;
const file = input.files[0];
if (!isValidAvatar(file)) {
resetAvatarInput(input);
return;
}
renderAvatarPreview(file);
}
</script>
@endpush