Add contentType to AppWrapperRoute config options and allow for savin…

…g images in webdav put

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -36,6 +36,7 @@ import {
   onMounted
 } from 'vue'
 import { DateTime } from 'luxon'
+import { dirname } from 'path'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
@@ -45,50 +46,47 @@ import ErrorScreen from './PartialViews/ErrorScreen.vue'
 import LoadingScreen from './PartialViews/LoadingScreen.vue'
 import FileSideBar from '../SideBar/FileSideBar.vue'
 import {
-  UrlForResourceOptions,
+  Action,
+  FileAction,
+  FileActionOptions,
+  FileContentOptions,
+  Key,
+  Modifier,
   queryItemAsString,
+  UrlForResourceOptions,
   useAppDefaults,
-  useClientService,
-  useRoute,
-  useRouteParam,
-  useRouteQuery,
-  useSelectedResources,
-  useSideBar,
-  useModals,
-  useMessages,
-  useSpacesStore,
+  useAppMeta,
   useAppsStore,
+  useClientService,
   useConfigStore,
-  useResourcesStore,
-  FileContentOptions,
   useFileActionsCopyPermanentLink,
   useFileActionsDownloadFile,
   useFileActionsShowDetails,
   useFileActionsShowShares,
-  FileActionOptions,
-  FileAction,
-  useLoadingService
-} from '../../composables'
-import {
-  Action,
-  Modifier,
-  Key,
-  useAppMeta,
   useGetResourceContext,
-  useKeyboardActions
+  useKeyboardActions,
+  useLoadingService,
+  useMessages,
+  useModals,
+  useResourcesStore,
+  useRoute,
+  useRouteParam,
+  useRouteQuery,
+  useSelectedResources,
+  useSideBar,
+  useSpacesStore
 } from '../../composables'
+import { useFileActionsOpenWithApp } from '../../composables/actions/files/useFileActionsOpenWithApp'
 import {
-  Resource,
-  SpaceResource,
   call,
+  HttpError,
   isPersonalSpaceResource,
   isProjectSpaceResource,
-  isShareSpaceResource
+  isShareSpaceResource,
+  Resource,
+  SpaceResource
 } from '@ownclouders/web-client'
 import { DavPermission } from '@ownclouders/web-client/webdav'
-import { HttpError } from '@ownclouders/web-client'
-import { dirname } from 'path'
-import { useFileActionsOpenWithApp } from '../../composables/actions/files/useFileActionsOpenWithApp'
 
 export default defineComponent({
   name: 'AppWrapper',
@@ -121,6 +119,10 @@ export default defineComponent({
     importResourceWithExtension: {
       type: Function as PropType<(resource: Resource) => string>,
       default: (): Resource => null
+    },
+    contentType: {
+      type: String,
+      default: 'text/plain'
     }
   },
   setup(props) {
@@ -341,11 +343,24 @@ export default defineComponent({
     }
 
     const saveFileTask = useTask(function* () {
-      const newContent = unref(currentContent)
+      let newContent = unref(currentContent)
+
+      const headers =
+        props.contentType === 'image'
+          ? {
+              'Content-Type': 'application/offset+octet-stream'
+            }
+          : {}
+
+      if (props.contentType === 'image') {
+        newContent = Buffer.from(newContent, 'base64')
+      }
+
       try {
         const putFileContentsResponse = yield putFileContents(currentFileContext, {
           content: newContent,
-          previousEntityTag: unref(currentETag)
+          previousEntityTag: unref(currentETag),
+          headers
         })
         serverContent.value = newContent
         currentETag.value = putFileContentsResponse.etag

packages/web-pkg/src/components/AppTemplates/AppWrapperRoute.ts

@@ -11,6 +11,7 @@ export function AppWrapperRoute(
     urlForResourceOptions?: UrlForResourceOptions
     fileContentOptions?: FileContentOptions
     importResourceWithExtension?: (resource: Resource) => string
+    contentType?: string
   }
 ) {
   return defineComponent({