diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 61f376ddec0..3a35a172b24 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -25,37 +25,34 @@
       >
         <oc-list id="create-list">
           <li class="create-list-folder oc-menu-item-hover">
-            <oc-button id="new-folder-btn" appearance="raw" @click="showCreateResourceModal">
+            <oc-button id="new-folder-btn" appearance="raw" @click="createNewFolderAction">
               <oc-resource-icon :resource="folderIconResource" size="medium" />
               <span v-text="$gettext('Folder')" />
             </oc-button>
           </li>
           <li
-            v-for="(newFileHandler, key) in newFileHandlers"
+            v-for="(fileAction, key) in createNewFileActions"
             :key="`file-creation-item-${key}`"
             class="create-list-file oc-menu-item-hover"
           >
             <oc-button
               appearance="raw"
-              :class="['new-file-btn-' + newFileHandler.ext]"
-              @click="showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)"
+              :class="['new-file-btn-' + fileAction.ext]"
+              @click="fileAction.handler"
             >
-              <oc-resource-icon :resource="getIconResource(newFileHandler)" size="medium" />
-              <span>{{ newFileHandler.menuTitle($gettext) }}</span>
+              <oc-resource-icon :resource="getIconResource(fileAction)" size="medium" />
+              <span>{{ fileAction.label() }}</span>
             </oc-button>
           </li>
           <template v-if="mimetypesAllowedForCreation">
             <li
-              v-for="(mimetype, key) in mimetypesAllowedForCreation"
+              v-for="(mimeTypeAction, key) in createNewFileMimeTypeActions"
               :key="`file-creation-item-external-${key}`"
               class="create-list-file oc-menu-item-hover"
             >
-              <oc-button
-                appearance="raw"
-                @click="showCreateResourceModal(false, mimetype.ext, false, true)"
-              >
-                <oc-resource-icon :resource="getIconResource(mimetype)" size="medium" />
-                <span v-text="$gettextInterpolate($gettext('%{name}'), { name: mimetype.name })" />
+              <oc-button appearance="raw" @click="mimeTypeAction.handler">
+                <oc-resource-icon :resource="getIconResource(mimeTypeAction)" size="medium" />
+                <span v-text="$gettext(mimeTypeAction.label())" />
               </oc-button>
             </li>
           </template>
@@ -71,7 +68,7 @@
           variation="primary"
           :aria-label="newButtonAriaLabel"
           :disabled="uploadOrFileCreationBlocked"
-          @click="showCreateResourceModal"
+          @click="createNewFolderAction"
         >
           <oc-icon name="resource-type-folder" />
           <span v-if="!hideButtonLabels" v-text="$gettext('New Folder')" />
