@betterstart/cli 0.1.48 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstart/cli",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "Scaffold a full-featured CMS into any Next.js 16 application",
   "type": "module",
   "main": "./dist/index.js",

package/templates/ui/media-upload-field.tsx

@@ -25,34 +25,50 @@ const IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'imag
 const VIDEO_TYPES = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo']
 const MEDIA_TYPES = [...IMAGE_TYPES, ...VIDEO_TYPES]
 
+const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|avif|ico|bmp|tiff?)($|\?)/i
+const VIDEO_EXTENSIONS = /\.(mp4|webm|ogg|mov|avi|mkv|m4v)($|\?)/i
+
 /**
- * Detect if a URL or file is an image or video based on extension or MIME type
+ * Check if an accept string only allows non-media file types (documents, archives, etc.)
  */
-function getMediaType(urlOrMime: string): 'image' | 'video' | 'unknown' {
+function isDocumentOnlyAccept(accept: string): boolean {
+  if (!accept || accept === 'image/*,video/*' || accept === '*/*' || accept === '*') return false
+  const types = accept.split(',').map((t) => t.trim().toLowerCase())
+  return types.every(
+    (t) =>
+      !t.startsWith('image/') &&
+      !t.startsWith('video/') &&
+      !IMAGE_EXTENSIONS.test(t) &&
+      !VIDEO_EXTENSIONS.test(t)
+  )
+}
+
+/**
+ * Detect if a URL or MIME type represents an image, video, or other file type
+ */
+function getMediaType(urlOrMime: string): 'image' | 'video' | 'document' {
   const lower = urlOrMime.toLowerCase()
 
-  // Check for video MIME types or extensions
   if (
     VIDEO_TYPES.some((type) => lower.includes(type)) ||
-    /\.(mp4|webm|ogg|mov|avi|mkv)($|\?)/.test(lower)
+    VIDEO_EXTENSIONS.test(lower)
   ) {
     return 'video'
   }
 
-  // Check for image MIME types or extensions
   if (
     IMAGE_TYPES.some((type) => lower.includes(type)) ||
-    /\.(jpg|jpeg|png|gif|webp|svg)($|\?)/.test(lower)
+    IMAGE_EXTENSIONS.test(lower)
   ) {
     return 'image'
   }
 
-  return 'unknown'
+  return 'document'
 }
 
 /**
  * Media upload field component with R2 integration
- * Supports both images and videos
+ * Supports images, videos, and document files (PDF, DOC, etc.)
  * Designed for use in forms with react-hook-form
  */
 export function MediaUploadField({
@@ -68,9 +84,11 @@ export function MediaUploadField({
 }: MediaUploadFieldProps) {
   const fileInputRef = React.useRef<HTMLInputElement>(null)
   const [previewUrl, setPreviewUrl] = React.useState<string | null>(value || null)
-  const [mediaType, setMediaType] = React.useState<'image' | 'video' | 'unknown'>(
-    value ? getMediaType(value) : 'unknown'
-  )
+  const [fileName, setFileName] = React.useState<string | null>(null)
+  const [mediaType, setMediaType] = React.useState<'image' | 'video' | 'document'>(() => {
+    if (isDocumentOnlyAccept(accept)) return 'document'
+    return value ? getMediaType(value) : 'document'
+  })
 
   const { upload, mutation, progress } = useUpload({
     validationConfig: {
@@ -88,14 +106,19 @@ export function MediaUploadField({
         const uploadedUrl = result.files[0].url
         onChange(uploadedUrl)
         setPreviewUrl(uploadedUrl)
-        setMediaType(getMediaType(uploadedUrl))
-        toast.success('Media uploaded successfully')
+        if (!isDocumentOnlyAccept(accept)) {
+          setMediaType(getMediaType(uploadedUrl))
+        }
+        toast.success('File uploaded successfully')
       } else {
         const errorMsg = result.error || 'Upload failed'
         toast.error(errorMsg)
         console.error('Upload failed:', errorMsg)
         setPreviewUrl(value || null)
-        setMediaType(value ? getMediaType(value) : 'unknown')
+        setFileName(null)
+        if (!isDocumentOnlyAccept(accept)) {
+          setMediaType(value ? getMediaType(value) : 'document')
+        }
       }
     },
     onError: (error) => {
@@ -103,7 +126,10 @@ export function MediaUploadField({
       toast.error(errorMsg)
       console.error('Upload error:', error)
       setPreviewUrl(value || null)
-      setMediaType(value ? getMediaType(value) : 'unknown')
+      setFileName(null)
+      if (!isDocumentOnlyAccept(accept)) {
+        setMediaType(value ? getMediaType(value) : 'document')
+      }
     },
     prefix: 'media'
   })
@@ -120,14 +146,19 @@ export function MediaUploadField({
       return
     }
 
-    try {
-      const localPreview = URL.createObjectURL(file)
-      setPreviewUrl(localPreview)
-      setMediaType(getMediaType(file.type))
-    } catch (error) {
-      console.error('[MediaUploadField] Failed to create preview:', error)
-      toast.error('Failed to preview media')
-      return
+    setFileName(file.name)
+
+    const detectedType = isDocumentOnlyAccept(accept) ? 'document' : getMediaType(file.type)
+    setMediaType(detectedType)
+
+    if (detectedType === 'image' || detectedType === 'video') {
+      try {
+        setPreviewUrl(URL.createObjectURL(file))
+      } catch {
+        setPreviewUrl(file.name)
+      }
+    } else {
+      setPreviewUrl(file.name)
     }
 
     upload([file])
@@ -135,7 +166,8 @@ export function MediaUploadField({
 
   const handleRemove = () => {
     setPreviewUrl(null)
-    setMediaType('unknown')
+    setFileName(null)
+    setMediaType(isDocumentOnlyAccept(accept) ? 'document' : 'document')
     onChange('')
     mutation.reset()
     if (fileInputRef.current) {
@@ -150,6 +182,10 @@ export function MediaUploadField({
   const isUploading = mutation.isPending
   const uploadProgress = progress[0]?.progress || 0
 
+  const displayName =
+    fileName ||
+    (previewUrl ? decodeURIComponent(previewUrl.split('/').pop()?.split('?')[0] || 'Uploaded file') : 'Uploaded file')
+
   return (
     <div className={cn('space-y-2', className)}>
       {label && (
@@ -192,10 +228,10 @@ export function MediaUploadField({
               <div className="flex items-center gap-3 p-4">
                 <FileText className="size-8 text-muted-foreground shrink-0" />
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm font-medium truncate">
-                    {previewUrl.split('/').pop()?.split('?')[0] || 'Uploaded file'}
+                  <p className="text-sm font-medium truncate">{displayName}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {isUploading ? 'Uploading...' : 'File uploaded'}
                   </p>
-                  <p className="text-xs text-muted-foreground">File uploaded</p>
                 </div>
               </div>
             )}