Merge pull request #273 from DevinoSolutions/271-uploading-3d-files-not-working-as-expected

271 uploading 3d files not working as expected

Author: MedAmine1212

README.md

@@ -111,11 +111,7 @@ app.post('/api/upload-token', async (req, res) => {
             enableAutoCorsConfig,
         })
 
-        return res.status(200).json({
-            data: presignedData,
-            message: 'Upload successful!',
-            error: false,
-        })
+        return res.status(200).json(presignedData)
     } catch (error) {
         return res.status(500).json({
             message: (error as Error).message,

package.json

@@ -2,7 +2,7 @@
     "name": "upup-react-file-uploader",
     "author": "Devino Solutions",
     "license": "MIT",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "publishConfig": {
         "access": "public"
     },
@@ -57,8 +57,8 @@
     ],
     "scripts": {
         "start": "pnpm run prebuild && tsdx watch",
-        "build:browser": "tsdx build --entry ./src/index.browser.ts --tsconfig ./tsconfig.browser.json --format esm,cjs --name browser",
-        "build:node": "tsdx build --entry ./src/index.node.ts --tsconfig ./tsconfig.node.json --format cjs --name node",
+        "build:browser": "tsdx build --no-minify --entry ./src/index.browser.ts --tsconfig ./tsconfig.browser.json --format esm,cjs --name browser",
+        "build:node": "tsdx build --no-minify --entry ./src/index.node.ts --tsconfig ./tsconfig.node.json --format cjs --name node",
         "build": "node scripts/build.js",
         "test": "jest",
         "test:watch": "jest --watch",
@@ -193,7 +193,9 @@
             "jsdom": "22.1.0",
             "node-notifier": "10.0.1",
             "node-fetch": "2.6.7",
-            "rollup": "^3.29.4"
+            "rollup": "^3.29.4",
+            "terser": "^5.39.0",
+            "rollup-plugin-terser": "7.0.2"
         }
     }
 }

pnpm-lock.yaml

@@ -2,15 +2,22 @@ import checkFileType from '../../shared/lib/checkFileType'
 
 const JPEGImage = {
     type: 'image/jpeg',
+    name: 'test.jpg',
 } as File
+
 const PNGImage = {
     type: 'image/png',
+    name: 'test.png',
 } as File
+
 const GIFImage = {
     type: 'image/gif',
+    name: 'test.gif',
 } as File
+
 const PDFFile = {
     type: 'application/pdf',
+    name: 'test.pdf',
 } as File
 
 describe('checkFileType', () => {

src/__tests__/shared/checkFileType.test.ts

@@ -104,6 +104,7 @@ export default memo(
                         fileName={fileName}
                         fileUrl={fileUrl}
                         showIcon={files.size > 1}
+                        classNames={classNames}
                     />
                 </ShouldRender>
                 <button

src/frontend/components/FilePreview.tsx

@@ -1,5 +1,6 @@
 import React, { Dispatch, SetStateAction, memo, useMemo } from 'react'
-import { fileGetExtension } from '../lib/file'
+import { UpupUploaderPropsClassNames } from '../../shared/types'
+import { fileGetExtension, fileIs3D } from '../lib/file'
 import { cn } from '../lib/tailwind'
 import FileIcon from './FileIcon'
 import ShouldRender from './shared/ShouldRender'
@@ -11,6 +12,7 @@ type Props = {
     fileName: string
     fileUrl: string
     showIcon: boolean
+    classNames: UpupUploaderPropsClassNames
 }
 
 export default memo(
@@ -21,12 +23,29 @@ export default memo(
         fileName,
         fileType,
         showIcon,
+        classNames,
     }: Props) {
         const extension = useMemo(
             () => fileGetExtension(fileType, fileName),
             [fileType, fileName],
         )
 
+        // New check for 3D
+        const is3D = useMemo(() => {
+            return fileIs3D(extension?.toLowerCase() || '')
+        }, [extension])
+
+        if (is3D) {
+            return (
+                <div className="flex flex-col items-center gap-2">
+                    <FileIcon
+                        extension={extension}
+                        className={classNames.fileIcon}
+                    />
+                </div>
+            )
+        }
+
         return (
             <>
                 <ShouldRender if={!canPreview}>
@@ -42,12 +61,17 @@ export default memo(
                     </object>
                     <FileIcon extension={extension} />
                 </ShouldRender>
+
                 <ShouldRender if={canPreview}>
                     <FileIcon
                         extension={extension}
-                        className={cn('@cs/main:hidden', {
-                            hidden: !showIcon,
-                        })}
+                        className={cn(
+                            '@cs/main:hidden',
+                            {
+                                hidden: !showIcon,
+                            },
+                            classNames.fileIcon,
+                        )}
                     />
                     <div
                         className={cn('relative h-full w-full', {
@@ -69,7 +93,6 @@ export default memo(
             </>
         )
     },
-    // Custom comparison function for props
     (prev, next) =>
         prev.canPreview === next.canPreview &&
         prev.fileType === next.fileType &&

src/frontend/components/FilePreviewThumbnail.tsx

@@ -101,10 +101,39 @@ export function fileGetIsImage(fileType: string) {
 }
 
 export function fileGetExtension(fileType: string, fileName: string) {
+    if (!fileType) {
+        return fileName.split('.').pop()?.toLowerCase() || ''
+    }
     const typeSplit = fileType.split('/')
     const nameSplit = fileName.split('.')
+    const lastNamePart = nameSplit[nameSplit.length - 1]?.toLowerCase() || ''
+    if (!typeSplit[1]) {
+        return lastNamePart
+    }
+    if (typeSplit[1].includes('.')) {
+        return lastNamePart
+    }
+    return typeSplit[1].toLowerCase()
+}
 
-    return typeSplit[1]?.includes('.')
-        ? nameSplit[nameSplit.length - 1]
-        : typeSplit[1]
+export function fileIs3D(ext: string) {
+    const threeDExtensions = [
+        '3ds',
+        '3dm',
+        'blend',
+        'dxf',
+        'dwg',
+        'c4d',
+        'ma',
+        'mb',
+        'ply',
+        'stl',
+        'fbx',
+        'obj',
+        'dae',
+        'gltf',
+        'glb',
+        'm3',
+    ]
+    return threeDExtensions.includes(ext.toLowerCase())
 }

src/frontend/components/FileViewerUnsupported.tsx

@@ -203,12 +203,12 @@ export class ProviderSDK implements StorageSDK {
 
             if (
                 accept &&
-                !/^(\*\/\*|\*|[\w-]+\/[\w+.-]+)(,(\*\/\*|\*|[\w-]+\/[\w+.-]+))*$/.test(
+                !/^(\*\/\*|\*|[\w-]+\/(?:[\w+.-]+|\*)|\.[\w+.-]+)(,\s*(\*\/\*|\*|[\w-]+\/(?:[\w+.-]+|\*)|\.[\w+.-]+))*$/.test(
                     accept,
                 )
             ) {
                 throw new UploadError(
-                    `Invalid accept format: ${accept}. Use MIME types, */*, or *`,
+                    `Invalid accept format: ${accept}. Use MIME types, */*, * or extensions (like .fbx)`,
                     UploadErrorType.FILE_VALIDATION_ERROR,
                 )
             }