diff --git a/src/lib/components/CardAdd.svelte b/src/lib/components/CardAdd.svelte index 4a8bc0d..1b568dd 100644 --- a/src/lib/components/CardAdd.svelte +++ b/src/lib/components/CardAdd.svelte @@ -27,33 +27,22 @@ function handleFileSelect(event: Event) { const file = input.files?.[0]; if (!file) { - console.log('[CardAdd] No file selected'); return; } - console.log('[CardAdd] File selected:', { - name: file.name, - size: file.size, - type: file.type - }); - // Validate MIME type if (!ALLOWED_MIME_TYPES.includes(file.type)) { - console.error('[CardAdd] Invalid MIME type:', file.type); alert('Invalid file type. Please upload a JPEG, PNG, or WebP image.'); input.value = ''; return; } - console.log('[CardAdd] MIME type valid:', file.type); // Validate file size if (file.size > MAX_FILE_SIZE) { - console.error('[CardAdd] File too large:', file.size); alert(`File too large. Maximum size is 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`); input.value = ''; return; } - console.log('[CardAdd] File size valid:', file.size, 'bytes'); // Clean up old preview URL if exists if (image_preview_url && image_preview_url.startsWith('blob:')) { @@ -63,10 +52,6 @@ function handleFileSelect(event: Event) { // Create preview and store file image_preview_url = URL.createObjectURL(file); selected_image_file = file; - console.log('[CardAdd] Image preview created, file stored for upload:', { - previewUrl: image_preview_url, - fileName: file.name - }); } // Check if initial image_preview_url redirects to placeholder @@ -77,19 +62,11 @@ onMount(() => { img.onload = () => { // Check if this is the placeholder image (150x150) if (img.naturalWidth === 150 && img.naturalHeight === 150) { - console.log('[CardAdd] Detected placeholder image (150x150), clearing preview'); image_preview_url = "" - } else { - console.log('[CardAdd] Real image loaded:', { - url: image_preview_url, - naturalWidth: img.naturalWidth, - naturalHeight: img.naturalHeight - }); } }; img.onerror = () => { - console.log('[CardAdd] Image failed to load, clearing preview'); image_preview_url = "" }; @@ -109,7 +86,6 @@ let new_tag = $state(""); let fileInput: HTMLInputElement; function remove_selected_images() { - console.log('[CardAdd] Removing selected image'); if (image_preview_url && image_preview_url.startsWith('blob:')) { URL.revokeObjectURL(image_preview_url); } diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte index 1fca7cb..51b7341 100644 --- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte +++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte @@ -292,26 +292,14 @@ button.action_button { method="POST" bind:this={formElement} enctype="multipart/form-data" - use:enhance={() => { + use:enhance={({ formData }) => { submitting = true; - console.log('[RecipeAdd:Client] Form submission started'); - console.log('[RecipeAdd:Client] Selected image file:', { - hasFile: !!selected_image_file, - fileName: selected_image_file?.name, - fileSize: selected_image_file?.size, - fileType: selected_image_file?.type - }); - return async ({ update, formData }) => { - // Append the image file if one was selected - if (selected_image_file) { - console.log('[RecipeAdd:Client] Appending image to FormData'); - formData.append('recipe_image', selected_image_file); - } else { - console.log('[RecipeAdd:Client] No image to append'); - } - console.log('[RecipeAdd:Client] Sending form to server...'); + // Append the image file BEFORE submission (in the outer function) + if (selected_image_file) { + formData.append('recipe_image', selected_image_file); + } + return async ({ update }) => { await update(); - console.log('[RecipeAdd:Client] Form submission complete'); submitting = false; }; }} diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte index 23b4a9f..17e6a5e 100644 --- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte +++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte @@ -372,13 +372,13 @@ method="POST" bind:this={formElement} enctype="multipart/form-data" - use:enhance={() => { + use:enhance={({ formData }) => { submitting = true; - return async ({ update, formData }) => { - // Append the image file if one was selected - if (selected_image_file) { - formData.append('recipe_image', selected_image_file); - } + // Append the image file BEFORE submission (in the outer function) + if (selected_image_file) { + formData.append('recipe_image', selected_image_file); + } + return async ({ update }) => { await update(); submitting = false; };