fix: append image to FormData before submission in use:enhance

The image upload broke because formData.append() was being called in the
async callback of use:enhance, which runs AFTER the form submission.
Moved the append call to the outer function which runs BEFORE submission.

Also cleaned up debug console.log statements from CardAdd.svelte.
This commit is contained in:
2026-01-20 19:36:56 +01:00
parent 0459ef26bc
commit 2b3aae8087
3 changed files with 12 additions and 48 deletions

View File

@@ -27,33 +27,22 @@ function handleFileSelect(event: Event) {
const file = input.files?.[0]; const file = input.files?.[0];
if (!file) { if (!file) {
console.log('[CardAdd] No file selected');
return; return;
} }
console.log('[CardAdd] File selected:', {
name: file.name,
size: file.size,
type: file.type
});
// Validate MIME type // Validate MIME type
if (!ALLOWED_MIME_TYPES.includes(file.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.'); alert('Invalid file type. Please upload a JPEG, PNG, or WebP image.');
input.value = ''; input.value = '';
return; return;
} }
console.log('[CardAdd] MIME type valid:', file.type);
// Validate file size // Validate file size
if (file.size > MAX_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.`); alert(`File too large. Maximum size is 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`);
input.value = ''; input.value = '';
return; return;
} }
console.log('[CardAdd] File size valid:', file.size, 'bytes');
// Clean up old preview URL if exists // Clean up old preview URL if exists
if (image_preview_url && image_preview_url.startsWith('blob:')) { if (image_preview_url && image_preview_url.startsWith('blob:')) {
@@ -63,10 +52,6 @@ function handleFileSelect(event: Event) {
// Create preview and store file // Create preview and store file
image_preview_url = URL.createObjectURL(file); image_preview_url = URL.createObjectURL(file);
selected_image_file = 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 // Check if initial image_preview_url redirects to placeholder
@@ -77,19 +62,11 @@ onMount(() => {
img.onload = () => { img.onload = () => {
// Check if this is the placeholder image (150x150) // Check if this is the placeholder image (150x150)
if (img.naturalWidth === 150 && img.naturalHeight === 150) { if (img.naturalWidth === 150 && img.naturalHeight === 150) {
console.log('[CardAdd] Detected placeholder image (150x150), clearing preview');
image_preview_url = "" image_preview_url = ""
} else {
console.log('[CardAdd] Real image loaded:', {
url: image_preview_url,
naturalWidth: img.naturalWidth,
naturalHeight: img.naturalHeight
});
} }
}; };
img.onerror = () => { img.onerror = () => {
console.log('[CardAdd] Image failed to load, clearing preview');
image_preview_url = "" image_preview_url = ""
}; };
@@ -109,7 +86,6 @@ let new_tag = $state("");
let fileInput: HTMLInputElement; let fileInput: HTMLInputElement;
function remove_selected_images() { function remove_selected_images() {
console.log('[CardAdd] Removing selected image');
if (image_preview_url && image_preview_url.startsWith('blob:')) { if (image_preview_url && image_preview_url.startsWith('blob:')) {
URL.revokeObjectURL(image_preview_url); URL.revokeObjectURL(image_preview_url);
} }

View File

@@ -292,26 +292,14 @@ button.action_button {
method="POST" method="POST"
bind:this={formElement} bind:this={formElement}
enctype="multipart/form-data" enctype="multipart/form-data"
use:enhance={() => { use:enhance={({ formData }) => {
submitting = true; submitting = true;
console.log('[RecipeAdd:Client] Form submission started'); // Append the image file BEFORE submission (in the outer function)
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) { if (selected_image_file) {
console.log('[RecipeAdd:Client] Appending image to FormData');
formData.append('recipe_image', selected_image_file); formData.append('recipe_image', selected_image_file);
} else {
console.log('[RecipeAdd:Client] No image to append');
} }
console.log('[RecipeAdd:Client] Sending form to server...'); return async ({ update }) => {
await update(); await update();
console.log('[RecipeAdd:Client] Form submission complete');
submitting = false; submitting = false;
}; };
}} }}

View File

@@ -372,13 +372,13 @@
method="POST" method="POST"
bind:this={formElement} bind:this={formElement}
enctype="multipart/form-data" enctype="multipart/form-data"
use:enhance={() => { use:enhance={({ formData }) => {
submitting = true; submitting = true;
return async ({ update, formData }) => { // Append the image file BEFORE submission (in the outer function)
// Append the image file if one was selected
if (selected_image_file) { if (selected_image_file) {
formData.append('recipe_image', selected_image_file); formData.append('recipe_image', selected_image_file);
} }
return async ({ update }) => {
await update(); await update();
submitting = false; submitting = false;
}; };