Fixed issue with upload in Studio (#7609)

* Fixed issue with scene save due to thumbnail upload

* Fixed issue with file browser upload in studio

Author: hanzlamateen

packages/client-core/src/common/services/FileBrowserService.ts

@@ -93,9 +93,6 @@ export const FileBrowserService = {
       .get(directory, params)) as Paginated<FileContentType>
     dispatchAction(FileBrowserAction.filesFetched({ files }))
   },
-  putContent: async (fileName: string, path: string, body: Buffer, contentType: string) => {
-    return API.instance.client.service('file-browser').patch(null, { fileName, path, body, contentType })
-  },
   moveContent: async (oldName: string, newName: string, oldPath: string, newPath: string, isCopy = false) => {
     return API.instance.client.service('file-browser').update(null, { oldName, newName, oldPath, newPath, isCopy })
   },

packages/editor/src/components/assets/FileBrowserContentPanel.tsx

@@ -11,6 +11,7 @@ import {
   FILES_PAGE_LIMIT,
   useFileBrowserState
 } from '@xrengine/client-core/src/common/services/FileBrowserService'
+import { uploadToFeathersService } from '@xrengine/client-core/src/util/upload'
 import { processFileName } from '@xrengine/common/src/utils/processFileName'
 import { KTX2EncodeArguments } from '@xrengine/engine/src/assets/constants/CompressionParms'
 import { KTX2EncodeDefaultArguments } from '@xrengine/engine/src/assets/constants/CompressionParms'
@@ -231,7 +232,11 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
             await FileBrowserService.addNewFolder(`${path}${file.name}`)
           } else {
             const name = processFileName(file.name)
-            await FileBrowserService.putContent(name, path, file as any, file.type)
+            await uploadToFeathersService('file-browser/upload', [file], {
+              fileName: name,
+              path,
+              contentType: file.type
+            }).promise
           }
         })
       )

packages/editor/src/functions/sceneFunctions.tsx

@@ -1,6 +1,7 @@
 import i18n from 'i18next'
 
 import { API } from '@xrengine/client-core/src/API'
+import { uploadToFeathersService } from '@xrengine/client-core/src/util/upload'
 import { SceneData } from '@xrengine/common/src/interfaces/SceneInterface'
 import multiLogger from '@xrengine/common/src/logger'
 import { serializeWorld } from '@xrengine/engine/src/scene/functions/serializeWorld'
@@ -79,14 +80,14 @@ export const saveScene = async (
 ) => {
   if (signal.aborted) throw new Error(i18n.t('editor:errors.saveProjectAborted'))
 
-  const thumbnailBuffer = thumbnailBlob ? await thumbnailBlob.arrayBuffer() : undefined
-
-  if (signal.aborted) throw new Error(i18n.t('editor:errors.saveProjectAborted'))
-
   const sceneData = serializeWorld()
 
   try {
-    return await API.instance.client.service('scene').update(projectName, { sceneName, sceneData, thumbnailBuffer })
+    return await uploadToFeathersService('scene/upload', thumbnailBlob ? [thumbnailBlob] : [], {
+      projectName,
+      sceneName,
+      sceneData
+    }).promise
   } catch (error) {
     logger.error(error, 'Error in saving project')
     throw error

packages/server-core/src/projects/scene/scene.hooks.ts

@@ -1,3 +1,5 @@
+import { iff, isProvider } from 'feathers-hooks-common'
+
 import authenticate from '../../hooks/authenticate'
 import projectPermissionAuthenticate from '../../hooks/project-permission-authenticate'
 import setResponseStatusCode from '../../hooks/set-response-status-code'
@@ -9,7 +11,7 @@ export default {
     find: [],
     get: [],
     create: [verifyScope('editor', 'write'), projectPermissionAuthenticate(false)],
-    update: [verifyScope('editor', 'write'), projectPermissionAuthenticate(false)],
+    update: [iff(isProvider('external'), verifyScope('editor', 'write') as any), projectPermissionAuthenticate(false)],
     patch: [verifyScope('editor', 'write'), projectPermissionAuthenticate(false)],
     remove: [verifyScope('editor', 'write'), projectPermissionAuthenticate(false)]
   },

packages/server-core/src/projects/scene/scene.service.ts

@@ -1,9 +1,12 @@
 import { Params } from '@feathersjs/feathers'
+import express from 'express'
+import multer from 'multer'
 
 import { SceneData } from '@xrengine/common/src/interfaces/SceneInterface'
 
 import { Application, ServerMode } from '../../../declarations'
 import { getStorageProvider } from '../../media/storageprovider/storageprovider'
+import { UploadParams } from '../../media/upload-asset/upload-asset.service'
 import { getActiveInstancesForScene } from '../../networking/instance/instance.service'
 import logger from '../../ServerLogger'
 import { getAllPortals, getEnvMapBake, getPortal } from './scene-helper'
@@ -14,6 +17,9 @@ import hooks from './scene.hooks'
 declare module '@xrengine/common/declarations' {
   interface ServiceTypes {
     scene: Scene
+    'scene/upload': {
+      create: ReturnType<typeof uploadScene>
+    }
   }
   interface ServiceTypes {
     portal: {
@@ -29,6 +35,24 @@ declare module '@xrengine/common/declarations' {
   }
 }
 
+export const uploadScene = (app: Application) => async (data: any, params: UploadParams) => {
+  if (typeof data === 'string') data = JSON.parse(data)
+  if (typeof data.sceneData === 'string') data.sceneData = JSON.parse(data.sceneData)
+
+  const thumbnailBuffer = params.files.length > 0 ? params.files[0].buffer : undefined
+
+  const { projectName, sceneName, sceneData, storageProviderName } = data
+
+  const result = await app
+    .service('scene')
+    .update(projectName, { sceneName, sceneData, storageProviderName, thumbnailBuffer })
+
+  // Clear params otherwise all the files and auth details send back to client as response
+  for (const prop of Object.getOwnPropertyNames(params)) delete params[prop]
+
+  return result
+}
+
 export interface SceneParams extends Params {
   metadataOnly: boolean
 }
@@ -95,6 +119,8 @@ export const getAllScenes = (app: Application) => {
   }
 }
 
+const multipartMiddleware = multer({ limits: { fieldSize: Infinity, files: 1 } })
+
 export default (app: Application) => {
   /**
    * Initialize our service with any options it requires and docs
@@ -104,6 +130,21 @@ export default (app: Application) => {
 
   app.use('scene', event)
 
+  app.use(
+    'scene/upload',
+    multipartMiddleware.any(),
+    (req: express.Request, res: express.Response, next: express.NextFunction) => {
+      if (req?.feathers && req.method !== 'GET') {
+        ;(req as any).feathers.files = (req as any).files.media ? (req as any).files.media : (req as any).files
+      }
+
+      next()
+    },
+    {
+      create: uploadScene(app)
+    }
+  )
+
   app.use('scene-data', {
     get: getScenesForProject(app),
     find: getAllScenes(app)