feat(appstream): Upload an app from appStream page

api/src/routes/appStream/appStreamHtml.ts

@@ -1,27 +1,6 @@
 import { AppStreamConfig } from '../../types'
-
+import { script } from './script'
-const style = `<style>
+import { style } from './style'
-* {
-  font-family: 'Roboto', sans-serif;
-}
-.app-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: center;
-}
-.app-container .app {
-  width: 150px;
-  margin: 10px;
-  overflow: hidden;
-  text-align: center;
-}
-.app-container .app img{
-  width: 100%;
-  margin-bottom: 10px;
-  border-radius: 10px;
-}
-</style>`
 
 const defaultAppLogo = '/sasjs-logo.svg'
 
@@ -52,6 +31,14 @@ export const appStreamHtml = (appStreamConfig: AppStreamConfig) => `
           singleAppStreamHtml(streamServiceName, entry.appLoc, entry.streamLogo)
         )
         .join('')}
+        <a class="app" title="Upload build.json">
+          <input id="fileId" type="file" hidden />
+          <button id="uploadButton" style="margin-bottom: 5px; cursor: pointer">
+            <img src="/plus.png" />
+          </button>
+          <span id="uploadMessage">Upload New App</span>
+        </a>
     </div>
+    ${script}
   </body>
 </html>`

api/src/routes/appStream/script.ts

@@ -0,0 +1,58 @@
+export const script = `<script>
+  const inputElement = document.getElementById('fileId')
+
+  document
+    .getElementById('uploadButton')
+    .addEventListener('click', function () {
+      inputElement.click()
+    })
+
+  inputElement.addEventListener(
+    'change',
+    function () {
+      const fileList = this.files /* now you can work with the file list */
+
+      updateFileUploadMessage('Requesting ...')
+
+      const file = fileList[0]
+      const formData = new FormData()
+
+      formData.append('file', file)
+      fetch('/SASjsApi/drive/deploy/upload', {
+        method: 'POST',
+        body: formData
+      })
+        .then(async (res) => {
+          const { status, ok } = res
+          if (status === 200 && ok) {
+            const data = await res.json()
+            return (
+              data.message +
+              '\\nstreamServiceName: ' +
+              data.streamServiceName +
+              '\\nrefreshing page once alert box closes.'
+            )
+          }
+          throw await res.text()
+        })
+        .then((message) => {
+          alert(message)
+          location.reload()
+        })
+        .catch((error) => {
+          alert(error)
+          resetFileUpload()
+          updateFileUploadMessage('Upload New App')
+        })
+    },
+    false
+  )
+
+  function updateFileUploadMessage(message) {
+    document.getElementById('uploadMessage').innerHTML = message
+  }
+
+  function resetFileUpload() {
+    inputElement.value = null
+  }
+</script>`

api/src/routes/appStream/style.ts

@@ -0,0 +1,22 @@
+export const style = `<style>
+* {
+  font-family: 'Roboto', sans-serif;
+}
+.app-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+.app-container .app {
+  width: 150px;
+  margin: 10px;
+  overflow: hidden;
+  text-align: center;
+}
+.app-container .app img{
+  width: 100%;
+  margin-bottom: 10px;
+  border-radius: 10px;
+}
+</style>`