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 ca468d8ba7
commit b0fbebd326
3 changed files with 12 additions and 48 deletions
@@ -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;
};
}}
@@ -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;
};