Support replace feature; close #188; multiple bug fixes on upload

Former-commit-id: 30b18e418111df00903965a7e4135441cd1767a1 [formerly 60393b5e1a291d1aab2313e7dd8cd2e1e203c03b] [formerly c372bc1355db36d2d7b0bc602977616ae52a141c [formerly 6ee846ef0eab0f3b91ff3557877cd2eb63acb505]]
Former-commit-id: c6c5aa9646c78fe86af74aac00cc1c7c307ad678 [formerly 6d3accd032458203105a474b0f8204d8206c2440]
Former-commit-id: ab35a8effb0b01406bef44328ef3c45f5ea1cbfd

assets/src/components/files/Listing.vue

@@ -8,7 +8,6 @@
   </div>
   <div v-else id="listing"
     :class="req.display"
-    @drop="drop"
     @dragenter="dragEnter"
     @dragend="dragEnd">
     <div>
@@ -230,7 +229,7 @@ export default {
       if (columns === 0) columns = 1
       items.style.width = `calc(${100 / columns}% - 1em)`
     },
-    dragEnter: function (event) {
+    dragEnter (event) {
       // When the user starts dragging an item, put every
       // file on the listing with 50% opacity.
       let items = document.getElementsByClassName('item')
@@ -239,51 +238,85 @@ export default {
         file.style.opacity = 0.5
       })
     },
-    dragEnd: function (event) {
+    dragEnd (event) {
       this.resetOpacity()
     },
     drop: function (event) {
       event.preventDefault()
+      this.resetOpacity()
 
       let dt = event.dataTransfer
       let files = dt.files
       let el = event.target
 
+      if (files.length <= 0) return
+
       for (let i = 0; i < 5; i++) {
         if (el !== null && !el.classList.contains('item')) {
           el = el.parentElement
         }
       }
 
-      if (files.length > 0) {
-        if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
-          this.handleFiles(files, el.querySelector('.name').innerHTML + '/')
-          return
-        }
-
-        this.handleFiles(files, '')
-      } else {
-        this.resetOpacity()
+      let base = ''
+      if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
+        base = el.querySelector('.name').innerHTML + '/'
       }
+
+      if (base !== '') {
+        api.fetch(this.$route.path + base)
+          .then(req => {
+            this.checkConflict(files, req.items, base)
+          })
+          .catch(error => { console.log(error) })
+
+        return
+      }
+
+      this.checkConflict(files, this.req.items, base)
     },
-    uploadInput: function (event) {
-      this.handleFiles(event.currentTarget.files, '')
+    checkConflict (files, items, base) {
+      let conflict = false
+      for (let i = 0; i < files.length; i++) {
+        let res = items.findIndex(function hasConflict (element) {
+          return (element.name === this)
+        }, files[i].name)
+
+        if (res >= 0) {
+          conflict = true
+          break
+        }
+      }
+
+      if (!conflict) {
+        this.handleFiles(files, base)
+        return
+      }
+
+      this.$store.commit('showHover', {
+        prompt: 'replace',
+        confirm: (event) => {
+          event.preventDefault()
+          this.$store.commit('closeHovers')
+          this.handleFiles(files, base, true)
+        }
+      })
     },
-    resetOpacity: function () {
+    uploadInput (event) {
+      this.checkConflict(event.currentTarget.files, this.req.items, '')
+    },
+    resetOpacity () {
       let items = document.getElementsByClassName('item')
 
       Array.from(items).forEach(file => {
         file.style.opacity = 1
       })
     },
-    handleFiles: function (files, base) {
-      this.resetOpacity()
-
+    handleFiles (files, base, overwrite = false) {
       buttons.loading('upload')
       let promises = []
 
       for (let file of files) {
-        promises.push(api.post(this.$route.path + base + file.name, file))
+        promises.push(api.post(this.$route.path + base + file.name, file, overwrite))
       }
 
       Promise.all(promises)

assets/src/components/files/ListingItem.vue

@@ -9,6 +9,7 @@
   @click="click"
   @dblclick="open"
   @touchstart="touchstart"
+  :data-dir="isDir"
   :aria-label="name"
   :aria-selected="isSelected">
     <div>