Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Alexander Bocken
2026-01-20 19:36:56 +01:00
parent 0459ef26bc
commit 2b3aae8087
3 changed files with 12 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/routes/[recipeLang=recipeLang]/add/+page.svelte
View File

@@ -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;
};
}}

12
src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
View File

@@ -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;
};