fix(back-end): 3mf preview

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -8,8 +8,8 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { forkJoin } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { forkJoin, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
 import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.component';
@@ -128,15 +128,18 @@ export class CalculatorPageComponent implements OnInit {
 
     // Download all files
     const downloads = items.map((item) =>
-      this.estimator.getLineItemContent(session.id, item.id).pipe(
-        map((blob: Blob) => {
+      forkJoin({
+        originalBlob: this.estimator.getLineItemContent(session.id, item.id),
+        previewBlob: this.estimator
+          .getLineItemContent(session.id, item.id, true)
+          .pipe(catchError(() => of(null))),
+      }).pipe(
+        map(({ originalBlob, previewBlob }) => {
           return {
-            blob,
+            originalBlob,
+            previewBlob,
             fileName: item.originalFilename,
-            // We need to match the file object to the item so we can set colors ideally.
-            // UploadForm.setFiles takes File[].
-            // We might need to handle matching but UploadForm just pushes them.
-            // If order is preserved, we are good. items from backend are list.
+            hasConvertedPreview: !!item.convertedStoredPath,
           };
         }),
       ),
@@ -146,13 +149,25 @@ export class CalculatorPageComponent implements OnInit {
       next: (results: any[]) => {
         const files = results.map(
           (res) =>
-            new File([res.blob], res.fileName, {
+            new File([res.originalBlob], res.fileName, {
               type: 'application/octet-stream',
             }),
         );
 
         if (this.uploadForm) {
           this.uploadForm.setFiles(files);
+          results.forEach((res, index) => {
+            if (!res.hasConvertedPreview || !res.previewBlob) {
+              return;
+            }
+            const previewName = res.fileName
+              .replace(/\.[^.]+$/, '')
+              .concat('.stl');
+            const previewFile = new File([res.previewBlob], previewName, {
+              type: 'model/stl',
+            });
+            this.uploadForm.setPreviewFileByIndex(index, previewFile);
+          });
           this.uploadForm.patchSettings(session);
 
           // Also restore colors?
@@ -231,6 +246,17 @@ export class CalculatorPageComponent implements OnInit {
               queryParamsHandling: 'merge', // merge with existing params like 'mode' if any
               replaceUrl: true, // prevent cluttering history, or false if we want back button to work. replaceUrl seems safer for "state update"
             });
+            this.estimator.getQuoteSession(res.sessionId).subscribe({
+              next: (sessionData) => {
+                this.restoreFilesAndSettings(
+                  sessionData.session,
+                  sessionData.items || [],
+                );
+              },
+              error: (err) => {
+                console.warn('Failed to refresh files for preview', err);
+              },
+            });
           }
         }
       },

frontend/src/app/features/calculator/components/upload-form/upload-form.component.html

@@ -2,13 +2,13 @@
   <div class="section">
     @if (selectedFile()) {
       <div class="viewer-wrapper">
-        @if (!isStepFile(selectedFile())) {
+        @if (!canPreviewSelectedFile()) {
           <div class="step-warning">
             <p>{{ "CALC.STEP_WARNING" | translate }}</p>
           </div>
         } @else {
           <app-stl-viewer
-            [file]="selectedFile()"
+            [file]="getSelectedPreviewFile()"
             [color]="getSelectedFileColor()"
           >
           </app-stl-viewer>

frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts

@@ -32,6 +32,7 @@ import { getColorHex } from '../../../../core/constants/colors.const';
 
 interface FormItem {
   file: File;
+  previewFile?: File;
   quantity: number;
   color: string;
   filamentVariantId?: number;
@@ -96,12 +97,24 @@ export class UploadFormComponent implements OnInit {
 
   acceptedFormats = '.stl,.3mf,.step,.stp';
 
-  isStepFile(file: File | null): boolean {
+  isStlFile(file: File | null): boolean {
     if (!file) return false;
     const name = file.name.toLowerCase();
     return name.endsWith('.stl');
   }
 
+  canPreviewSelectedFile(): boolean {
+    return this.isStlFile(this.getSelectedPreviewFile());
+  }
+
+  getSelectedPreviewFile(): File | null {
+    const selected = this.selectedFile();
+    if (!selected) return null;
+    const item = this.items().find((i) => i.file === selected);
+    if (!item) return null;
+    return item.previewFile ?? item.file;
+  }
+
   constructor() {
     this.form = this.fb.group({
       itemsTouched: [false], // Hack to track touched state for custom items list
@@ -262,6 +275,7 @@ export class UploadFormComponent implements OnInit {
         const defaultSelection = this.getDefaultVariantSelection();
         validItems.push({
           file,
+          previewFile: this.isStlFile(file) ? file : undefined,
           quantity: 1,
           color: defaultSelection.colorName,
           filamentVariantId: defaultSelection.filamentVariantId,
@@ -390,6 +404,7 @@ export class UploadFormComponent implements OnInit {
     for (const file of files) {
       validItems.push({
         file,
+        previewFile: this.isStlFile(file) ? file : undefined,
         quantity: 1,
         color: defaultSelection.colorName,
         filamentVariantId: defaultSelection.filamentVariantId,
@@ -404,6 +419,16 @@ export class UploadFormComponent implements OnInit {
     }
   }
 
+  setPreviewFileByIndex(index: number, previewFile: File) {
+    if (!Number.isInteger(index) || index < 0) return;
+    this.items.update((current) => {
+      if (index >= current.length) return current;
+      const updated = [...current];
+      updated[index] = { ...updated[index], previewFile };
+      return updated;
+    });
+  }
+
   private getDefaultVariantSelection(): {
     colorName: string;
     filamentVariantId?: number;

frontend/src/app/features/calculator/services/quote-estimator.service.ts

@@ -416,10 +416,15 @@ export class QuoteEstimatorService {
   }
 
   // Session File Retrieval
-  getLineItemContent(sessionId: string, lineItemId: string): Observable<Blob> {
+  getLineItemContent(
+    sessionId: string,
+    lineItemId: string,
+    preview = false,
+  ): Observable<Blob> {
     const headers: any = {};
+    const previewQuery = preview ? '?preview=true' : '';
     return this.http.get(
-      `${environment.apiUrl}/api/quote-sessions/${sessionId}/line-items/${lineItemId}/content`,
+      `${environment.apiUrl}/api/quote-sessions/${sessionId}/line-items/${lineItemId}/content${previewQuery}`,
       {
         headers,
         responseType: 'blob',