Upload file using SDK instead of XHR

apps/files/src/components/FileDrop.vue

@@ -30,7 +30,7 @@ export default {
   },
   props: {
     rootPath: { type: String, required: true },
-    url: { type: String, required: true },
+    path: { type: String, required: true },
     headers: {
       type: Object,
       default: () => {
@@ -45,7 +45,7 @@ export default {
   data () {
     return {
       ocDropzone_options: {
-        url: this.url,
+        url: '#', // FIXME: unused
         clickable: false,
         autoQueue: false
       }

apps/files/src/components/FileUpload.vue

@@ -12,7 +12,7 @@ import Mixins from '../mixins'
 
 export default {
   props: {
-    url: { type: String, required: true },
+    path: { type: String, required: true },
     headers: {
       type: Object,
       default: () => {

apps/files/src/components/FilesAppBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="files-app-bar" class="oc-app-bar">
-    <file-drop v-if="!isIE11()" :rootPath='item' :url='url' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress" />
+    <file-drop v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress" />
     <oc-grid flex gutter="small">
       <div class="uk-width-expand">
         <div class="uk-flex">
@@ -38,8 +38,8 @@
             <oc-button v-else disabled id="new-file-menu-btn" :uk-tooltip="_cannotCreateDialogText"><translate>+ New</translate></oc-button>
             <oc-drop toggle="#new-file-menu-btn" mode="click">
               <oc-nav>
-                <file-upload :url='url' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
-                <folder-upload v-if="!isIE11()" :rootPath='item' :url='url' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
+                <file-upload :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
+                <folder-upload v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
                 <oc-nav-item @click="showCreateFolderDialog" id="new-folder-btn" icon="create_new_folder"><translate>Create new folder…</translate></oc-nav-item>
                 <oc-nav-item v-for="(newFileHandler, key) in newFileHandlers"
                   :key="key"
@@ -92,6 +92,7 @@ import FileDrop from './FileDrop.vue'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import Mixins from '../mixins'
 import FileActions from '../fileactions'
+import join from 'join-path'
 
 export default {
   components: {
@@ -152,12 +153,8 @@ export default {
     item () {
       return this.$route.params.item === undefined ? (this.configuration.rootFolder !== '/' ? `${this.configuration.rootFolder}/` : '/') : this.$route.params.item + '/'
     },
-    url () {
-      const path = this.item === '/' ? '' : this.item
-      if (this.publicPage()) {
-        return this.$client.publicFiles.getFileUrl(`/${path}`)
-      }
-      return this.$client.files.getFileUrl(`/${path}`)
+    currentPath () {
+      return this.item === '/' ? '' : this.item
     },
     newFolderErrorMessage () {
       return this.checkNewFolderName(this.newFolderName)
@@ -461,14 +458,24 @@ export default {
       }
       this.$nextTick().then(() => {
         const path = this.item === '' ? (this.configuration.rootFolder ? `${this.configuration.rootFolder}/` : '/') : `${this.item}/`
-        const filePath = path + file
-        this.$client.files.fileInfo(filePath, this.davProperties).then(fileInfo => {
-          this.addFiles({
-            files: [fileInfo]
+        const filePath = join(path + file)
+        if (this.publicPage()) {
+          this.$client.publicFiles.list(filePath, this.publicLinkPassword, this.davProperties, '0').then(files => {
+            this.addFiles({
+              files: files
+            })
+          }).catch(() => {
+            this.$_ocFilesFolder_getFolder()
           })
-        }).catch(() => {
-          this.$_ocFilesFolder_getFolder()
-        })
+        } else {
+          this.$client.files.fileInfo(filePath, this.davProperties).then(fileInfo => {
+            this.addFiles({
+              files: [fileInfo]
+            })
+          }).catch(() => {
+            this.$_ocFilesFolder_getFolder()
+          })
+        }
       })
     },
 

apps/files/src/components/FolderUpload.vue

@@ -12,7 +12,7 @@ import Mixins from '../mixins'
 export default {
   props: {
     rootPath: { type: String, required: true },
-    url: { type: String, required: true },
+    path: { type: String, required: true },
     headers: {
       type: Object,
       default: () => {

apps/files/src/components/PublicLinks/FilesDrop.vue

@@ -3,7 +3,7 @@
     <div class="uk-padding uk-height-1-1">
       <div class="uk-flex uk-flex-column uk-flex-middle" v-if="loading" key="loading-drop">
         <translate tag="h3">Loading public link…</translate>
-        <oc-spinner size="medium" />
+        <oc-spinner size="medium" :aria-label="$gettext('Loading public link…')" />
       </div>
       <div class="uk-flex uk-flex-column uk-flex-middle uk-height-1-1" v-else key="loaded-drop">
         <div class="uk-text-center uk-width-1-1 uk-width-xxlarge@m">
@@ -31,7 +31,7 @@
                 <oc-table-cell shrink class="uk-padding-remove-right uk-preserve-width">
                   <oc-icon name="ready" variation="success" v-if="file.status === 'done'" />
                   <oc-icon name="info" variation="danger" v-if="file.status === 'error'" />
-                  <oc-spinner v-if="file.status === 'uploading' || file.status === 'init'" />
+                  <oc-spinner v-if="file.status === 'uploading' || file.status === 'init'" :aria-label="$_ocUploadingFileMessage(file.name)" />
                 </oc-table-cell>
               </oc-table-row>
             </oc-table-group>
@@ -51,7 +51,6 @@
 
 <script>
 import vue2DropZone from 'vue2-dropzone'
-import FileUpload from '../../FileUpload.js'
 import { mapGetters } from 'vuex'
 import Mixins from '../../mixins.js'
 
@@ -76,6 +75,9 @@ export default {
   computed: {
     ...mapGetters(['configuration']),
     ...mapGetters('Files', ['davProperties', 'publicLinkPassword']),
+    publicLinkToken () {
+      return this.$route.params.token
+    },
     title () {
       // share might not be loaded
       if (this.share) {
@@ -85,7 +87,7 @@ export default {
       return ''
     },
     url () {
-      return this.$client.publicFiles.getFileUrl(this.$route.params.token) + '/'
+      return this.$client.publicFiles.getFileUrl(this.publicLinkToken) + '/'
     },
     getUploadedFiles () {
       return this.uploadedFilesChangeTracker && this.uploadedFiles.values()
@@ -111,12 +113,12 @@ export default {
         this.$client.publicFiles.PUBLIC_LINK_SHARE_OWNER
       ]
       )
-      this.$client.publicFiles.list(this.$route.params.token, this.publicLinkPassword, properties, '0').then(files => {
+      this.$client.publicFiles.list(this.publicLinkToken, this.publicLinkPassword, properties, '0').then(files => {
         if (files[0].getProperty(this.$client.publicFiles.PUBLIC_LINK_SHARE_DATETIME !== '4')) {
           this.$router.push({
             name: 'public-files',
             params: {
-              item: this.$route.params.token
+              item: this.publicLinkToken
             }
           })
           return
@@ -128,7 +130,7 @@ export default {
           this.$router.push({
             name: 'public-link',
             params: {
-              token: this.$route.params.token
+              token: this.publicLinkToken
             }
           })
           return
@@ -140,27 +142,29 @@ export default {
     },
     dropZoneFileAdded (event) {
       const uploadId = event.upload.uuid
-      const headers = {}
-      const password = this.publicLinkPassword
-      if (password) {
-        headers.Authorization = 'Basic ' + Buffer.from('public:' + password).toString('base64')
-      }
       this.uploadedFilesChangeTracker++
       this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'init' })
-      const fileUpload = new FileUpload(event, event.name, this.url, headers, (progressEvent, file) => {
-        this.uploadedFilesChangeTracker++
-        this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'uploading' })
-      }, 'PUT')
-      fileUpload
-        .upload()
-        .then(e => {
-          this.uploadedFilesChangeTracker++
-          this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'done' })
-        })
-        .catch(e => {
+
+      this.$client.publicFiles.putFileContents(this.publicLinkToken, event.name, this.publicLinkPassword, event, {
+        // automatically rename in case of duplicates
+        headers: { 'OC-Autorename': 1 },
+        onProgress: (progressEvent) => {
           this.uploadedFilesChangeTracker++
-          this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'error' })
-        })
+          this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'uploading' })
+        }
+      }).then(e => {
+        this.uploadedFilesChangeTracker++
+        this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'done' })
+      }).catch(e => {
+        console.error('Error uploading file ', event.name, ': ', e)
+        this.uploadedFilesChangeTracker++
+        this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'error' })
+      })
+    },
+
+    $_ocUploadingFileMessage (fileName) {
+      const translated = this.$gettext('Uploading file "%{fileName}"')
+      return this.$gettextInterpolate(translated, { fileName })
     }
   }
 }

apps/files/src/default.js

@@ -90,7 +90,7 @@ const navItems = [
     name: $gettext('Deleted files'),
     iconMaterial: 'delete',
     enabled (capabilities) {
-      if (capabilities.dav) {
+      if (capabilities && capabilities.dav) {
         return capabilities.dav.trashbin === '1.0'
       }
       return false

apps/files/src/mixins.js

@@ -1,6 +1,6 @@
 import filesize from 'filesize'
+import join from 'join-path'
 import moment from 'moment'
-import FileUpload from './FileUpload.js'
 import fileTypeIconMappings from './fileTypeIconMappings.json'
 import { mapActions, mapGetters } from 'vuex'
 const { default: PQueue } = require('p-queue')
@@ -28,7 +28,7 @@ export default {
     uploadFileUniqueId: 0
   }),
   computed: {
-    ...mapGetters('Files', ['searchTerm', 'files', 'highlightedFile']),
+    ...mapGetters('Files', ['searchTerm', 'files', 'highlightedFile', 'publicLinkPassword']),
     ...mapGetters(['getToken']),
 
     _sidebarOpen () {
@@ -271,24 +271,45 @@ export default {
     },
 
     $_ocUpload (file, path, overwrite = null, emitSuccess = true, addToProgress = true) {
+      let basePath = this.path || ''
+      let relativePath = path
       if (addToProgress) {
         this.$_addFileToUploadProgress(file)
       }
 
-      const fileUpload = new FileUpload(file, path, this.url, this.headers, this.$_ocUpload_onProgress, this.requestType, this.removeFileFromProgress)
-
-      return fileUpload
-        .upload({
+      let promise
+      if (this.publicPage()) {
+        // strip out public link token from path
+        const tokenSplit = basePath.indexOf('/')
+        const token = basePath.substr(0, tokenSplit)
+        basePath = basePath.substr(tokenSplit + 1) || ''
+        relativePath = join(basePath, relativePath)
+        promise = this.$client.publicFiles.putFileContents(token, relativePath, this.publicLinkPassword, file, {
+          onProgress: (progress) => {
+            this.$_ocUpload_onProgress(progress, file)
+          },
           overwrite: overwrite
         })
-        .then(e => {
-          if (emitSuccess) {
-            this.$emit('success', e, file)
-          }
-        })
-        .catch(e => {
-          this.$emit('error', e)
+      } else {
+        basePath = this.path || ''
+        relativePath = join(basePath, relativePath)
+        promise = this.$client.files.putFileContents(relativePath, file, {
+          onProgress: (progress) => {
+            this.$_ocUpload_onProgress(progress, file)
+          },
+          overwrite: overwrite
         })
+      }
+
+      promise.then(e => {
+        this.removeFileFromProgress(file)
+        if (emitSuccess) {
+          this.$emit('success', e, file)
+        }
+      }).catch(e => {
+        this.removeFileFromProgress(file)
+        this.$emit('error', e)
+      })
     },
     $_ocUpload_onProgress (e, file) {
       const progress = parseInt(e.loaded * 100 / e.total)

package.json

@@ -65,6 +65,7 @@
     "file-loader": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": ">=3.0.5",
+    "join-path": "^1.1.1",
     "lint-staged": ">=9",
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.8.0",