Create files for available mimetypes in app provider

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -103,6 +103,23 @@
                     </oc-button>
                   </div>
                 </li>
+                <template v-if="mimeTypes">
+                  <li v-for="(mimetype, key) in mimetypesAllowedForCreation" :key="key">
+                    <div>
+                      <oc-button
+                        appearance="raw"
+                        justify-content="left"
+                        :class="['uk-width-1-1']"
+                        @click="showCreateResourceModal(false, mimetype.ext, false, true)"
+                      >
+                        <oc-icon :name="mimetype.icon || 'file'" />
+                        <translate :translate-params="{ name: mimetype.name }"
+                          >New %{name}</translate
+                        >
+                      </oc-button>
+                    </div>
+                  </li>
+                </template>
               </ul>
             </oc-drop>
           </template>
@@ -119,6 +136,7 @@
 import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
 import pathUtil from 'path'
 import { useRouter } from '../../composables'
+import get from 'lodash-es/get'
 
 import Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
@@ -158,11 +176,25 @@ export default {
     fileFolderCreationLoading: false
   }),
   computed: {
-    ...mapGetters(['getToken', 'configuration', 'newFileHandlers', 'quota', 'user']),
+    ...mapGetters('External', ['mimeTypes']),
+    ...mapGetters([
+      'getToken',
+      'capabilities',
+      'configuration',
+      'newFileHandlers',
+      'quota',
+      'user'
+    ]),
     ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'publicLinkPassword']),
     ...mapState(['route']),
     ...mapState('Files', ['areHiddenFilesShown']),
 
+    mimetypesAllowedForCreation() {
+      if (!get(this, 'mimeTypes', []).length) {
+        return []
+      }
+      return this.mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
+    },
     newButtonTooltip() {
       if (!this.canUpload) {
         return this.$gettext('You have no permission to upload!')
@@ -313,7 +345,12 @@ export default {
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),
 
-    showCreateResourceModal(isFolder = true, ext = 'txt', openAction = null) {
+    showCreateResourceModal(
+      isFolder = true,
+      ext = 'txt',
+      openAction = null,
+      addAppProviderFile = false
+    ) {
       const defaultName = isFolder
         ? this.$gettext('New folder')
         : this.$gettext('New file') + '.' + ext
@@ -340,7 +377,11 @@ export default {
           ? this.checkNewFolderName(defaultName)
           : this.checkNewFileName(defaultName),
         onCancel: this.hideModal,
-        onConfirm: isFolder ? this.addNewFolder : this.addNewFile,
+        onConfirm: isFolder
+          ? this.addNewFolder
+          : addAppProviderFile
+          ? this.addAppProviderFile
+          : this.addNewFile,
         onInput: checkInputValue
       }
 
@@ -489,7 +530,76 @@ export default {
 
       this.fileFolderCreationLoading = false
     },
+    async addAppProviderFile(fileName) {
+      try {
+        const parent = this.currentFolder.fileId
+        const publicToken = (this.$router.currentRoute.params.item || '').split('/')[0]
+
+        const configUrl = this.configuration.server
+        const appNewUrl = this.capabilities.files.app_providers[0].new_url.replace(/^\/+/, '')
+        const url =
+          configUrl +
+          appNewUrl +
+          `?parent_container_id=${parent}&filename=${encodeURIComponent(fileName)}`
+
+        const headers = {
+          'X-Requested-With': 'XMLHttpRequest',
+          ...(this.isPublicFilesRoute && {
+            'public-token': publicToken
+          }),
+          ...(this.publicLinkPassword && {
+            Authorization:
+              'Basic ' +
+              Buffer.from(['public', this.publicLinkPassword].join(':')).toString('base64')
+          }),
+          ...(this.getToken && {
+            Authorization: 'Bearer ' + this.getToken
+          })
+        }
+
+        const response = await fetch(url, {
+          method: 'POST',
+          headers
+        })
+
+        if (response.status !== 200) {
+          const message = `An error has occured: ${response.status}`
+          throw new Error(message)
+        }
 
+        const path = pathUtil.join(this.currentPath, fileName)
+        let resource
+        if (this.isPersonalRoute) {
+          resource = await this.$client.files.fileInfo(path, DavProperties.Default)
+        } else {
+          resource = await this.$client.publicFiles.getFileInfo(
+            path,
+            this.publicLinkPassword,
+            DavProperties.PublicLink
+          )
+        }
+        resource = buildResource(resource)
+        this.UPSERT_RESOURCE(resource)
+        this.$_fileActions_triggerDefaultAction(resource)
+        this.hideModal()
+        if (this.isPersonalRoute) {
+          this.loadIndicators({
+            client: this.$client,
+            currentFolder: this.currentFolder.path
+          })
+        }
+        setTimeout(() => {
+          this.setFileSelection([resource])
+          this.scrollToResource(resource)
+        })
+      } catch (error) {
+        this.showMessage({
+          title: this.$gettext('Creating file failed…'),
+          status: 'danger'
+        })
+        console.error(error)
+      }
+    },
     checkNewFileName(fileName) {
       if (fileName === '') {
         return this.$gettext('File name cannot be empty')