{loading ? (
@@ -234,12 +245,13 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
// --- Helpers ---
-type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'unsupported';
+type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'stl' | 'unsupported';
function getPreviewType(file: { name: string; mime_type: string }): PreviewType {
const ext = file.name.split('.').pop()?.toLowerCase() || '';
if (ext === 'pdf' || file.mime_type === 'application/pdf') return 'pdf';
+ if (ext === 'stl' || file.mime_type === 'model/stl') return 'stl';
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) return 'image';
if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video'; // Only browser-supported videos
if (['mp3', 'wav', 'flac', 'm4a', 'aac'].includes(ext)) return 'audio';
diff --git a/frontend/src/components/StlPreview.tsx b/frontend/src/components/StlPreview.tsx
new file mode 100644
index 0000000..4021add
--- /dev/null
+++ b/frontend/src/components/StlPreview.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { StlViewer } from 'react-19-stl-viewer';
+import { Loader2 } from 'lucide-react';
+
+interface StlPreviewProps {
+ url: string;
+}
+
+export default function StlPreview({ url }: StlPreviewProps) {
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState
(null);
+
+ return (
+
+ {loading && !error && (
+
+
+ Loading 3D Model...
+
+ )}
+
+ {error && (
+
+
+
Failed to load STL file
+
{error.message}
+
+ )}
+
+
+ setLoading(false)}
+ onError={(err) => {
+ console.error('STL Load Error:', err);
+ setError(err);
+ setLoading(false);
+ }}
+ modelProps={{ color: '#007BFF' }}
+ floorProps={{ gridWidth: 100, gridLength: 100 }}
+ />
+
+