Merge pull request #1293 from Budibase/browser-compat

Browser compat

packages/builder/src/builderStore/api.js

@@ -7,9 +7,10 @@ const apiCall = method => async (
   headers = { "Content-Type": "application/json" }
 ) => {
   headers["x-budibase-app-id"] = svelteGet(store).appId
+  const json = headers["Content-Type"] === "application/json"
   return await fetch(url, {
     method: method,
-    body: body && JSON.stringify(body),
+    body: json ? JSON.stringify(body) : body,
     headers,
   })
 }

packages/builder/src/components/common/Dropzone.svelte

@@ -15,18 +15,11 @@
   }
 
   async function processFiles(fileList) {
-    const fileArray = Array.from(fileList)
-
-    const filesToProcess = fileArray.map(({ name, path, size, type }) => ({
-      name,
-      path,
-      size,
-      type,
-    }))
-
-    const response = await api.post(`/api/attachments/process`, {
-      files: filesToProcess,
-    })
+    let data = new FormData()
+    for (let i = 0; i < fileList.length; i++) {
+      data.append("file", fileList[i])
+    }
+    const response = await api.post(`/api/attachments/process`, data, {})
     return await response.json()
   }
 </script>

packages/builder/src/components/start/CreateAppModal.svelte

@@ -123,13 +123,19 @@
   async function createNewApp() {
     submitting = true
     try {
+      // Create form data to create app
+      let data = new FormData()
+      data.append("name", $createAppStore.values.applicationName)
+      data.append("useTemplate", template != null)
+      if (template) {
+        data.append("templateName", template.name)
+        data.append("templateKey", template.key)
+        data.append("templateFile", template.file)
+      }
+
       // Create App
-      const appResp = await post("/api/applications", {
-        name: $createAppStore.values.applicationName,
-        template,
-      })
+      const appResp = await post("/api/applications", data, {})
       const appJson = await appResp.json()
-
       if (!appResp.ok) {
         throw new Error(appJson.message)
       }

packages/builder/src/components/start/Steps/Info.svelte

@@ -1,6 +1,5 @@
 <script>
   import { Label, Heading, Input } from "@budibase/bbui"
-  import Dropzone from "components/common/Dropzone.svelte"
 
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
@@ -20,8 +19,8 @@
       )
       return
     }
-    file = fileArray[0]
-    template.fileImportPath = file.path
+    file = evt.target.files[0]
+    template.file = file
   }
 </script>
 

packages/server/src/api/controllers/application.js

@@ -91,7 +91,6 @@ async function getAppUrlIfNotInUse(ctx) {
 
 async function createInstance(template) {
   const appId = generateAppID()
-
   const db = new CouchDB(appId)
   await db.put({
     _id: "_design/database",
@@ -106,10 +105,10 @@ async function createInstance(template) {
   // replicate the template data to the instance DB
   // this is currently very hard to test, downloading and importing template files
   /* istanbul ignore next */
-  if (template) {
+  if (template && template.useTemplate === "true") {
     let dbDumpReadStream
-    if (template.fileImportPath) {
-      dbDumpReadStream = fs.createReadStream(template.fileImportPath)
+    if (template.file) {
+      dbDumpReadStream = fs.createReadStream(template.file.path)
     } else {
       const templatePath = await downloadTemplate(...template.key.split("/"))
       dbDumpReadStream = fs.createReadStream(
@@ -162,8 +161,17 @@ exports.fetchAppPackage = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
+  const { useTemplate, templateKey } = ctx.request.body
+  const instanceConfig = {
+    useTemplate,
+    key: templateKey,
+  }
+  if (ctx.request.files && ctx.request.files.templateFile) {
+    instanceConfig.file = ctx.request.files.templateFile
+  }
+  const instance = await createInstance(instanceConfig)
+
   const url = await getAppUrlIfNotInUse(ctx)
-  const instance = await createInstance(ctx.request.body.template)
   const appId = instance._id
   const version = packageJson.version
   const newApplication = {

packages/server/src/api/controllers/static/index.js

@@ -152,26 +152,6 @@ async function processLocalFileUploads({ files, outputPath, appId }) {
   return processedFiles
 }
 
-exports.performLocalFileProcessing = async function(ctx) {
-  const { files } = ctx.request.body
-
-  const processedFileOutputPath = resolve(
-    budibaseAppsDir(),
-    ctx.user.appId,
-    "attachments"
-  )
-
-  try {
-    ctx.body = await processLocalFileUploads({
-      files,
-      outputPath: processedFileOutputPath,
-      appId: ctx.user.appId,
-    })
-  } catch (err) {
-    ctx.throw(500, err)
-  }
-}
-
 exports.serveApp = async function(ctx) {
   let appId = ctx.params.appId
   if (env.SELF_HOSTED) {

packages/server/src/api/routes/static.js

@@ -29,11 +29,7 @@ if (env.SELF_HOSTED) {
 }
 
 router
-  .post(
-    "/api/attachments/process",
-    authorized(BUILDER),
-    controller.performLocalFileProcessing
-  )
+  .post("/api/attachments/process", authorized(BUILDER), controller.uploadFile)
   .post("/api/attachments/upload", usage, controller.uploadFile)
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)