bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: convert extracted image blob to base64 before sending to API

Browse Source 
The extracted image blob from AI extraction was not being sent to the backend
because Blob objects cannot be JSON serialized. Fixed by:

1. Converting Blob to base64 before sending to API
2. Renaming fields: extractedImageBlob → extracted_image_bytes, imageProcessing → image_processing
3. Removing Blob from local DB (keep original data structure for IndexedDB)
4. Applying same fix to both single item and batch update flows

This ensures the auto-photo-save feature receives the image data it needs.
This commit is contained in:
Daniel Bedeleanu
2026-04-21 19:53:53 +03:00
parent f72b976c33
commit cbfd7232ca
3 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/app/page.tsx
View File

@@ -167,13 +167,35 @@ export default function Home() {
if (itemData.part_number) {
itemData.part_number = itemData.part_number.toLowerCase();
}
// 1. Add to local DB cache
// Prepare data for backend: convert Blob to base64 and rename fields
const backendData = { ...itemData };
delete backendData.extractedImageBlob; // Remove Blob from local DB version
// If extracted image blob is present, convert to base64 for backend
if (itemData.extractedImageBlob) {
const reader = new FileReader();
reader.readAsDataURL(itemData.extractedImageBlob);
await new Promise((resolve, reject) => {
reader.onload = () => {
const base64 = (reader.result as string).split(',')[1]; // Remove data URL prefix
backendData.extracted_image_bytes = base64;
backendData.image_processing = itemData.imageProcessing; // Use correct field name for API
delete backendData.imageProcessing; // Remove old field name
resolve(null);
};
reader.onerror = reject;
});
}
// 1. Add to local DB cache (without Blob)
await db.items.add(itemData);
// 2. If online, try to push to backend immediately
if (isOnline && currentUser) {
try {
await inventoryApi.createItem(currentUser.id, itemData);
await inventoryApi.createItem(currentUser.id, backendData);
toast.success("Item saved to cloud catalog!");
setShowOnboarding(false);
await loadInventory();
@@ -186,7 +208,7 @@ export default function Home() {
const detail = responseData.detail;
setComparisonModal({
show: true,
newItem: itemData,
newItem: backendData,
existingItem: detail.existing_item,
existingId: detail.existing_id
});
@@ -215,8 +237,28 @@ export default function Home() {
if (!comparisonModal.existingId) return;
setComparisonLoading(true);
try {
// Prepare data: convert Blob to base64 if present
const updateData = { ...comparisonModal.newItem };
if (updateData.extractedImageBlob) {
const reader = new FileReader();
reader.readAsDataURL(updateData.extractedImageBlob);
await new Promise((resolve, reject) => {
reader.onload = () => {
const base64 = (reader.result as string).split(',')[1];
updateData.extracted_image_bytes = base64;
updateData.image_processing = updateData.imageProcessing;
delete updateData.extractedImageBlob;
delete updateData.imageProcessing;
resolve(null);
};
reader.onerror = reject;
});
}
// Update existing item
await inventoryApi.updateItem(comparisonModal.existingId, comparisonModal.newItem);
await inventoryApi.updateItem(comparisonModal.existingId, updateData);
toast.success("Item updated successfully!");
setComparisonModal({ show: false, newItem: null, existingItem: null, existingId: null });
setShowOnboarding(false);