debug: add client-side logging for recipe image upload
All checks were successful
CI / update (push) Successful in 1m22s
All checks were successful
CI / update (push) Successful in 1m22s
Add console logging in the browser to track image selection and form submission: - Log when user selects an image file in CardAdd component - Log file validation steps (MIME type, size) - Log form submission and FormData preparation - Log whether image is being appended to form This helps diagnose if the issue is client-side (image not selected/sent) or server-side (image not received/processed).
This commit is contained in:
@@ -60,7 +60,16 @@ let upload_error = $state("");
|
|||||||
*/
|
*/
|
||||||
export async function show_local_image(){
|
export async function show_local_image(){
|
||||||
const file = this.files[0];
|
const file = this.files[0];
|
||||||
if (!file) return;
|
if (!file) {
|
||||||
|
console.log('[CardAdd] No file selected');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[CardAdd] File selected:', {
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
type: file.type
|
||||||
|
});
|
||||||
|
|
||||||
// Client-side validation
|
// Client-side validation
|
||||||
const allowed_mime_types = ['image/webp', 'image/jpeg', 'image/jpg', 'image/png'];
|
const allowed_mime_types = ['image/webp', 'image/jpeg', 'image/jpg', 'image/png'];
|
||||||
@@ -69,24 +78,30 @@ export async function show_local_image(){
|
|||||||
// Validate MIME type
|
// Validate MIME type
|
||||||
if(!allowed_mime_types.includes(file.type)) {
|
if(!allowed_mime_types.includes(file.type)) {
|
||||||
upload_error = 'Invalid file type. Please upload a JPEG, PNG, or WebP image.';
|
upload_error = 'Invalid file type. Please upload a JPEG, PNG, or WebP image.';
|
||||||
|
console.error('[CardAdd] Invalid MIME type:', file.type);
|
||||||
alert(upload_error);
|
alert(upload_error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log('[CardAdd] MIME type valid:', file.type);
|
||||||
|
|
||||||
// Validate file size
|
// Validate file size
|
||||||
if(file.size > max_size) {
|
if(file.size > max_size) {
|
||||||
upload_error = `File too large. Maximum size is 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`;
|
upload_error = `File too large. Maximum size is 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`;
|
||||||
|
console.error('[CardAdd] File too large:', file.size);
|
||||||
alert(upload_error);
|
alert(upload_error);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log('[CardAdd] File size valid:', file.size, 'bytes');
|
||||||
|
|
||||||
// Show preview and store file for later upload
|
// Show preview and store file for later upload
|
||||||
image_preview_url = URL.createObjectURL(file);
|
image_preview_url = URL.createObjectURL(file);
|
||||||
selected_image_file = file;
|
selected_image_file = file;
|
||||||
upload_error = "";
|
upload_error = "";
|
||||||
|
console.log('[CardAdd] Image preview created and file stored for upload');
|
||||||
}
|
}
|
||||||
|
|
||||||
export function remove_selected_images(){
|
export function remove_selected_images(){
|
||||||
|
console.log('[CardAdd] Removing selected image');
|
||||||
image_preview_url = "";
|
image_preview_url = "";
|
||||||
selected_image_file = null;
|
selected_image_file = null;
|
||||||
upload_error = "";
|
upload_error = "";
|
||||||
|
|||||||
@@ -294,12 +294,24 @@ button.action_button {
|
|||||||
enctype="multipart/form-data"
|
enctype="multipart/form-data"
|
||||||
use:enhance={() => {
|
use:enhance={() => {
|
||||||
submitting = true;
|
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 }) => {
|
return async ({ update, formData }) => {
|
||||||
// Append the image file if one was selected
|
// 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...');
|
||||||
await update();
|
await update();
|
||||||
|
console.log('[RecipeAdd:Client] Form submission complete');
|
||||||
submitting = false;
|
submitting = false;
|
||||||
};
|
};
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user