Create files for available mimetypes in app provider

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

@@ -102,6 +102,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>
@@ -118,6 +135,7 @@
 import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
 import pathUtil from 'path'
 import isEmpty from 'lodash-es/isEmpty'
+import get from 'lodash-es/get'
 
 import Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
@@ -152,11 +170,18 @@ export default {
  fileFolderCreationLoading: false
  }),
  computed: {
+ ...mapGetters('External', ['mimeTypes']),
  ...mapGetters(['getToken', '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!')
@@ -325,7 +350,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
@@ -352,7 +382,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
  }
 
@@ -496,7 +530,57 @@ export default {
 
  this.fileFolderCreationLoading = false
  },
+ async addAppProviderFile(fileName) {
+ try {
+ const path = pathUtil.join(this.currentPath, fileName)
+ const url = '/app/new?filename=' + path
+ const headers = new Headers()
+ headers.append('Authorization', 'Bearer ' + this.getToken)
+ headers.append('X-Requested-With', 'XMLHttpRequest')
+ const response = await fetch(encodeURI(url), {
+ method: 'POST',
+ headers
+ })
 
+ await response.json()
+
+ if (!response.ok) {
+ const message = `An error has occured: ${response.status}`
+ throw new Error(message)
+ }
+
+ 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.Default
+ )
+ }
+ 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…'),
+ desc: error,
+ status: 'danger'
+ })
+ }
+ },
  checkNewFileName(fileName) {
  if (fileName === '') {
  return this.$gettext('File name cannot be empty')