Upload files using SDK instead of XHR

Use owncloud-sdk for uploading files for both the regular file view and also public page. Removed FileUpload.js as it is now obsolete. Had to switch to using paths instead of URLs in the upload handlers. There were some challenges because the public link page currently has the token embedded into the absolute path. Introduced dependency on join-path to avoid more path gymnastics in various places.
owncloud · Nov 7, 2019 · 38e8c7e · 38e8c7e
1 parent af40532
commit 38e8c7e
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 122 deletions.
diff --git a/apps/files/src/FileUpload.js b/apps/files/src/FileUpload.js
diff --git a/apps/files/src/components/FileDrop.vue b/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,
+        path: this.path,
         clickable: false,
         autoQueue: false
       }

diff --git a/apps/files/src/components/FileUpload.vue b/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: () => {

diff --git a/apps/files/src/components/FilesAppBar.vue b/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"
@@ -91,6 +91,7 @@ import OcDialogPrompt from './ocDialogPrompt.vue'
 import FileDrop from './FileDrop.vue'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import Mixins from '../mixins'
+import join from 'join-path'
 
 export default {
   components: {
@@ -150,12 +151,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)
@@ -457,14 +454,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()
+          })
+        }
       })
     },
 

diff --git a/apps/files/src/components/FolderUpload.vue b/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: () => {

diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -51,7 +51,6 @@
 
 <script>
 import vue2DropZone from 'vue2-dropzone'
-import FileUpload from '../../FileUpload.js'
 import { mapGetters } from 'vuex'
 import Mixins from '../../mixins.js'
 
@@ -140,27 +139,23 @@ 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.files.putFileContents(event.name, 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 => {
+        this.uploadedFilesChangeTracker++
+        this.uploadedFiles.set(uploadId, { name: event.name, size: event.size, status: 'error' })
+      })
     }
   }
 }

diff --git a/apps/files/src/default.js b/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

diff --git a/apps/files/src/mixins.js b/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')
@@ -33,7 +33,7 @@ export default {
     uploadFileUniqueId: 0
   }),
   computed: {
-    ...mapGetters('Files', ['searchTerm', 'inProgress', 'files', 'selectedFiles', 'highlightedFile', 'activeFiles']),
+    ...mapGetters('Files', ['searchTerm', 'inProgress', 'files', 'selectedFiles', 'highlightedFile', 'activeFiles', 'publicLinkPassword']),
     ...mapGetters(['getToken', 'capabilities', 'fileSideBars']),
 
     _renameDialogTitle () {
@@ -391,24 +391,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)

diff --git a/package.json b/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",
@@ -74,7 +75,7 @@
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
     "owncloud-design-system": "^1.0.0-947",
-    "owncloud-sdk": "^1.0.0-368",
+    "owncloud-sdk": "https://github.com/owncloud/owncloud-sdk#b431df39718d5cfffadf35078a565e7c5d7d0d74",
     "parse-json": "^5.0.0",
     "requirejs": "^2.3.6",
     "rimraf": "^3.0.0",