@@ -136,12 +133,15 @@
 </template>
 
 <script lang="ts">
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
-import { join } from 'path'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 
-import { useFileActions, EDITOR_MODE_CREATE } from '../../composables/actions/files/useFileActions'
+import { useFileActions } from '../../composables/actions/files/useFileActions'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
-import { useActiveLocation } from '../../composables'
+import {
+  useActiveLocation,
+  useFileActionsCreateNewFile,
+  useFileActionsCreateNewFolder
+} from '../../composables'
 
 import {
   useRequest,
@@ -166,15 +166,10 @@ import {
 import { useUpload } from 'web-runtime/src/composables/upload'
 import { useUploadHelpers } from '../../composables/upload'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { extractNameWithoutExtension, Resource, SpaceResource } from 'web-client/src/helpers'
-import { resolveFileNameDuplicate, ResourcesUpload } from '../../helpers/resource'
-import { WebDAV } from 'web-client/src/webdav'
-import { configurationManager } from 'web-pkg/src/configuration'
-import { urlJoin } from 'web-client/src/utils'
-import { stringify } from 'qs'
+import { Resource, SpaceResource } from 'web-client/src/helpers'
+import { ResourcesUpload } from '../../helpers/resource'
 import { useService } from 'web-pkg/src/composables/service'
 import { UppyService } from 'web-runtime/src/services/uppyService'
-import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
 
 export default defineComponent({
   components: {
@@ -206,9 +201,38 @@ export default defineComponent({
     const uppyService = useService<UppyService>('$uppyService')
     const clientService = useClientService()
     const store = useStore()
+
     let filesSelectedSub
     let uploadCompletedSub
 
+    const { actions: createNewFolder } = useFileActionsCreateNewFolder({
+      store,
+      space: props.space
+    })
+    const createNewFolderAction = computed(() => unref(createNewFolder)[0].handler)
+
+    const newFileHandlers = computed(() => store.getters.newFileHandlers)
+
+    const { actions: createNewFileActions } = useFileActionsCreateNewFile({
+      store,
+      space: props.space,
+      newFileHandlers: newFileHandlers
+    })
+
+    const mimetypesAllowedForCreation = computed(() => {
+      const mimeTypes = store.getters['External/mimeTypes']
+      if (!mimeTypes) {
+        return []
+      }
+      return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
+    })
+
+    const { actions: createNewFileMimeTypeActions } = useFileActionsCreateNewFile({
+      store,
+      space: props.space,
+      mimetypesAllowedForCreation: mimetypesAllowedForCreation
+    })
+
     const currentFolder = computed(() => {
       return store.getters['Files/currentFolder']
     })
@@ -258,7 +282,12 @@ export default defineComponent({
       hasSpaces: useCapabilitySpacesEnabled(),
       isUserContext: useUserContext({ store }),
       canUpload,
-      currentFolder
+      currentFolder,
+      createNewFileActions,
+      createNewFileMimeTypeActions,
+      createNewFolder,
+      mimetypesAllowedForCreation,
+      createNewFolderAction
     }
   },
   data: () => ({
@@ -267,7 +296,6 @@ export default defineComponent({
   computed: {
     ...mapGetters(['capabilities', 'configuration', 'newFileHandlers', 'user']),
     ...mapGetters('Files', ['ancestorMetaData', 'files', 'selectedFiles', 'clipboardResources']),
-    ...mapState('Files', ['areFileExtensionsShown']),
     ...mapGetters('runtime/spaces', ['spaces']),
 
     showPasteHereButton() {
@@ -276,14 +304,6 @@ export default defineComponent({
     hideButtonLabels() {
       return this.limitedScreenSpace && this.showPasteHereButton
     },
-    mimetypesAllowedForCreation() {
-      // we can't use `mapGetters` here because the External app doesn't exist in all deployments
-      const mimeTypes = this.$store.getters['External/mimeTypes']
-      if (!mimeTypes) {
-        return []
-      }
-      return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
-    },
 
     showActions() {
       return !(this.uploadOrFileCreationBlocked && this.isPublicLocation)
@@ -391,251 +411,6 @@ export default defineComponent({
       }
     },
 
-    showCreateResourceModal(
-      isFolder = true,
-      ext = 'txt',
-      openAction = null,
-      addAppProviderFile = false
-    ) {
-      const checkInputValue = (value) => {
-        this.setModalInputErrorMessage(
-          isFolder
-            ? this.checkNewFolderName(value)
-            : this.checkNewFileName(this.areFileExtensionsShown ? value : `${value}.${ext}`)
-        )
-      }
-      let defaultName = isFolder
-        ? this.$gettext('New folder')
-        : this.$gettext('New file') + `.${ext}`
-
-      if (this.files.some((f) => f.name === defaultName)) {
-        defaultName = resolveFileNameDuplicate(defaultName, isFolder ? '' : ext, this.files)
-      }
-
-      if (!this.areFileExtensionsShown) {
-        defaultName = extractNameWithoutExtension({ name: defaultName, extension: ext } as any)
-      }
-
-      // Sets action to be executed after creation of the file
-      if (!isFolder) {
-        this.newFileAction = openAction
-      }
-
-      const inputSelectionRange =
-        isFolder || !this.areFileExtensionsShown ? null : [0, defaultName.length - (ext.length + 1)]
-
-      const modal = {
-        variation: 'passive',
-        title: isFolder ? this.$gettext('Create a new folder') : this.$gettext('Create a new file'),
-        cancelText: this.$gettext('Cancel'),
-        confirmText: this.$gettext('Create'),
-        hasInput: true,
-        inputValue: defaultName,
-        inputLabel: isFolder ? this.$gettext('Folder name') : this.$gettext('File name'),
-        inputError: isFolder
-          ? this.checkNewFolderName(defaultName)
-          : this.checkNewFileName(
-              this.areFileExtensionsShown ? defaultName : `${defaultName}.${ext}`
-            ),
-        inputSelectionRange,
-        onCancel: this.hideModal,
-        onConfirm: isFolder
-          ? this.addNewFolder
-          : addAppProviderFile
-          ? this.addAppProviderFile
-          : (fileName) => {
-              if (!this.areFileExtensionsShown) {
-                fileName = `${fileName}.${ext}`
-              }
-              this.addNewFile(fileName)
-            },
-        onInput: checkInputValue
-      }
-
-      this.createModal(modal)
-    },
-
-    async addNewFolder(folderName) {
-      folderName = folderName.trimEnd()
-
-      try {
-        const path = join(this.item, folderName)
-        const resource = await (this.$clientService.webdav as WebDAV).createFolder(this.space, {
-          path
-        })
-
-        if (this.loadIndicatorsForNewFile) {
-          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
-        }
-
-        this.UPSERT_RESOURCE(resource)
-        this.hideModal()
-
-        this.showMessage({
-          title: this.$gettextInterpolate(
-            this.$gettext('"%{folderName}" was created successfully'),
-            {
-              folderName
-            }
-          )
-        })
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettext('Failed to create folder'),
-          status: 'danger'
-        })
-      }
-    },
-
-    checkNewFolderName(folderName) {
-      if (folderName.trim() === '') {
-        return this.$gettext('Folder name cannot be empty')
-      }
-
-      if (/[/]/.test(folderName)) {
-        return this.$gettext('Folder name cannot contain "/"')
-      }
-
-      if (folderName === '.') {
-        return this.$gettext('Folder name cannot be equal to "."')
-      }
-
-      if (folderName === '..') {
-        return this.$gettext('Folder name cannot be equal to ".."')
-      }
-
-      const exists = this.files.find((file) => file.name === folderName)
-
-      if (exists) {
-        const translated = this.$gettext('%{name} already exists')
-        return this.$gettextInterpolate(translated, { name: folderName }, true)
-      }
-
-      return null
-    },
-
-    async addNewFile(fileName) {
-      if (fileName === '') {
-        return
-      }
-
-      try {
-        const path = join(this.item, fileName)
-        const resource = await (this.$clientService.webdav as WebDAV).putFileContents(this.space, {
-          path
-        })
-
-        if (this.loadIndicatorsForNewFile) {
-          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
-        }
-
-        this.UPSERT_RESOURCE(resource)
-
-        if (this.newFileAction) {
-          this.openEditor(
-            this.newFileAction,
-            this.space.getDriveAliasAndItem(resource),
-            resource.webDavPath,
-            resource.fileId,
-            EDITOR_MODE_CREATE
-          )
-          this.hideModal()
-
-          return
-        }
-
-        this.hideModal()
-        this.showMessage({
-          title: this.$gettextInterpolate(this.$gettext('"%{fileName}" was created successfully'), {
-            fileName
-          })
-        })
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettext('Failed to create file'),
-          status: 'danger'
-        })
-      }
-    },
-    async addAppProviderFile(fileName) {
-      // FIXME: this belongs in web-app-external, but the app provider handles file creation differently than other editor extensions. Needs more refactoring.
-      if (fileName === '') {
-        return
-      }
-      try {
-        const baseUrl = urlJoin(
-          configurationManager.serverUrl,
-          this.capabilities.files.app_providers[0].new_url
-        )
-        const query = stringify({
-          parent_container_id: this.currentFolder.fileId,
-          filename: fileName
-        })
-        const url = `${baseUrl}?${query}`
-        const response = await this.makeRequest('POST', url)
-
-        if (response.status !== 200) {
-          throw new Error(`An error has occurred: ${response.status}`)
-        }
-
-        const path = join(this.item, fileName) || ''
-        const resource = await (this.$clientService.webdav as WebDAV).getFileInfo(this.space, {
-          path
-        })
-
-        if (this.loadIndicatorsForNewFile) {
-          resource.indicators = getIndicators({ resource, ancestorMetaData: this.ancestorMetaData })
-        }
-
-        this.triggerDefaultAction({ space: this.space, resources: [resource] })
-        this.UPSERT_RESOURCE(resource)
-        this.hideModal()
-        this.showMessage({
-          title: this.$gettextInterpolate(this.$gettext('"%{fileName}" was created successfully'), {
-            fileName
-          })
-        })
-      } catch (error) {
-        console.error(error)
-        this.showMessage({
-          title: this.$gettext('Failed to create file'),
-          status: 'danger'
-        })
-      }
-    },
-    checkNewFileName(fileName) {
-      if (fileName === '') {
-        return this.$gettext('File name cannot be empty')
-      }
-
-      if (/[/]/.test(fileName)) {
-        return this.$gettext('File name cannot contain "/"')
-      }
-
-      if (fileName === '.') {
-        return this.$gettext('File name cannot be equal to "."')
-      }
-
-      if (fileName === '..') {
-        return this.$gettext('File name cannot be equal to ".."')
-      }
-
-      if (/\s+$/.test(fileName)) {
-        return this.$gettext('File name cannot end with whitespace')
-      }
-
-      const exists = this.files.find((file) => file.name === fileName)
-
-      if (exists) {
-        const translated = this.$gettext('%{name} already exists')
-        return this.$gettextInterpolate(translated, { name: fileName }, true)
-      }
-
-      return null
-    },
-
     onFilesSelected(filesToUpload: File[]) {
       const uploader = new ResourcesUpload(
         filesToUpload,
diff --git a/packages/web-app-files/src/composables/actions/files/index.ts b/packages/web-app-files/src/composables/actions/files/index.ts
index 1203708d328..4b2f09f7364 100644
--- a/packages/web-app-files/src/composables/actions/files/index.ts
+++ b/packages/web-app-files/src/composables/actions/files/index.ts
@@ -19,3 +19,5 @@ export * from './useFileActionsShowDetails'
 export * from './useFileActionsShowEditTags'
 export * from './useFileActionsShowShares'
 export * from './useFileActionsCreateSpaceFromResource'
+export * from './useFileActionsCreateNewFolder'
+export * from './useFileActionsCreateNewFile'
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFile.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFile.ts
new file mode 100644
index 00000000000..a431a0bdcfc
--- /dev/null
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFile.ts
@@ -0,0 +1,255 @@
+import { Resource, SpaceResource, extractNameWithoutExtension } from 'web-client/src/helpers'
+import { Store } from 'vuex'
+import { computed, Ref, unref } from 'vue'
+import { useClientService, useRequest, useRouter, useStore } from 'web-pkg/src/composables'
+import { FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
+import { useGettext } from 'vue3-gettext'
+import { resolveFileNameDuplicate } from 'web-app-files/src/helpers/resource'
+import { join } from 'path'
+import { WebDAV } from 'web-client/src/webdav'
+import { isLocationSpacesActive } from 'web-app-files/src/router'
+import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
+import { EDITOR_MODE_CREATE, useFileActions } from './useFileActions'
+import { urlJoin } from 'web-client/src/utils'
+import { configurationManager } from 'web-pkg/src'
+import { stringify } from 'qs'
+
+export const useFileActionsCreateNewFile = ({
+  store,
+  space,
+  newFileHandlers,
+  mimetypesAllowedForCreation
+}: {
+  store?: Store<any>
+  space?: SpaceResource
+  newFileHandlers?: Ref<any> // FIXME: type?
+  mimetypesAllowedForCreation?: Ref<any> // FIXME: type?
+} = {}) => {
+  store = store || useStore()
+  const router = useRouter()
+  const { $gettext } = useGettext()
+  const { makeRequest } = useRequest()
+
+  const { openEditor, triggerDefaultAction } = useFileActions()
+  const clientService = useClientService()
+  const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
+  const files = computed((): Array<Resource> => store.getters['Files/files'])
+  const ancestorMetaData = computed(() => store.getters['Files/ancestorMetaData'])
+  const areFileExtensionsShown = computed((): boolean => store.state.Files.areFileExtensionsShown)
+
+  const capabilities = computed(() => store.getters['capabilities'])
+
+  const checkNewFileName = (fileName) => {
+    if (fileName === '') {
+      return $gettext('File name cannot be empty')
+    }
+
+    if (/[/]/.test(fileName)) {
+      return $gettext('File name cannot contain "/"')
+    }
+
+    if (fileName === '.') {
+      return $gettext('File name cannot be equal to "."')
+    }
+
+    if (fileName === '..') {
+      return $gettext('File name cannot be equal to ".."')
+    }
+
+    if (/\s+$/.test(fileName)) {
+      return $gettext('File name cannot end with whitespace')
+    }
+
+    const exists = unref(files).find((file) => file.name === fileName)
+
+    if (exists) {
+      return $gettext('%{name} already exists', { name: fileName }, true)
+    }
+
+    return null
+  }
+
+  const addAppProviderFileFunc = async (fileName) => {
+    // FIXME: this belongs in web-app-external, but the app provider handles file creation differently than other editor extensions. Needs more refactoring.
+    if (fileName === '') {
+      return
+    }
+    try {
+      const baseUrl = urlJoin(
+        configurationManager.serverUrl,
+        unref(capabilities).files.app_providers[0].new_url
+      )
+      const query = stringify({
+        parent_container_id: unref(currentFolder).fileId,
+        filename: fileName
+      })
+      const url = `${baseUrl}?${query}`
+      const response = await makeRequest('POST', url)
+      if (response.status !== 200) {
+        throw new Error(`An error has occurred: ${response.status}`)
+      }
+      const path = join(unref(currentFolder).path, fileName) || ''
+      const resource = await (clientService.webdav as WebDAV).getFileInfo(space, {
+        path
+      })
+      if (unref(loadIndicatorsForNewFile)) {
+        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
+      }
+      triggerDefaultAction({ space: space, resources: [resource] })
+      store.commit('Files/UPSERT_RESOURCE', resource)
+      store.dispatch('hideModal')
+      store.dispatch('showMessage', {
+        title: $gettext('"%{fileName}" was created successfully', { fileName })
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Failed to create file'),
+        status: 'danger'
+      })
+    }
+  }
+
+  const loadIndicatorsForNewFile = computed(() => {
+    return isLocationSpacesActive(router, 'files-spaces-generic') && space.driveType !== 'share'
+  })
+
+  const addNewFile = async (fileName, openAction) => {
+    if (fileName === '') {
+      return
+    }
+
+    try {
+      const path = join(unref(currentFolder).path, fileName)
+      const resource = await (clientService.webdav as WebDAV).putFileContents(space, {
+        path
+      })
+
+      if (loadIndicatorsForNewFile.value) {
+        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
+      }
+
+      store.commit('Files/UPSERT_RESOURCE', resource)
+
+      if (openAction) {
+        openEditor(
+          openAction,
+          space.getDriveAliasAndItem(resource),
+          resource.webDavPath,
+          resource.fileId,
+          EDITOR_MODE_CREATE
+        )
+        store.dispatch('hideModal')
+
+        return
+      }
+
+      store.dispatch('hideModal')
+      store.dispatch('showMessage', {
+        title: $gettext('"%{fileName}" was created successfully', { fileName })
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Failed to create file'),
+        status: 'danger'
+      })
+    }
+  }
+
+  const handler = (
+    fileActionOptions: FileActionOptions,
+    extension: string,
+    openAction: any // FIXME: type?
+  ) => {
+    const checkInputValue = (value) => {
+      store.dispatch(
+        'setModalInputErrorMessage',
+        checkNewFileName(areFileExtensionsShown.value ? value : `${value}.${extension}`)
+      )
+    }
+    let defaultName = $gettext('New file') + `.${extension}`
+
+    if (unref(files).some((f) => f.name === defaultName)) {
+      defaultName = resolveFileNameDuplicate(defaultName, extension, unref(files))
+    }
+
+    if (!areFileExtensionsShown.value) {
+      defaultName = extractNameWithoutExtension({ name: defaultName, extension } as any)
+    }
+
+    const inputSelectionRange = !areFileExtensionsShown.value
+      ? null
+      : [0, defaultName.length - (extension.length + 1)]
+
+    const modal = {
+      variation: 'passive',
+      title: $gettext('Create a new file'),
+      cancelText: $gettext('Cancel'),
+      confirmText: $gettext('Create'),
+      hasInput: true,
+      inputValue: defaultName,
+      inputLabel: $gettext('File name'),
+      inputError: checkNewFileName(
+        areFileExtensionsShown.value ? defaultName : `${defaultName}.${extension}`
+      ),
+      inputSelectionRange,
+      onCancel: () => store.dispatch('hideModal'),
+      onConfirm: !openAction
+        ? addAppProviderFileFunc
+        : (fileName) => {
+            if (!areFileExtensionsShown.value) {
+              fileName = `${fileName}.${extension}`
+            }
+            addNewFile(fileName, openAction)
+          },
+      onInput: checkInputValue
+    }
+
+    store.dispatch('createModal', modal)
+  }
+
+  const actions = computed((): FileAction[] => {
+    const actions = []
+    for (const newFileHandler of unref(newFileHandlers) || []) {
+      const openAction = newFileHandler.action
+      actions.push({
+        name: 'create-new-file',
+        icon: 'add',
+        handler: (args) => handler(args, newFileHandler.ext, openAction),
+        label: () => newFileHandler.menuTitle($gettext),
+        isEnabled: ({ resources }) => {
+          return true
+        },
+        canBeDefault: true,
+        componentType: 'button',
+        class: 'oc-files-actions-create-new-file',
+        ext: newFileHandler.ext
+      })
+    }
+    for (const mimeType of unref(mimetypesAllowedForCreation) || []) {
+      const openAction = false
+      actions.push({
+        name: 'create-new-file',
+        icon: 'add',
+        handler: (args) => handler(args, mimeType.ext, openAction),
+        label: () => mimeType.name,
+        isEnabled: ({ resources }) => {
+          return true
+        },
+        canBeDefault: true,
+        componentType: 'button',
+        class: 'oc-files-actions-create-new-file',
+        ext: mimeType.ext
+      })
+    }
+
+    return actions
+  })
+
+  return {
+    actions,
+    checkNewFileName,
+    addNewFile
+  }
+}
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts
new file mode 100644
index 00000000000..792f948ba42
--- /dev/null
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewFolder.ts
@@ -0,0 +1,138 @@
+import { Resource, SpaceResource } from 'web-client/src/helpers'
+import { Store } from 'vuex'
+import { computed, unref } from 'vue'
+import { useClientService, useRouter, useStore } from 'web-pkg/src/composables'
+import { FileAction } from 'web-pkg/src/composables/actions'
+import { useGettext } from 'vue3-gettext'
+import { resolveFileNameDuplicate } from 'web-app-files/src/helpers/resource'
+import { join } from 'path'
+import { WebDAV } from 'web-client/src/webdav'
+import { isLocationSpacesActive } from 'web-app-files/src/router'
+import { getIndicators } from 'web-app-files/src/helpers/statusIndicators'
+
+export const useFileActionsCreateNewFolder = ({
+  store,
+  space
+}: { store?: Store<any>; space?: SpaceResource } = {}) => {
+  store = store || useStore()
+  const router = useRouter()
+  const { $gettext } = useGettext()
+
+  const clientService = useClientService()
+  const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
+  const files = computed((): Array<Resource> => store.getters['Files/files'])
+  const ancestorMetaData = computed(() => store.getters['Files/ancestorMetaData'])
+
+  const checkNewFolderName = (folderName) => {
+    if (folderName.trim() === '') {
+      return $gettext('Folder name cannot be empty')
+    }
+
+    if (/[/]/.test(folderName)) {
+      return $gettext('Folder name cannot contain "/"')
+    }
+
+    if (folderName === '.') {
+      return $gettext('Folder name cannot be equal to "."')
+    }
+
+    if (folderName === '..') {
+      return $gettext('Folder name cannot be equal to ".."')
+    }
+
+    const exists = unref(files).find((file) => file.name === folderName)
+
+    if (exists) {
+      return $gettext('%{name} already exists', { name: folderName }, true)
+    }
+
+    return null
+  }
+
+  const loadIndicatorsForNewFile = computed(() => {
+    return isLocationSpacesActive(router, 'files-spaces-generic') && space.driveType !== 'share'
+  })
+
+  const addNewFolder = async (folderName) => {
+    folderName = folderName.trimEnd()
+
+    try {
+      const path = join(unref(currentFolder).path, folderName)
+      const resource = await (clientService.webdav as WebDAV).createFolder(space, {
+        path
+      })
+
+      if (unref(loadIndicatorsForNewFile)) {
+        resource.indicators = getIndicators({ resource, ancestorMetaData: unref(ancestorMetaData) })
+      }
+
+      store.commit('Files/UPSERT_RESOURCE', resource)
+      store.dispatch('hideModal')
+
+      store.dispatch('showMessage', {
+        title: $gettext('"%{folderName}" was created successfully', { folderName })
+      })
+    } catch (error) {
+      console.error(error)
+      store.dispatch('showMessage', {
+        title: $gettext('Failed to create folder'),
+        status: 'danger'
+      })
+    }
+  }
+
+  const handler = () => {
+    const checkInputValue = (value) => {
+      store.dispatch('setModalInputErrorMessage', checkNewFolderName(value))
+    }
+    let defaultName = $gettext('New folder')
+
+    if (unref(files).some((f) => f.name === defaultName)) {
+      defaultName = resolveFileNameDuplicate(defaultName, '', unref(files))
+    }
+
+    const inputSelectionRange = null
+
+    const modal = {
+      variation: 'passive',
+      title: $gettext('Create a new folder'),
+      cancelText: $gettext('Cancel'),
+      confirmText: $gettext('Create'),
+      hasInput: true,
+      inputValue: defaultName,
+      inputLabel: $gettext('Folder name'),
+      inputError: checkNewFolderName(defaultName),
+      inputSelectionRange,
+      onCancel: () => store.dispatch('hideModal'),
+      onConfirm: addNewFolder,
+      onInput: checkInputValue
+    }
+
+    store.dispatch('createModal', modal)
+  }
+
+  const actions = computed((): FileAction[] => {
+    return [
+      {
+        name: 'create-folder',
+        icon: 'add',
+        handler,
+        label: () => {
+          return $gettext('Create new Folder')
+        },
+        isEnabled: ({ resources }) => {
+          return true
+        },
+        canBeDefault: true,
+        componentType: 'button',
+        class: 'oc-files-actions-create-new-folder'
+      }
+    ]
+  })
+
+  return {
+    actions,
+    checkNewFolderName,
+    addNewFolder
+  }
+}
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
index bb3211496cf..8be4c75e19c 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -106,29 +106,6 @@ describe('CreateAndUpload component', () => {
       expect(storeOptions.modules.Files.actions.clearClipboardFiles).toHaveBeenCalled()
     })
   })
-  describe('button triggers', () => {
-    it('should create a modal if "New folder" button is clicked', async () => {
-      const { wrapper } = getWrapper()
-      const createModalSpy = jest.spyOn(wrapper.vm, 'createModal')
-      await wrapper.find(elSelector.newFolderBtn).trigger('click')
-      expect(createModalSpy).toHaveBeenCalled()
-    })
-    it.each(fileHandlerMocks)(
-      'should create a modal if "New file" button is clicked',
-      async (fileHandler) => {
-        const { wrapper } = getWrapper({ newFileHandlers: fileHandlerMocks })
-        const createModalSpy = jest.spyOn(wrapper.vm, 'createModal')
-        const showCreateResourceModal = jest.spyOn(wrapper.vm, 'showCreateResourceModal')
-        await wrapper.find(`.new-file-btn-${fileHandler.ext}`).trigger('click')
-        expect(createModalSpy).toHaveBeenCalled()
-        expect(showCreateResourceModal).toHaveBeenCalledWith(
-          false,
-          fileHandler.ext,
-          fileHandler.action
-        )
-      }
-    )
-  })
   describe('method "onUploadComplete"', () => {
     it.each([
       { driveType: 'personal', updated: 1 },
@@ -160,84 +137,6 @@ describe('CreateAndUpload component', () => {
       expect(eventSpy).toHaveBeenCalled()
     })
   })
-  describe('methods "addNewFolder" & "addNewFile"', () => {
-    it.each(['addNewFolder', 'addNewFile'])(
-      'updates the resource after the folder as been created successfully',
-      async (method) => {
-        const createMethod = method === 'addNewFolder' ? 'createFolder' : 'putFileContents'
-        const { wrapper, mocks, storeOptions } = getWrapper({ item: '/' })
-        mocks.$clientService.webdav[createMethod].mockResolvedValue(mockDeep<Resource>())
-        await wrapper.vm[method]('New resource')
-        expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
-      }
-    )
-    it.each(['addNewFolder', 'addNewFile'])(
-      'shows a message when an error occurres',
-      async (method) => {
-        const createMethod = method === 'addNewFolder' ? 'createFolder' : 'putFileContents'
-        jest.spyOn(console, 'error').mockImplementation(() => undefined)
-        const { wrapper, mocks, storeOptions } = getWrapper({ item: '/' })
-        mocks.$clientService.webdav[createMethod].mockRejectedValue(new Error())
-        await wrapper.vm[method]('New resource')
-        expect(storeOptions.actions.showMessage).toHaveBeenCalled()
-      }
-    )
-    it('opens the file editor after a file has been created and a supported editor is available', async () => {
-      const { wrapper, mocks } = getWrapper({
-        newFileAction: true,
-        item: '/',
-        newFileHandlers: fileHandlerMocks
-      })
-      const openEditorSpy = jest.spyOn(wrapper.vm, 'openEditor').mockImplementation()
-      mocks.$clientService.webdav.putFileContents.mockResolvedValue(mockDeep<Resource>())
-      await wrapper.vm.addNewFile('New resource.txt')
-      expect(openEditorSpy).toHaveBeenCalled()
-    })
-  })
-  describe('methods "checkNewFolderName" & "checkNewFileName"', () => {
-    it.each([
-      { name: '', validFileName: false, validFolderName: false },
-      { name: '  ', validFileName: false, validFolderName: false },
-      { name: '/name', validFileName: false, validFolderName: false },
-      { name: '.', validFileName: false, validFolderName: false },
-      { name: '..', validFileName: false, validFolderName: false },
-      { name: 'name ', validFileName: false, validFolderName: true },
-      { name: 'name', validFileName: true, validFolderName: true }
-    ])('verifies the resource name', (data) => {
-      const { name, validFileName, validFolderName } = data
-      const { wrapper } = getWrapper()
-      const folderResult = wrapper.vm.checkNewFolderName(name)
-      expect(folderResult === null).toBe(validFolderName)
-      const fileResult = wrapper.vm.checkNewFileName(name)
-      expect(fileResult === null).toBe(validFileName)
-    })
-    it('shows error when the resource name already exists', () => {
-      const existingFile = mockDeep<Resource>({ name: 'someFile.txt' })
-      const { wrapper } = getWrapper({ files: [existingFile] })
-      const folderResult = wrapper.vm.checkNewFolderName(existingFile.name)
-      expect(folderResult).not.toBeNull()
-      const fileResult = wrapper.vm.checkNewFileName(existingFile.name)
-      expect(fileResult).not.toBeNull()
-    })
-  })
-  describe('method "addAppProviderFile"', () => {
-    it('triggers the default file action', async () => {
-      const { wrapper, mocks } = getWrapper({ item: '/' })
-      const defaultActionSpy = jest
-        .spyOn(wrapper.vm, 'triggerDefaultAction')
-        .mockImplementation(() => undefined)
-      mocks.$clientService.webdav.getFileInfo.mockResolvedValue(mockDeep<Resource>())
-      await wrapper.vm.addAppProviderFile('someFile.txt')
-      expect(defaultActionSpy).toHaveBeenCalled()
-    })
-    it('shows a message when an error occurred', async () => {
-      jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper, mocks, storeOptions } = getWrapper({ item: '/' })
-      mocks.$clientService.webdav.getFileInfo.mockRejectedValue(new Error())
-      await wrapper.vm.addAppProviderFile('someFile.txt')
-      expect(storeOptions.actions.showMessage).toHaveBeenCalled()
-    })
-  })
   describe('drop target', () => {
     it('is being initialized when user can upload', () => {
       const { mocks } = getWrapper()
diff --git a/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts b/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
new file mode 100644
index 00000000000..8f4b7b61e7e
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
@@ -0,0 +1,146 @@
+import { mock } from 'jest-mock-extended'
+import { nextTick, ref, unref } from 'vue'
+import { useFileActionsCreateNewFile } from 'web-app-files/src/composables'
+import { SpaceResource } from 'web-client/src'
+import { Resource } from 'web-client/src/helpers'
+import { FileActionOptions } from 'web-pkg/src/composables/actions'
+import {
+  RouteLocation,
+  createStore,
+  defaultComponentMocks,
+  defaultStoreMockOptions,
+  getComposableWrapper
+} from 'web-test-helpers/src'
+
+describe('useFileActionsCreateNewFile', () => {
+  describe('checkFileName', () => {
+    it.each([
+      { input: '', output: 'File name cannot be empty' },
+      { input: '/', output: 'File name cannot contain "/"' },
+      { input: '.', output: 'File name cannot be equal to "."' },
+      { input: '..', output: 'File name cannot be equal to ".."' },
+      { input: 'myfile.txt', output: null }
+    ])('should validate file name %s', async (data) => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ checkNewFileName }) => {
+          const result = checkNewFileName(data.input)
+          expect(result).toBe(data.output)
+        }
+      })
+    })
+  })
+
+  describe('addNewFile', () => {
+    it('create new file', async () => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ addNewFile }, { storeOptions }) => {
+          await addNewFile('myfile.txt', null)
+          await nextTick()
+          expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
+          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+              title: '"myfile.txt" was created successfully'
+            })
+          )
+        }
+      })
+    })
+    it('show error message if createFile fails', async () => {
+      const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        resolveCreateFile: false,
+        space,
+        setup: async ({ addNewFile }, { storeOptions }) => {
+          await addNewFile('myfolder', null)
+          await nextTick()
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+              title: 'Failed to create file',
+              status: 'danger'
+            })
+          )
+          consoleErrorMock.mockRestore()
+        }
+      })
+    })
+  })
+  describe('createNewFileModal', () => {
+    it('should show modal', async () => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ actions }, { storeOptions }) => {
+          const fileActionOptions: FileActionOptions = { space, resources: [] } as FileActionOptions
+          unref(actions)[0].handler(fileActionOptions)
+          await nextTick()
+          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+        }
+      })
+    })
+  })
+})
+
+function getWrapper({
+  resolveCreateFile = true,
+  space = undefined,
+  setup
+}: {
+  resolveCreateFile?: boolean
+  space?: SpaceResource
+  setup: (
+    instance: ReturnType<typeof useFileActionsCreateNewFile>,
+    options: { storeOptions: typeof defaultStoreMockOptions }
+  ) => void
+}) {
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+    }),
+    space
+  }
+  mocks.$clientService.webdav.putFileContents.mockImplementation(() => {
+    if (resolveCreateFile) {
+      return Promise.resolve({
+        id: 1,
+        type: 'folder',
+        path: '/',
+        isReceivedShare: jest.fn()
+      } as Resource)
+    }
+    return Promise.reject('error')
+  })
+
+  const storeOptions = {
+    ...defaultStoreMockOptions
+  }
+  const currentFolder = {
+    id: 1,
+    path: '/'
+  }
+  storeOptions.modules.Files.getters.currentFolder.mockReturnValue(currentFolder)
+  const store = createStore(storeOptions)
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useFileActionsCreateNewFile({
+          store,
+          space,
+          newFileHandlers: ref([{ action: null, ext: '.txt', menuTitle: jest.fn() }])
+        })
+        setup(instance, { storeOptions })
+      },
+      {
+        store,
+        mocks
+      }
+    )
+  }
+}
diff --git a/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts b/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts
new file mode 100644
index 00000000000..864699ee04d
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts
@@ -0,0 +1,139 @@
+import { mock } from 'jest-mock-extended'
+import { nextTick, unref } from 'vue'
+import { useFileActionsCreateNewFolder } from 'web-app-files/src/composables'
+import { SpaceResource } from 'web-client/src'
+import { FolderResource } from 'web-client/src/helpers'
+import {
+  RouteLocation,
+  createStore,
+  defaultComponentMocks,
+  defaultStoreMockOptions,
+  getComposableWrapper
+} from 'web-test-helpers/src'
+
+describe('useFileActionsCreateNewFolder', () => {
+  describe('checkFolderName', () => {
+    it.each([
+      { input: '', output: 'Folder name cannot be empty' },
+      { input: '/', output: 'Folder name cannot contain "/"' },
+      { input: '.', output: 'Folder name cannot be equal to "."' },
+      { input: '..', output: 'Folder name cannot be equal to ".."' },
+      { input: 'myfolder', output: null }
+    ])('should validate folder name %s', async (data) => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ checkNewFolderName }) => {
+          const result = checkNewFolderName(data.input)
+          expect(result).toBe(data.output)
+        }
+      })
+    })
+  })
+  describe('addNewFolder', () => {
+    it('create new folder', async () => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ addNewFolder }, { storeOptions }) => {
+          await addNewFolder('myfolder')
+          await nextTick()
+          expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
+          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+              title: '"myfolder" was created successfully'
+            })
+          )
+        }
+      })
+    })
+    it('show error message if createFolder fails', async () => {
+      const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        resolveCreateFolder: false,
+        space,
+        setup: async ({ addNewFolder }, { storeOptions }) => {
+          await addNewFolder('myfolder')
+          await nextTick()
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
+            expect.anything(),
+            expect.objectContaining({
+              title: 'Failed to create folder',
+              status: 'danger'
+            })
+          )
+          consoleErrorMock.mockRestore()
+        }
+      })
+    })
+  })
+  describe('createNewFolderModal', () => {
+    it('should show modal', async () => {
+      const space = mock<SpaceResource>({ id: '1' })
+      getWrapper({
+        space,
+        setup: async ({ actions }, { storeOptions }) => {
+          unref(actions)[0].handler()
+          await nextTick()
+          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+        }
+      })
+    })
+  })
+})
+
+function getWrapper({
+  resolveCreateFolder = true,
+  space = undefined,
+  setup
+}: {
+  resolveCreateFolder?: boolean
+  space?: SpaceResource
+  setup: (
+    instance: ReturnType<typeof useFileActionsCreateNewFolder>,
+    options: { storeOptions: typeof defaultStoreMockOptions }
+  ) => void
+}) {
+  const mocks = {
+    ...defaultComponentMocks({
+      currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+    }),
+    space
+  }
+  mocks.$clientService.webdav.createFolder.mockImplementation(() => {
+    if (resolveCreateFolder) {
+      return Promise.resolve({
+        id: 1,
+        type: 'folder',
+        isReceivedShare: jest.fn(),
+        path: '/'
+      } as FolderResource)
+    }
+    return Promise.reject('error')
+  })
+
+  const storeOptions = {
+    ...defaultStoreMockOptions
+  }
+  const currentFolder = {
+    id: 1,
+    path: '/'
+  }
+  storeOptions.modules.Files.getters.currentFolder.mockReturnValue(currentFolder)
+  const store = createStore(storeOptions)
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useFileActionsCreateNewFolder({ store, space })
+        setup(instance, { storeOptions })
+      },
+      {
+        store,
+        mocks
+      }
+    )
+  }
+}
diff --git a/packages/web-pkg/src/composables/actions/types.ts b/packages/web-pkg/src/composables/actions/types.ts
index d6618c5efa4..1ed0719dc3d 100644
--- a/packages/web-pkg/src/composables/actions/types.ts
+++ b/packages/web-pkg/src/composables/actions/types.ts
@@ -16,6 +16,7 @@ export interface Action<T = ActionOptions> {
   shortcut?: string
   keepOpen?: boolean
   opensInNewWindow?: boolean
+  ext?: string
 
   label(options?: T): string
   isEnabled(options?: T): boolean