front-end/banu-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make admin media uploads reliable

Browse Source
This commit is contained in:
Server Migration
2026-08-16 17:03:36 +03:30
parent b64f528c0d
commit 861773b05b
9 changed files with 119 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/form/FileUploader.vue
+18 -2
View File
@@ -3,9 +3,12 @@
<label class="file-uploader__dropzone-wrap">
<div
class="file-uploader__dropzone"
:class="{ 'file-uploader__dropzone--active': isDragging }"
:class="{
'file-uploader__dropzone--active': isDragging,
'file-uploader__dropzone--disabled': disabled,
}"
@dragover.prevent
@dragenter="isDragging = true"
@dragenter="onDragEnter"
@dragleave="isDragging = false"
@drop="handleDrop"
>
@@ -19,6 +22,7 @@
class="file-uploader__input"
:accept="accept"
:multiple="multiple"
:disabled="disabled"
@change="handleFileSelect"
/>
</div>
@@ -75,6 +79,7 @@ const props = defineProps({
multiple: { type: Boolean, default: true },
maxFiles: { type: Number, default: 10 },
maxSize: { type: Number, default: 0 },
disabled: { type: Boolean, default: false },
})
const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
@@ -82,6 +87,7 @@ const emit = defineEmits(['update:modelValue', 'select', 'remove', 'error'])
const isDragging = ref(false)
const handleFileSelect = (event) => {
if (props.disabled) return
const files = [...event.target.files]
emitFiles(files)
event.target.value = ''
@@ -90,10 +96,15 @@ const handleFileSelect = (event) => {
const handleDrop = (event) => {
event.preventDefault()
isDragging.value = false
if (props.disabled) return
const files = [...event.dataTransfer.files]
emitFiles(files)
}
const onDragEnter = () => {
if (!props.disabled) isDragging.value = true
}
const emitFiles = (files) => {
if (props.modelValue.length + files.length > props.maxFiles) {
emit('error', `حداکثر تعداد فایل مجاز ${props.maxFiles} عدد است.`)
@@ -155,6 +166,11 @@ const formatFileSize = (bytes) => {
&--active {
border-color: var(--color-primary);
}
&--disabled {
cursor: not-allowed;
opacity: 0.55;
}
}
&__upload-icon {
src/enums/index.js
+9 -3
View File
@@ -140,9 +140,15 @@ export const COURSE_CONTENT_TYPE = Object.freeze({
})
export const COURSE_CONTENT_TYPE_ACCEPT = Object.freeze({
video: 'video/*',
voice: 'audio/*',
text: '.pdf,.doc,.docx,.txt',
video: '.mp4,.webm,video/mp4,video/webm',
voice: '.mp3,.wav,.m4a,.webm,audio/mpeg,audio/wav,audio/mp4,audio/webm',
text: '.pdf,application/pdf',
})
export const COURSE_CONTENT_TYPE_MAX_SIZE = Object.freeze({
video: 300 * 1024 * 1024,
voice: 50 * 1024 * 1024,
text: 50 * 1024 * 1024,
})
export const SESSION_TYPE = Object.freeze({
src/features/admin/courses/pages/CourseFormPage.vue
+21 -8
View File
@@ -33,7 +33,7 @@
<SelectField
v-model="form.teacherId"
name="teacherId"
label="استاد"
label="استاد (اختیاری)"
:options="teacherOptions"
option-label="name"
option-value="id"
@@ -251,12 +251,12 @@ watch(
{ immediate: true }
)
const uploadMutation = useUploadMediaMutation()
const coverUploadMutation = useUploadMediaMutation()
const onImageCropped = async (file) => {
try {
const formData = objectToFormData({ file, purpose: 'cover', context: 'course' })
const response = await uploadMutation.mutateAsync(formData)
const response = await coverUploadMutation.mutateAsync(formData)
const payload = response?.data ?? response
image.value = { url: payload?.url, ...payload }
form.value.coverMediaId = payload?.id
@@ -270,15 +270,28 @@ const onImageError = (msg) => toast.error(msg)
const addMutation = useAddAdminCourseMutation()
const updateMutation = useUpdateAdminCourseMutation()
const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
const submitting = computed(
() =>
coverUploadMutation.isPending.value ||
addMutation.isPending.value ||
updateMutation.isPending.value
)
const onSubmit = async () => {
if (coverUploadMutation.isPending.value) {
toast.info('لطفاً تا پایان بارگذاری تصویر دوره منتظر بمانید.')
return
}
const { isValid, payload } = await validate(form.value)
if (!isValid) return
if (isEditMode.value) {
await updateMutation.mutateAsync({ id: courseId.value, payload })
} else {
await addMutation.mutateAsync(payload)
try {
if (isEditMode.value) {
await updateMutation.mutateAsync({ id: courseId.value, payload })
} else {
await addMutation.mutateAsync(payload)
}
} catch {
return
}
await queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
router.push({ name: 'admin-courses' })
src/features/admin/courses/pages/CoursesListPage.vue
+6 -1
View File
@@ -69,7 +69,12 @@ const courseIcon = gallery.courseIcon
const routeTermId = computed(() => (route.params.termId ? Number(route.params.termId) : null))
const onAdd = () => {
router.push({ name: 'admin-add-course' }).catch(() => {})
router
.push({
name: 'admin-add-course',
query: routeTermId.value ? { termId: routeTermId.value } : undefined,
})
.catch(() => {})
}
const tabs = [
src/features/admin/courses/schema/index.js
+2 -1
View File
@@ -2,7 +2,8 @@ import { array, boolean, mixed, number, object, string } from 'yup'
export const courseSchema = object().shape({
title: string().required().min(3).max(255),
teacherId: mixed().required(),
// The backend intentionally allows courses without an assigned teacher.
teacherId: mixed().nullable().notRequired(),
capacity: number()
.typeError('ظرفیت باید به‌صورت عدد وارد شود')
.required()
src/features/admin/sessions/pages/SessionFormPage.vue
+40 -11
View File
@@ -95,7 +95,8 @@
:accept="contentAccept"
:multiple="false"
:max-files="1"
:disabled="!form.contentType"
:max-size="contentMaxSize"
:disabled="!form.contentType || contentUploadMutation.isPending.value"
@select="onContentSelect"
@remove="onContentRemove"
@error="onContentError"
@@ -162,7 +163,12 @@ import TextareaField from '@/components/form/TextareaField.vue'
import { sessionSchema } from '@/features/admin/sessions/schema'
import { useAdminCoursesListQuery } from '@/services/query/admin-courses'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import { COURSE_CONTENT_TYPE, COURSE_CONTENT_TYPE_ACCEPT, SESSION_TYPE } from '@/enums'
import {
COURSE_CONTENT_TYPE,
COURSE_CONTENT_TYPE_ACCEPT,
COURSE_CONTENT_TYPE_MAX_SIZE,
SESSION_TYPE,
} from '@/enums'
import {
adminSessionsKeys,
useAddAdminSessionMutation,
@@ -175,6 +181,7 @@ const router = useRouter()
const queryClient = useQueryClient()
const sessionId = computed(() => (route.params.id ? Number(route.params.id) : null))
const presetCourseId = computed(() => (route.query.courseId ? Number(route.query.courseId) : null))
const isEditMode = computed(() => !!sessionId.value)
const sessionTypeOptions = [
@@ -189,7 +196,7 @@ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, labe
const form = ref({
title: '',
courseId: '',
courseId: presetCourseId.value ?? '',
contentType: '',
type: '',
link: '',
@@ -202,6 +209,9 @@ const coverMediaId = ref(null)
const contentMediaId = ref(null)
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
const contentMaxSize = computed(
() => COURSE_CONTENT_TYPE_MAX_SIZE[form.value.contentType] || 50 * 1024 * 1024
)
const { validate, validateAt, errors } = useYup(sessionSchema)
@@ -276,7 +286,8 @@ watch(
{ immediate: true }
)
const uploadMutation = useUploadMediaMutation()
const contentUploadMutation = useUploadMediaMutation()
const coverUploadMutation = useUploadMediaMutation()
const purposeForContentType = (contentType) => {
if (contentType === 'video') return 'video'
@@ -293,7 +304,7 @@ const onContentSelect = async (files) => {
purpose: purposeForContentType(form.value.contentType),
context: 'session',
})
const response = await uploadMutation.mutateAsync(formData)
const response = await contentUploadMutation.mutateAsync(formData)
const payload = response?.data ?? response
const id = payload?.id ?? payload?.uploadId
contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }]
@@ -313,7 +324,7 @@ const onContentError = (msg) => toast.error(msg)
const onImageCropped = async (file) => {
try {
const formData = objectToFormData({ file, purpose: 'cover', context: 'session' })
const response = await uploadMutation.mutateAsync(formData)
const response = await coverUploadMutation.mutateAsync(formData)
const payload = response?.data ?? response
image.value = { url: payload?.url, ...payload }
coverMediaId.value = payload?.id ?? null
@@ -346,16 +357,34 @@ const buildPayload = (values) => {
const addMutation = useAddAdminSessionMutation()
const updateMutation = useUpdateAdminSessionMutation()
const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
const submitting = computed(
() =>
contentUploadMutation.isPending.value ||
coverUploadMutation.isPending.value ||
addMutation.isPending.value ||
updateMutation.isPending.value
)
const onSubmit = async () => {
if (contentUploadMutation.isPending.value || coverUploadMutation.isPending.value) {
toast.info('لطفاً تا پایان بارگذاری محتوای جلسه منتظر بمانید.')
return
}
const { isValid } = await validate(form.value)
if (!isValid) return
if (form.value.contentType && contentMediaId.value == null) {
toast.error('برای نوع محتوای انتخاب‌شده، فایل جلسه را بارگذاری کنید.')
return
}
const payload = buildPayload(form.value)
if (isEditMode.value) {
await updateMutation.mutateAsync({ id: sessionId.value, payload })
} else {
await addMutation.mutateAsync(payload)
try {
if (isEditMode.value) {
await updateMutation.mutateAsync({ id: sessionId.value, payload })
} else {
await addMutation.mutateAsync(payload)
}
} catch {
return
}
// The list query is inactive while we're on the form page, and the global
// `refetchOnMount: false` means navigating back won't refetch a merely-stale
src/features/admin/sessions/pages/SessionsListPage.vue
+6 -1
View File
@@ -109,7 +109,12 @@ const onFilterApply = () => resetPagination()
const onFilterReset = () => resetPagination()
const onAdd = () => {
router.push({ name: 'admin-add-session' }).catch(() => {})
router
.push({
name: 'admin-add-session',
query: routeCourseId.value ? { courseId: routeCourseId.value } : undefined,
})
.catch(() => {})
}
const onEdit = (session) => {
src/services/api/auth.js
+5 -1
View File
@@ -43,4 +43,8 @@ export const apiSaveRegisterData = (data) => http.post(endpoints.registerData, {
export const apiGetRegistrationQuestionVideo = () =>
http.get(endpoints.getRegistrationQuestionVideo)
export const apiUploadMedia = (formData) => http.post(endpoints.uploadMedia, formData)
// Media uploads (especially course videos) can legitimately take several
// minutes on slower connections. Keep the normal API timeout short, but give
// this endpoint enough time to complete the backend's 300 MB upload contract.
export const apiUploadMedia = (formData) =>
http.post(endpoints.uploadMedia, formData, { timeout: 10 * 60 * 1000 })
src/utils/error-handler.js
+12
View File
@@ -24,6 +24,18 @@ export function handleApiError(error_) {
const data = error_?.response?.data
const status = error_?.response?.status
if (error_?.code === 'ECONNABORTED') {
toast.error(
'زمان بارگذاری فایل به پایان رسید. لطفاً اتصال اینترنت را بررسی و دوباره تلاش کنید.'
)
return
}
if (status === 413) {
toast.error('حجم فایل از حداکثر مجاز بیشتر است.')
return
}
if (status === 422 && data?.errors) {
Object.values(data.errors).forEach((messages) => {
const list = Array.isArray(messages) ? messages : [messages]