diff --git a/app/owner/properties/add/page.js b/app/owner/properties/add/page.js index a7a845e..dd2b516 100644 --- a/app/owner/properties/add/page.js +++ b/app/owner/properties/add/page.js @@ -329,7 +329,7 @@ const handleMapClick = async (coords) => { toast.info('تم إلغاء تحديد الموقع'); }; - const handleImageUpload = (files) => { + const handleImageUpload = async (files) => { const newImages = Array.from(files); if (formData.images.length + newImages.length > 10) { @@ -337,28 +337,39 @@ const handleMapClick = async (coords) => { return; } - newImages.forEach(file => { + for (const file of newImages) { if (!file.type.startsWith('image/')) { toast.error('الرجاء اختيار صور صالحة فقط'); - return; + continue; } if (file.size > 5 * 1024 * 1024) { toast.error('حجم الصورة يجب أن يكون أقل من 5 ميجابايت'); - return; + continue; } + // Show preview const reader = new FileReader(); reader.onloadend = () => { setImagePreviews(prev => [...prev, reader.result]); }; reader.readAsDataURL(file); - setFormData({ - ...formData, - images: [...formData.images, file] - }); - }); + setFormData(prev => ({ + ...prev, + images: [...prev.images, file] + })); + + // Upload to server immediately + try { + const path = await uploadPicture(file); + setUploadedImagePaths(prev => [...prev, path]); + console.log('[AddProperty] Image uploaded:', path); + } catch (err) { + console.error('[AddProperty] Image upload failed:', err); + toast.error('فشل رفع الصورة: ' + file.name); + } + } }; const removeImage = (index) => { @@ -368,11 +379,12 @@ const handleMapClick = async (coords) => { const newPreviews = [...imagePreviews]; newPreviews.splice(index, 1); - setFormData({ - ...formData, - images: newImages - }); + const newPaths = [...uploadedImagePaths]; + newPaths.splice(index, 1); + + setFormData(prev => ({ ...prev, images: newImages })); setImagePreviews(newPreviews); + setUploadedImagePaths(newPaths); }; const toggleService = (serviceId) => { diff --git a/app/utils/api.js b/app/utils/api.js index e8d5913..bf64724 100644 --- a/app/utils/api.js +++ b/app/utils/api.js @@ -201,7 +201,7 @@ export async function getCurrencies() { export async function uploadPicture(file) { console.log('[API] Uploading picture:', file.name); const formData = new FormData(); - formData.append('file', file); + formData.append('image', file); const token = AuthService.getToken(); const res = await fetch(`${API_BASE}/Files/UploadPicture`, { method: 'POST', @@ -213,7 +213,7 @@ export async function uploadPicture(file) { const text = await res.text(); console.log('[API] Upload response:', res.status, text?.substring(0, 100)); if (!res.ok) throw new Error(`Upload failed: ${res.status} ${text}`); - // Response is the relative path string (possibly in envelope) + // Response is the relative path string (e.g. /Pictures/abc123.jpg) try { const json = JSON.parse(text); return json?.data || json;