From 52f644ae892756a9a884ce101a646c3465681cc1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Mon, 14 Oct 2019 15:15:02 +0200
Subject: [PATCH] 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.
---
 apps/files/src/FileUpload.js                  | 61 -------------------
 apps/files/src/components/FileDrop.vue        |  4 +-
 apps/files/src/components/FileUpload.vue      |  2 +-
 apps/files/src/components/FilesAppBar.vue     | 39 +++++++-----
 apps/files/src/components/FolderUpload.vue    |  2 +-
 .../src/components/PublicLinks/FilesDrop.vue  | 54 ++++++++--------
 apps/files/src/default.js                     |  2 +-
 apps/files/src/mixins.js                      | 47 ++++++++++----
 package.json                                  |  1 +
 yarn.lock                                     | 28 ++++++++-
 10 files changed, 118 insertions(+), 122 deletions(-)
 delete mode 100644 apps/files/src/FileUpload.js

diff --git a/apps/files/src/FileUpload.js b/apps/files/src/FileUpload.js
deleted file mode 100644
index 176fd533d8d..00000000000
--- a/apps/files/src/FileUpload.js
+++ /dev/null
@@ -1,61 +0,0 @@
-class FileUpload {
-  constructor (file, path, url, headers = {}, onProgress = () => {}, type = 'POST', onUploadEnded = () => {}) {
-    this.file = file
-    this.path = path
-    this.url = url
-    this.headers = headers
-    this.onProgress = onProgress
-    this.type = type
-    this.onUploadEnded = onUploadEnded
-  }
-
-  upload (options = {}) {
-    const xhr = new XMLHttpRequest()
-
-    // Headers
-    this.path = this.path.replace(/(^\/+)/, '')
-    let paths = this.path.split('/')
-    paths = paths.map(path => encodeURIComponent(path))
-    this.path = paths.join('/')
-    xhr.open(this.type, this.url + this.path, true)
-    xhr.responseType = 'text'
-    if (options.overwrite) {
-      this.headers['If-Match'] = options.overwrite
-      delete this.headers['If-None-Match']
-    } else {
-      this.headers['If-None-Match'] = '*'
-      delete this.headers['If-Match']
-    }
-    this._setXhrHeaders(xhr)
-
-    // Events
-    xhr.upload.addEventListener('progress', (e) => {
-      this.onProgress(e, this.file)
-    }, false)
-
-    const promise = new Promise((resolve, reject) => {
-      xhr.onload = e => {
-        xhr.status >= 200 && xhr.status < 400 ? resolve(e) : reject(new Error(xhr.statusText))
-      }
-      xhr.onloadend = e => {
-        this.onUploadEnded(this.file)
-      }
-      xhr.onerror = e => {
-        reject(e)
-      }
-    })
-
-    // Start upload
-    xhr.send(this.file)
-
-    return promise
-  }
-
-  _setXhrHeaders (xhr) {
-    Object.keys(this.headers).forEach(p =>
-      xhr.setRequestHeader(p, this.headers[p])
-    )
-  }
-}
-
-export default FileUpload
diff --git a/apps/files/src/components/FileDrop.vue b/apps/files/src/components/FileDrop.vue
index 7e15f6cddcb..549a50c2b9e 100644
--- 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,
+        url: '#', // FIXME: unused
         clickable: false,
         autoQueue: false
       }
diff --git a/apps/files/src/components/FileUpload.vue b/apps/files/src/components/FileUpload.vue
index df66c52b593..5e2bfc68d4e 100644
--- 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
index afc36a94ad1..e35906d0fa8 100644
--- 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"
@@ -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()
+          })
+        }
       })
     },
 
diff --git a/apps/files/src/components/FolderUpload.vue b/apps/files/src/components/FolderUpload.vue
index 22f233dd79f..2ad03767cda 100644
--- 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
index 6a46d7d5817..e337c104a11 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/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 })
     }
   }
 }
diff --git a/apps/files/src/default.js b/apps/files/src/default.js
index 1615cdc599a..04be3ccdfba 100644
--- 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
index 3cfa752f072..424c76d734a 100644
--- 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')
@@ -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)
diff --git a/package.json b/package.json
index ab14960771e..d88dee3cc2d 100644
--- 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",
diff --git a/yarn.lock b/yarn.lock
index 0478f0854ce..9654a8bea27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1365,6 +1365,11 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+as-array@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/as-array/-/as-array-2.0.0.tgz#4f04805d87f8fce8e511bc2108f8e5e3a287d547"
+  integrity sha1-TwSAXYf4/OjlEbwhCPjl46KH1Uc=
+
 asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -2638,9 +2643,9 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
-"davclient.js@git+https://github.com/owncloud/davclient.js.git":
+"davclient.js@https://github.com/owncloud/davclient.js.git":
   version "0.2.1"
-  resolved "git+https://github.com/owncloud/davclient.js.git#1ab200d099a3c2cd2ef919c3a56353ce26865994"
+  resolved "https://github.com/owncloud/davclient.js.git#1ab200d099a3c2cd2ef919c3a56353ce26865994"
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -5046,6 +5051,15 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
+join-path@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/join-path/-/join-path-1.1.1.tgz#10535a126d24cbd65f7ffcdf15ef2e631076b505"
+  integrity sha1-EFNaEm0ky9Zff/zfFe8uYxB2tQU=
+  dependencies:
+    as-array "^2.0.0"
+    url-join "0.0.1"
+    valid-url "^1"
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -8890,6 +8904,11 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+url-join@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-0.0.1.tgz#1db48ad422d3402469a87f7d97bdebfe4fb1e3c8"
+  integrity sha1-HbSK1CLTQCRpqH99l73r/k+x48g=
+
 url-parse@^1.4.3:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
@@ -8978,6 +8997,11 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
   integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
 
+valid-url@^1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/valid-url/-/valid-url-1.0.9.tgz#1c14479b40f1397a75782f115e4086447433a200"
+  integrity sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"