kavehhn/gameno-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align FilePond upload with the Node.js API and proxy gallery previews

Browse Source 
Use the filepond-image field, parse the API envelope, and load private files through the authenticated content endpoint so uploads persist and images display.
This commit is contained in:
kavehhn
2026-08-15 18:46:26 +03:30
parent 67cba87661
commit 73670703bb
9 changed files with 263 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -1
View File
@@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"preview": "vite preview",
"test": "node --test src/utils/uploadResponse.test.js"
},
"dependencies": {
"@fontsource/vazirmatn": "^5.3.0",
src/api/axiosInstance.js
+13
View File
@@ -29,6 +29,19 @@ axiosInstance.interceptors.request.use(
config.params.lang = lang;
}
const isFormData = typeof FormData !== 'undefined' && config.data instanceof FormData;
if (isFormData) {
// Let the browser set multipart boundary — a bare multipart/form-data header breaks Multer
if (typeof config.headers?.delete === 'function') {
config.headers.delete('Content-Type');
config.headers.delete('content-type');
} else {
delete config.headers['Content-Type'];
delete config.headers['content-type'];
}
config.timeout = Math.max(config.timeout || 0, 120000);
}
return config;
},
(error) => Promise.reject(error)
src/api/certificateApi.js
+2 -2
View File
@@ -6,11 +6,11 @@ export const certificateApi = {
search: (params) => axiosInstance.get('/certificates/admin/search', { params }),
getOne: (id) => axiosInstance.get(`/certificates/admin/get-one/${id}`),
getByUser: (userId) => axiosInstance.get(`/certificates/admin/by-user/${userId}`),
create: (data) => axiosInstance.post('/certificates/admin/create', data),
create: (data) => axiosInstance.post('/certificates/admin/create', data, { timeout: 120000 }),
update: (id, data) => axiosInstance.put(`/certificates/admin/update/${id}`, data),
delete: (id) => axiosInstance.delete(`/certificates/admin/delete/${id}`),
uploadTemp: (formData) => axiosInstance.post('/files/admin/upload-temp', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
timeout: 120000
}),
getSignedUrl: (filename, bucket = 'temp') =>
axiosInstance.get(`/files/admin/signed-url/${encodeURIComponent(filename)}`, { params: { bucket } }),
src/api/documentApi.js
+1 -1
View File
@@ -5,7 +5,7 @@ export const documentApi = {
getAll: (params) => axiosInstance.get('/documents/admin/get-all', { params }),
getByUser: (userId) => axiosInstance.get(`/documents/admin/by-user/${userId}`),
getOne: (id) => axiosInstance.get(`/documents/admin/get-one/${id}`),
create: (data) => axiosInstance.post('/documents/admin/create', data),
create: (data) => axiosInstance.post('/documents/admin/create', data, { timeout: 120000 }),
update: (id, data) => axiosInstance.put(`/documents/admin/update/${id}`, data),
delete: (id) => axiosInstance.delete(`/documents/admin/delete/${id}`),
getMyDocuments: () => axiosInstance.get('/documents/user/my-documents')
src/api/filesApi.js
+15
View File
@@ -0,0 +1,15 @@
// /src/api/filesApi.js
import axiosInstance from './axiosInstance';
export const filesApi = {
uploadTemp: (formData) => axiosInstance.post('/files/admin/upload-temp', formData, {
timeout: 120000
}),
getSignedUrl: (filename, bucket = 'temp') =>
axiosInstance.get(`/files/admin/signed-url/${encodeURIComponent(filename)}`, { params: { bucket } }),
getContent: (key, bucket) => axiosInstance.get('/files/admin/content', {
params: { key, bucket },
responseType: 'blob',
timeout: 120000
})
};
src/components/uploader/ImageManager.vue
+117 -55
View File
@@ -1,11 +1,14 @@
<!-- /src/components/uploader/ImageManager.vue -->
<!-- FilePond → Node.js temp upload, private files previewed via authenticated API proxy -->
<template>
<div class="image-manager">
<file-pond
v-if="allowUpload"
ref="pond"
name="file"
name="filepond-image"
store-as-file="true"
:label-idle="labelIdle"
label-file-processing="در حال آپلود"
label-file-processing-complete="آپلود فایل تکمیل شد"
:allow-multiple="allowMultiple"
:max-files="maxFiles"
:accepted-file-types="acceptedFileTypes"
@@ -20,24 +23,25 @@
>
<div
v-for="(img, index) in imagesList"
:key="img.id || img.tempFileName || img.url || index"
:key="itemKey(img, index)"
class="col-12 sm:col-6 md:col-4 lg:col-3"
>
<div class="gallery-card surface-card border-1 border-color border-round overflow-hidden relative">
<a
:href="img.url || img.signedUrl || img.presignedUrl"
:data-pswp-width="img.width || 1600"
:data-pswp-height="img.height || 1200"
:href="previewSrc(img)"
:data-pswp-width="img.width || dimensions[itemKey(img, index)]?.width || 1600"
:data-pswp-height="img.height || dimensions[itemKey(img, index)]?.height || 1200"
:data-pswp-type="isPdf(img) ? 'iframe' : undefined"
target="_blank"
rel="noopener"
class="block overflow-hidden gallery-thumb"
>
<img
v-if="!isPdf(img)"
:src="img.url || img.signedUrl || img.presignedUrl"
v-if="!isPdf(img) && previewSrc(img)"
:src="previewSrc(img)"
:alt="img.name || img.fileName || img.title || 'تصویر'"
class="w-full h-10rem object-cover block"
@load="onImageLoad(img, index, $event)"
/>
<div v-else class="pdf-thumb flex flex-column align-items-center justify-content-center h-10rem gap-2">
<i class="pi pi-file-pdf text-3xl text-red-500"></i>
@@ -75,7 +79,8 @@ import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';
import { useAuthStore } from '@/stores/authStore';
import axiosInstance from '@/api/axiosInstance';
import { filesApi } from '@/api/filesApi';
import { parseUploadResponse, buildUploadUrl } from '@/utils/uploadResponse';
import Button from 'primevue/button';
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
@@ -93,6 +98,10 @@ const props = defineProps({
type: String,
default: 'temp'
},
storageBucket: {
type: String,
default: 'certificates'
},
maxFiles: {
type: Number,
default: 10
@@ -124,6 +133,10 @@ const emit = defineEmits(['update:modelValue', 'upload-success', 'remove']);
const authStore = useAuthStore();
const pond = ref(null);
let lightbox = null;
const pendingMeta = new Map();
const inflightPreviews = new Set();
const previewUrls = ref({});
const dimensions = ref({});
const labelIdle = 'کشیدن و رها کردن فایل یا <span class="filepond--label-action">مرور سیستم</span>';
@@ -134,84 +147,113 @@ const imagesList = computed({
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000/api';
const itemKey = (img, index = 0) => img?.id || img?.fileKey || img?.tempFileName || img?.url || `idx-${index}`;
const isPdf = (img) => {
const name = `${img?.name || ''} ${img?.fileName || ''} ${img?.mimeType || ''} ${img?.url || ''}`.toLowerCase();
return name.includes('pdf') || name.includes('application/pdf');
};
const parseServerFileMeta = (serverId) => {
if (!serverId) return { tempFileName: '', originalName: '', mimeType: '' };
if (typeof serverId === 'object') {
const nested = serverId.data && typeof serverId.data === 'object' ? serverId.data : serverId;
return {
tempFileName: nested.tempFileName || nested.filename || '',
originalName: nested.originalName || nested.fileName || '',
mimeType: nested.mimeType || ''
};
}
try {
return parseServerFileMeta(JSON.parse(serverId));
} catch {
return { tempFileName: String(serverId), originalName: '', mimeType: '' };
}
const previewSrc = (img) => {
const key = itemKey(img);
return previewUrls.value[key] || img?.url || img?.signedUrl || img?.presignedUrl || '';
};
const serverOptions = computed(() => ({
url: API_BASE_URL,
process: {
url: props.uploadEndpoint,
headers: {
Authorization: `Bearer ${authStore.accessToken}`
},
onload: (response) => {
const meta = parseServerFileMeta(response);
return JSON.stringify({
tempFileName: meta.tempFileName,
originalName: meta.originalName,
mimeType: meta.mimeType
const authHeaders = () => ({
Authorization: `Bearer ${authStore.accessToken || localStorage.getItem('accessToken') || ''}`
});
const serverOptions = computed(() => ({
process: {
url: buildUploadUrl(API_BASE_URL, props.uploadEndpoint),
method: 'POST',
headers: authHeaders,
onload: (response) => {
const meta = parseUploadResponse(response);
if (!meta.tempFileName) {
throw new Error('پاسخ آپلود نامعتبر است');
}
pendingMeta.set(meta.tempFileName, meta);
return meta.tempFileName;
},
onerror: (response) => {
try {
const parsed = typeof response === 'string' ? JSON.parse(response) : response;
return parsed?.error?.message || parsed?.message || 'آپلود ناموفق بود';
} catch {
return 'آپلود ناموفق بود';
}
}
},
revert: null
}));
const fetchTempSignedUrl = async (tempFileName) => {
const revokePreview = (key) => {
const url = previewUrls.value[key];
if (url && String(url).startsWith('blob:')) {
URL.revokeObjectURL(url);
}
if (previewUrls.value[key]) {
const next = { ...previewUrls.value };
delete next[key];
previewUrls.value = next;
}
};
const resolvePreview = async (img) => {
const key = itemKey(img);
if (!key || previewUrls.value[key] || inflightPreviews.has(key)) return;
if (img?.url && String(img.url).startsWith('blob:')) {
previewUrls.value = { ...previewUrls.value, [key]: img.url };
return;
}
const objectKey = img.fileKey || img.tempFileName;
const bucket = img.fileKey
? (img.bucket || props.storageBucket || 'certificates')
: (img.bucket || props.tempBucket || 'temp');
if (!objectKey) return;
inflightPreviews.add(key);
try {
const res = await axiosInstance.get(
`/files/admin/signed-url/${encodeURIComponent(tempFileName)}`,
{ params: { bucket: props.tempBucket } }
);
const data = res.data || res;
return data.presignedUrl || data.signedUrl || data.url || '';
const blob = await filesApi.getContent(objectKey, bucket);
if (!(blob instanceof Blob) || !blob.size || /json|html/i.test(blob.type)) return;
const objectUrl = URL.createObjectURL(blob);
previewUrls.value = { ...previewUrls.value, [key]: objectUrl };
} catch {
return '';
// signedUrl from the API is a fallback for display
} finally {
inflightPreviews.delete(key);
}
};
const handleProcessFile = async (error, file) => {
if (error) return;
const meta = parseServerFileMeta(file.serverId);
const tempFileName = meta.tempFileName || '';
const serverId = file?.serverId;
const parsed = parseUploadResponse(serverId);
const tempFileName = parsed.tempFileName || (typeof serverId === 'string' ? serverId : '');
const meta = pendingMeta.get(tempFileName) || parsed;
pendingMeta.delete(tempFileName);
const originalName = meta.originalName || file.filename;
const mimeType = meta.mimeType || file.fileType || '';
const signedUrl = tempFileName ? await fetchTempSignedUrl(tempFileName) : '';
const newItem = {
name: originalName,
fileName: originalName,
tempFileName,
mimeType,
bucket: meta.bucket || props.tempBucket,
pending: true,
url: signedUrl,
signedUrl,
width: 1600,
height: 1200
};
emit('update:modelValue', [...imagesList.value, newItem]);
emit('upload-success', newItem);
await resolvePreview(newItem);
await nextTick();
try {
pond.value?.removeFile?.(file.id);
@@ -223,12 +265,24 @@ const handleProcessFile = async (error, file) => {
const removeGalleryImage = (index) => {
const item = imagesList.value[index];
revokePreview(itemKey(item, index));
const updated = [...imagesList.value];
updated.splice(index, 1);
emit('update:modelValue', updated);
emit('remove', item);
};
const onImageLoad = (img, index, event) => {
const el = event.target;
if (!el?.naturalWidth) return;
const key = itemKey(img, index);
dimensions.value = {
...dimensions.value,
[key]: { width: el.naturalWidth, height: el.naturalHeight }
};
reinitLightbox();
};
const destroyLightbox = () => {
if (lightbox) {
lightbox.destroy();
@@ -245,7 +299,6 @@ const reinitLightbox = () => {
gallery: `#${props.galleryId}`,
children: 'a',
pswpModule: () => import('photoswipe'),
// Enable zoom + swipe (PhotoSwipe defaults)
wheelToZoom: true,
initialZoomLevel: 'fit',
secondaryZoomLevel: 2.5,
@@ -255,11 +308,19 @@ const reinitLightbox = () => {
};
watch(
() => props.modelValue?.length,
async () => {
() => props.modelValue,
async (items) => {
const currentKeys = new Set((items || []).map((img, index) => itemKey(img, index)));
Object.keys(previewUrls.value).forEach((key) => {
if (!currentKeys.has(key)) revokePreview(key);
});
for (const img of items || []) {
await resolvePreview(img);
}
await nextTick();
reinitLightbox();
}
},
{ deep: true, immediate: true }
);
onMounted(async () => {
@@ -269,6 +330,7 @@ onMounted(async () => {
onUnmounted(() => {
destroyLightbox();
Object.keys(previewUrls.value).forEach(revokePreview);
});
</script>
src/components/uploader/UserFilesSection.vue
+4
View File
@@ -25,6 +25,7 @@
:allow-multiple="true"
upload-endpoint="/files/admin/upload-temp"
temp-bucket="temp"
storage-bucket="certificates"
@upload-success="onCertificateUploaded"
@remove="onCertificateRemove"
/>
@@ -60,6 +61,7 @@
:allow-multiple="true"
upload-endpoint="/files/admin/upload-temp"
temp-bucket="temp"
storage-bucket="documents"
@upload-success="onDocumentUploaded"
@remove="onDocumentRemove"
/>
@@ -110,6 +112,8 @@ const toGalleryItem = (item) => ({
fileName: item.fileName || item.originalName,
title: item.title,
mimeType: item.mimeType,
fileKey: item.fileKey,
bucket: item.bucket,
url: item.url || item.signedUrl || item.presignedUrl || item.fileUrl,
signedUrl: item.signedUrl || item.presignedUrl,
fileUrl: item.fileUrl || null,
src/utils/uploadResponse.js
+56
View File
@@ -0,0 +1,56 @@
/**
* Parse FilePond / Node.js upload JSON envelopes into a flat file meta object.
* Handles:
* - Gameno: { success, data: { tempFileName, originalName, mimeType } }
* - Chayamarket-style: { status, data: [{ fileRecord: { fileName } }] }
* - Unwrapped objects or a plain filename string
*/
export function parseUploadResponse(response) {
const empty = { tempFileName: '', originalName: '', mimeType: '', bucket: '' };
if (response == null || response === '') return empty;
let parsed = response;
if (typeof response === 'string') {
try {
parsed = JSON.parse(response);
} catch {
return { ...empty, tempFileName: response };
}
}
if (typeof parsed !== 'object') {
return { ...empty, tempFileName: String(parsed) };
}
let payload = parsed;
if (parsed.data !== undefined) {
payload = parsed.data;
}
if (Array.isArray(payload)) {
payload = payload[0]?.fileRecord || payload[0] || {};
} else if (payload?.fileRecord && typeof payload.fileRecord === 'object') {
payload = payload.fileRecord;
}
const tempFileName = payload.tempFileName
|| payload.fileName
|| payload.filename
|| payload.fileKey
|| '';
return {
tempFileName: String(tempFileName || ''),
originalName: String(payload.originalName || payload.fileName || payload.filename || ''),
mimeType: String(payload.mimeType || payload.contentType || ''),
bucket: String(payload.bucket || payload.bucketName || '')
};
}
export function buildUploadUrl(apiBaseUrl, endpoint) {
if (!endpoint) return apiBaseUrl || '';
if (/^https?:\/\//i.test(endpoint)) return endpoint;
const base = String(apiBaseUrl || '').replace(/\/$/, '');
const path = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
return `${base}${path}`;
}
src/utils/uploadResponse.test.js
+55
View File
@@ -0,0 +1,55 @@
import { describe, it } from 'node:test';
import assert from 'node:assert/strict';
import { parseUploadResponse, buildUploadUrl } from './uploadResponse.js';
describe('parseUploadResponse', () => {
it('reads Gameno { success, data } temp upload envelope', () => {
const meta = parseUploadResponse(JSON.stringify({
success: true,
message: 'File uploaded to temp bucket successfully',
data: {
tempFileName: 'temp-123.jpg',
originalName: 'scan.jpg',
mimeType: 'image/jpeg',
bucket: 'temp'
}
}));
assert.equal(meta.tempFileName, 'temp-123.jpg');
assert.equal(meta.originalName, 'scan.jpg');
assert.equal(meta.mimeType, 'image/jpeg');
assert.equal(meta.bucket, 'temp');
});
it('reads Chayamarket-style fileRecord array envelope', () => {
const meta = parseUploadResponse({
status: 'success',
data: [{ fileRecord: { fileName: 'abc-photo.png', mimeType: 'image/png' } }]
});
assert.equal(meta.tempFileName, 'abc-photo.png');
assert.equal(meta.originalName, 'abc-photo.png');
assert.equal(meta.mimeType, 'image/png');
});
it('treats a plain filename string as tempFileName', () => {
const meta = parseUploadResponse('temp-999.pdf');
assert.equal(meta.tempFileName, 'temp-999.pdf');
});
});
describe('buildUploadUrl', () => {
it('joins API base and relative FilePond endpoint without dropping /api', () => {
assert.equal(
buildUploadUrl('http://localhost:5000/api', '/files/admin/upload-temp'),
'http://localhost:5000/api/files/admin/upload-temp'
);
});
it('keeps an already-absolute process URL', () => {
assert.equal(
buildUploadUrl('http://localhost:5000/api', 'https://api.example.com/files/admin/upload-temp'),
'https://api.example.com/files/admin/upload-temp'
);
});
});