chore(release): 2.5.0

* set max image preview size to 1080x1080px

.goreleaser.yml

@@ -88,7 +88,7 @@ dockers:
     goarm: ''
     image_templates:
       - "filebrowser/filebrowser:alpine"
-      - "filebrowser/filebrowser:{{ .Tag }}-apline"
+      - "filebrowser/filebrowser:{{ .Tag }}-alpine"
       - "filebrowser/filebrowser:v{{ .Major }}-alpine"
     extra_files:
       - .docker.json

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.5.0](https://github.com/filebrowser/filebrowser/compare/v2.4.0...v2.5.0) (2020-07-17)
+
+
+### Features
+
+* add previewer title and loading indicator ([716396a](https://github.com/filebrowser/filebrowser/commit/716396a726329f0ba42fc34167dd07497c5bf47c))
+* duplicate files in the same directory ([43526d9](https://github.com/filebrowser/filebrowser/commit/43526d9d1a8c837245e3f5059e0b4737583eeaeb))
+* file copy, move and paste conflict checking ([eed9da1](https://github.com/filebrowser/filebrowser/commit/eed9da1471723ed3fbe6c00b1d6362b1c5fd8b04))
+* rename option on replace prompt ([2636f87](https://github.com/filebrowser/filebrowser/commit/2636f876ab8f88eea6d9548de524ca2339eb0843))
+* upload queue ([6ec6a23](https://github.com/filebrowser/filebrowser/commit/6ec6a2386173410f5cab9941dbf1bacb6b70ddd2))
+
+
+### Bug Fixes
+
+* blinking previewer ([9a2ebba](https://github.com/filebrowser/filebrowser/commit/9a2ebbabe2e9f0c292701d33f36f9b7a457b1164))
+* dark theme colors ([b3b6445](https://github.com/filebrowser/filebrowser/commit/b3b644527d5673e16e61d404ff58a3c7bd6b6637))
+* directory conflict checking ([7e5beef](https://github.com/filebrowser/filebrowser/commit/7e5beeff464e75ab185c430cd96e7cc67209ccc1))
+* prompt before closing window ([194030f](https://github.com/filebrowser/filebrowser/commit/194030fcfcf54a2cf5e2f8ececcbb4754474d8f8))
+* remove incomplete uploaded files ([0727496](https://github.com/filebrowser/filebrowser/commit/0727496601a9918c8131c56f62419bfac7ac589a))
+* reset clipboard after pasting cutted files ([10570ad](https://github.com/filebrowser/filebrowser/commit/10570ade442b573ebe00af08369e28b1b0688df6))
+
+## [2.4.0](https://github.com/filebrowser/filebrowser/compare/v2.3.0...v2.4.0) (2020-07-07)
+
+
+### Features
+
+* full screen editor ([0d665e5](https://github.com/filebrowser/filebrowser/commit/0d665e528f880ceda0976ceed66070ac34de7969))
+
+
+### Bug Fixes
+
+* add preview bypass for .gif files ([#1012](https://github.com/filebrowser/filebrowser/issues/1012)) ([453636d](https://github.com/filebrowser/filebrowser/commit/453636dfe2bbf177c74617862eb763485d4774bf))
+* prompt key shortcut conflict ([0d69fbd](https://github.com/filebrowser/filebrowser/commit/0d69fbd9a342aa2695859021df0c423e3ae4a4fa))
+
+## [2.3.0](https://github.com/filebrowser/filebrowser/compare/v2.2.0...v2.3.0) (2020-06-26)
+
+
+### Features
+
+* add image thumbnails support ([#980](https://github.com/filebrowser/filebrowser/issues/980)) ([6b0d49b](https://github.com/filebrowser/filebrowser/commit/6b0d49b1fc8bdce89576ba91cc0b8ec594fcd625))
+
+
+### Bug Fixes
+
+* typo in image_templates (apline -> alpine) ([#1005](https://github.com/filebrowser/filebrowser/issues/1005)) ([84da110](https://github.com/filebrowser/filebrowser/commit/84da11008516a371fc0446d97863dc14d337aa25))
+
 ## [2.2.0](https://github.com/filebrowser/filebrowser/compare/v2.1.2...v2.2.0) (2020-06-22)
 
 

fileutils/file.go

@@ -2,6 +2,7 @@ package fileutils
 
 import (
 	"io"
+	"os"
 	"path/filepath"
 
 	"github.com/spf13/afero"
@@ -25,7 +26,7 @@ func CopyFile(fs afero.Fs, source, dest string) error {
 	}
 
 	// Create the destination file.
-	dst, err := fs.Create(dest)
+	dst, err := fs.OpenFile(dest, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0775)
 	if err != nil {
 		return err
 	}

frontend/public/themes/dark.css

@@ -1,7 +1,7 @@
 :root {
-  --background: #121212;
+  --background: #141D24;
-  --surfacePrimary: #171819;
+  --surfacePrimary: #20292F;
-  --surfaceSecondary: #212528;
+  --surfaceSecondary: #3A4147;
   --divider: rgba(255, 255, 255, 0.12);
   --icon: #ffffff;
   --textPrimary: rgba(255, 255, 255, 0.87);
@@ -16,7 +16,7 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div {
+#loading .spinner div, #previewer .loading .spinner div {
   background: var(--icon);
 }
 
@@ -30,25 +30,34 @@ header {
 
 #search #input {
   background: var(--surfaceSecondary);
+  border-color: var(--surfacePrimary);
 }
-#search.active #input,
+#search #input input::placeholder {
-#search.active .boxes {
+  color: var(--textSecondary);
+}
+#search.active #input {
   background: var(--surfacePrimary);
 }
 #search.active input {
   color: var(--textPrimary);
 }
-#search.active #result {
+#search #result {
   background: var(--background);
   color: var(--textPrimary);
 }
-#search.active .boxes h3 {
+#search .boxes {
+  background: var(--surfaceSecondary);
+}
+#search .boxes h3 {
   color: var(--textPrimary);
 }
 
 .action {
   color: var(--textPrimary) !important;
 }
+.action:hover {
+  background-color: rgba(255, 255, 255, .1);
+}
 .action i {
   color: var(--icon) !important;
 }
@@ -93,6 +102,10 @@ nav > div {
   background: var(--background);
 }
 
+.message {
+  color: var(--textPrimary);
+}
+
 .card {
   background: var(--surfacePrimary);
   color: var(--textPrimary);
@@ -106,9 +119,23 @@ nav > div {
 .dashboard p label {
   color: var(--textPrimary);
 }
+.card#share ul li input,
+.card#share ul li select,
 .input {
   background: var(--surfaceSecondary);
   color: var(--textPrimary);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.input:hover,
+.input:focus {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.input--red {
+  background: #73302D;
+}
+
+.input--green {
+  background: #147A41;
 }
 
 .dashboard #nav li,
@@ -119,10 +146,35 @@ nav > div {
   color: var(--textPrimary);
 }
 
+table th {
+  color: var(--textSecondary);
+}
+
+.file-list li:hover {
+  background: var(--surfaceSecondary);
+}
+.file-list li:before {
+  color: var(--textSecondary);
+}
+.file-list li[aria-selected=true]:before {
+  color: var(--icon);
+}
+
 .shell {
   background: var(--surfacePrimary);
   color: var(--textPrimary);
 }
+.shell__result {
+  border-top: 1px solid var(--divider);
+}
+
+#editor-container {
+  background: var(--background);
+}
+
+#editor-container .bar {
+  background: var(--surfacePrimary);
+}
 
 @media (max-width: 736px) {
   #file-selection {
@@ -138,3 +190,11 @@ nav > div {
     background: var(--surfaceSecondary) !important;
   }
 }
+
+.share__box, .share__box__download {
+  background: var(--surfaceSecondary) !important;
+  color: var(--textPrimary);
+}
+.share__box__download {
+  border-bottom-color: var(--divider);
+}

frontend/src/api/files.js

@@ -94,9 +94,6 @@ export async function post (url, content = '', overwrite = false, onupload) {
       request.upload.onprogress = onupload
     }
 
-    // Send a message to user before closing the tab during file upload
-    window.onbeforeunload = () => "Files are being uploaded."
-
     request.onload = () => {
       if (request.status === 200) {
         resolve(request.responseText)
@@ -112,29 +109,28 @@ export async function post (url, content = '', overwrite = false, onupload) {
     }
 
     request.send(content)
-    // Upload is done no more message before closing the tab 
+  })
-  }).finally(() => { window.onbeforeunload = null })
 }
 
-function moveCopy (items, copy = false) {
+function moveCopy (items, copy = false, overwrite = false, rename = false) {
   let promises = []
 
   for (let item of items) {
     const from = removePrefix(item.from)
     const to = encodeURIComponent(removePrefix(item.to))
-    const url = `${from}?action=${copy ? 'copy' : 'rename'}&destination=${to}`
+    const url = `${from}?action=${copy ? 'copy' : 'rename'}&destination=${to}&override=${overwrite}&rename=${rename}`
     promises.push(resourceAction(url, 'PATCH'))
   }
 
   return Promise.all(promises)
 }
 
-export function move (items) {
+export function move (items, overwrite = false, rename = false) {
-  return moveCopy(items)
+  return moveCopy(items, false, overwrite, rename)
 }
 
-export function copy (items) {
+export function copy (items, overwrite = false, rename = false) {
-  return moveCopy(items, true)
+  return moveCopy(items, true, overwrite, rename)
 }
 
 export async function checksum (url, algo) {

frontend/src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header v-if="!isEditor">
     <div>
       <button @click="openSidebar" :aria-label="$t('buttons.toggleSidebar')" :title="$t('buttons.toggleSidebar')" class="action">
         <i class="material-icons">menu</i>
@@ -13,10 +13,6 @@
           <i class="material-icons">search</i>
         </button>
 
-        <button v-show="showSaveButton" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" class="action" id="save-button">
-          <i class="material-icons">save</i>
-        </button>
-
         <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
           <i class="material-icons">more_vert</i>
         </button>
@@ -129,9 +125,6 @@ export default {
     showUpload () {
       return this.isListing && this.user.perm.create
     },
-    showSaveButton () {
-      return this.isEditor && this.user.perm.modify
-    },
     showDownloadButton () {
       return this.isFiles && this.user.perm.download
     },

frontend/src/components/Search.vue

@@ -136,12 +136,6 @@ export default {
     }
   },
   mounted() {
-    window.addEventListener("keydown", event => {
-      if (event.keyCode === 27) {
-        this.closeHovers()
-      }
-    })
-
     this.$refs.result.addEventListener('scroll', event => {
       if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
         this.resultsCount += 50

frontend/src/components/files/Editor.vue

@@ -1,11 +1,37 @@
 <template>
-  <form id="editor"></form>
+  <div id="editor-container">
+    <div class="bar">
+      <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
+        <i class="material-icons">close</i>
+      </button>
+
+      <div class="title">
+        <span>{{ req.name }}</span>
+      </div>
+
+      <button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action">
+        <i class="material-icons">save</i>
+      </button>
+    </div>
+
+    <div id="breadcrumbs">
+      <span><i class="material-icons">home</i></span>
+
+      <span v-for="(link, index) in breadcrumbs" :key="index">
+        <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
+        <span>{{ link.name }}</span>
+      </span>
+    </div>
+
+    <form id="editor"></form>
+  </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import { files as api } from '@/api'
 import buttons from '@/utils/buttons'
+import url from '@/utils/url'
 
 import ace from 'ace-builds/src-min-noconflict/ace.js'
 import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
@@ -14,27 +40,52 @@ import { theme } from '@/utils/constants'
 
 export default {
   name: 'editor',
-  computed: {
-    ...mapState(['req'])
-  },
   data: function () {
     return {}
   },
+  computed: {
+    ...mapState(['req', 'user']),
+    breadcrumbs () {
+      let parts = this.$route.path.split('/')
+
+      if (parts[0] === '') {
+        parts.shift()
+      }
+
+      if (parts[parts.length - 1] === '') {
+        parts.pop()
+      }
+
+      let breadcrumbs = []
+
+      for (let i = 0; i < parts.length; i++) {
+        breadcrumbs.push({ name: decodeURIComponent(parts[i]) })
+      }
+
+      breadcrumbs.shift()
+
+      if (breadcrumbs.length > 3) {
+        while (breadcrumbs.length !== 4) {
+          breadcrumbs.shift()
+        }
+
+        breadcrumbs[0].name = '...'
+      }
+
+      return breadcrumbs
+    }
+  },
   created () {
     window.addEventListener('keydown', this.keyEvent)
-    document.getElementById('save-button').addEventListener('click', this.save)
   },
   beforeDestroy () {
     window.removeEventListener('keydown', this.keyEvent)
-    document.getElementById('save-button').removeEventListener('click', this.save)
     this.editor.destroy();
   },
-  mounted: function () {
+  mounted: function () {    
     const fileContent = this.req.content || '';
 
     this.editor = ace.edit('editor', {
-      maxLines: 80,
-      minLines: 20,
       value: fileContent,
       showPrintMargin: false,
       readOnly: this.req.type === 'textImmutable',
@@ -48,6 +99,10 @@ export default {
     }
   },
   methods: {
+    back () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    },
     keyEvent (event) {
       if (!event.ctrlKey && !event.metaKey) {
         return

frontend/src/components/files/ExtendedImage.vue

@@ -10,10 +10,12 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img :src="src" class="image-ex-img" ref="imgex" @load="setCenter">
+    <img :src="src" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
   </div>
 </template>
 <script>
+import throttle from 'lodash.throttle'
+
 export default {
   props: {
     src: String,
@@ -50,7 +52,12 @@ export default {
       inDrag: false,
       lastTouchDistance: 0,
       moveDisabled: false,
-      disabledTimer: null
+      disabledTimer: null,
+      imageLoaded: false,
+      position: {
+        center: { x: 0, y: 0 },
+        relative: { x: 0, y: 0 }
+      }
     }
   },
   mounted() {
@@ -63,24 +70,47 @@ export default {
     if (getComputedStyle(container).height === "0px") {
       container.style.height = "100%"
     }
+
+    window.addEventListener('resize', this.onResize)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.onResize)
+    document.removeEventListener('mouseup', this.onMouseUp)
   },
   methods: {
+    onLoad() {
+      let img = this.$refs.imgex
+
+      this.imageLoaded = true
+
+      if (img === undefined) {
+        return
+      }
+
+      img.classList.remove('image-ex-img-center')
+      this.setCenter()
+      img.classList.add('image-ex-img-ready')
+
+      document.addEventListener('mouseup', this.onMouseUp)
+    },
+    onMouseUp() {
+      this.inDrag = false
+    },
+    onResize: throttle(function() {
+      if (this.imageLoaded) {
+        this.setCenter()
+        this.doMove(this.position.relative.x, this.position.relative.y)
+      }
+    }, 100),
     setCenter() {
       let container = this.$refs.container
       let img = this.$refs.imgex
 
-      let rate = Math.min(
+      this.position.center.x = Math.floor((container.clientWidth - img.clientWidth) / 2)
-        container.clientWidth / img.clientWidth,
+      this.position.center.y = Math.floor((container.clientHeight - img.clientHeight) / 2)
-        container.clientHeight / img.clientHeight
+
-      )
+      img.style.left = this.position.center.x + 'px'
-      if (!this.autofill && rate > 1) {
+      img.style.top = this.position.center.y + 'px'
-        rate = 1
-      }
-      // height will be auto set
-      img.width = Math.floor(img.clientWidth * rate)
-      img.style.top = `${Math.floor((container.clientHeight - img.clientHeight) / 2)}px`
-      img.style.left = `${Math.floor((container.clientWidth - img.clientWidth) / 2)}px`
-      document.addEventListener('mouseup', () => this.inDrag = false )
     },
     mousedownStart(event) {
       this.lastX = null
@@ -159,8 +189,22 @@ export default {
     },
     doMove(x, y) {
       let style = this.$refs.imgex.style
-      style.left = `${this.pxStringToNumber(style.left) + x}px`
+      let posX = this.pxStringToNumber(style.left) + x
-      style.top = `${this.pxStringToNumber(style.top) + y}px`
+      let posY = this.pxStringToNumber(style.top) + y
+
+      style.left = posX + 'px'
+      style.top = posY + 'px'
+
+      this.position.relative.x =  Math.abs(this.position.center.x - posX)
+      this.position.relative.y =  Math.abs(this.position.center.y - posY)
+
+      if (posX < this.position.center.x) {
+        this.position.relative.x = this.position.relative.x * -1
+      }
+
+      if (posY < this.position.center.y) {
+        this.position.relative.y = this.position.relative.y * -1
+      }
     },
     wheelMove(event) {
       this.scale += (event.wheelDeltaY / 100) * this.zoomStep
@@ -185,9 +229,20 @@ export default {
 }
 
 .image-ex-img {
+  position: absolute;
+}
+
+.image-ex-img-center {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  transition: none;
+}
+
+.image-ex-img-ready {
   left: 0;
   top: 0;
-  position: absolute;
   transition: transform 0.1s ease;
 }
 </style>

frontend/src/components/files/Listing.vue

@@ -89,29 +89,21 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import throttle from 'lodash.throttle'
 import Item from './ListingItem'
 import css from '@/utils/css'
 import { users, files as api } from '@/api'
-import buttons from '@/utils/buttons'
+import * as upload  from '@/utils/upload'
-import url from '@/utils/url'
 
 export default {
   name: 'listing',
   components: { Item },
   data: function () {
     return {
-      show: 50,
+      showLimit: 50
-      uploading: {
-        id: 0,
-        count: 0,
-        size: 0,
-        progress: []
-      }
     }
   },
   computed: {
-    ...mapState(['req', 'selected', 'user']),
+    ...mapState(['req', 'selected', 'user', 'show']),
     nameSorted () {
       return (this.req.sorting.by === 'name')
     },
@@ -139,14 +131,14 @@ export default {
       return { dirs, files }
     },
     dirs () {
-      return this.items.dirs.slice(0, this.show)
+      return this.items.dirs.slice(0, this.showLimit)
     },
     files () {
-      let show = this.show - this.items.dirs.length
+      let showLimit = this.showLimit - this.items.dirs.length
 
-      if (show < 0) show = 0
+      if (showLimit < 0) showLimit = 0
 
-      return this.items.files.slice(0, show)
+      return this.items.files.slice(0, showLimit)
     },
     nameIcon () {
       if (this.nameSorted && !this.ascOrdered) {
@@ -195,6 +187,10 @@ export default {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
     keyEvent (event) {
+      if (this.show !== null) {
+        return
+      }
+
       if (!event.ctrlKey && !event.metaKey) {
         return
       }
@@ -252,7 +248,8 @@ export default {
 
       this.$store.commit('updateClipboard', {
         key: key,
-        items: items
+        items: items,
+        path: this.$route.path
       })
     },
     paste (event) {
@@ -265,23 +262,56 @@ export default {
       for (let item of this.$store.state.clipboard.items) {
         const from = item.from.endsWith('/') ? item.from.slice(0, -1) : item.from
         const to = this.$route.path + item.name
-        items.push({ from, to })
+        items.push({ from, to, name: item.name })
       }
 
       if (items.length === 0) {
         return
       }
 
-      if (this.$store.state.clipboard.key === 'x') {
+      let action = (overwrite, rename) => {
-        api.move(items).then(() => {
+        api.copy(items, overwrite, rename).then(() => {
           this.$store.commit('setReload', true)
         }).catch(this.$showError)
+      }
+
+      if (this.$store.state.clipboard.key === 'x') {
+        action = (overwrite, rename) => {
+          api.move(items, overwrite, rename).then(() => {
+            this.$store.commit('resetClipboard')
+            this.$store.commit('setReload', true)
+          }).catch(this.$showError)
+        }
+      }
+
+      if (this.$store.state.clipboard.path == this.$route.path) {
+        action(false, true)
+
         return
       }
 
-      api.copy(items).then(() => {
+      let conflict = upload.checkConflict(items, this.req.items)
-        this.$store.commit('setReload', true)
+
-      }).catch(this.$showError)
+      let overwrite = false
+      let rename = false
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace-rename',
+          confirm: (event, option) => {
+            overwrite = option == 'overwrite'
+            rename = option == 'rename'
+
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            action(overwrite, rename)
+          }
+        })
+
+        return
+      }
+
+      action(overwrite, rename)
     },
     resizeEvent () {
       // Update the columns size based on the window width.
@@ -292,7 +322,7 @@ export default {
     },
     scrollEvent () {
       if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
-        this.show += 50
+        this.showLimit += 50
       }
     },
     dragEnter () {
@@ -307,7 +337,7 @@ export default {
     dragEnd () {
       this.resetOpacity()
     },
-    drop: function (event) {
+    drop: async function (event) {
       event.preventDefault()
       this.resetOpacity()
 
@@ -327,65 +357,34 @@ export default {
         base = el.querySelector('.name').innerHTML + '/'
       }
 
-      if (base === '') {
+      let files = await upload.scanFiles(dt)
-        this.scanFiles(dt).then((result) => {
+      let path = this.$route.path + base
-          this.checkConflict(result, this.req.items, base)
+      let items = this.req.items
-        })
+
-      } else {
+      if (base !== '') {
-        this.scanFiles(dt).then((result) => {
+        try {
-          api.fetch(this.$route.path + base)
+          items = (await api.fetch(path)).items
-            .then(req => {
+        } catch (error) {
-                this.checkConflict(result, req.items, base)
+          this.$showError(error)
-            })
+        }
-            .catch(this.$showError)
-        })
-      }
-    },
-    checkConflict (files, items, base) {
-      if (typeof items === 'undefined' || items === null) {
-        items = []
       }
 
-      let folder_upload = false
+      let conflict = upload.checkConflict(files, items)
-      if (files[0].fullPath !== undefined) {
-        folder_upload = true
-      }
 
-      let conflict = false
+      if (conflict) {
-      for (let i = 0; i < files.length; i++) {
+        this.$store.commit('showHover', {
-        let file = files[i]
+          prompt: 'replace',
-        let name = file.name
+          confirm: (event) => {
-
+            event.preventDefault()
-        if (folder_upload) {
+            this.$store.commit('closeHovers')
-          let dirs = file.fullPath.split("/")
+            upload.handleFiles(files, path, true)
-          if (dirs.length > 1) {
-            name = dirs[0]
           }
-        }
+        })
 
-        let res = items.findIndex(function hasConflict (element) {
-          return (element.name === this)
-        }, name)
-
-        if (res >= 0) {
-          conflict = true
-          break
-        }
-      }
-
-      if (!conflict) {
-        this.handleFiles(files, base)
         return
       }
 
-      this.$store.commit('showHover', {
+      upload.handleFiles(files, path)
-        prompt: 'replace',
-        confirm: (event) => {
-          event.preventDefault()
-          this.$store.commit('closeHovers')
-          this.handleFiles(files, base, true)
-        }
-      })
     },
     uploadInput (event) {
       this.$store.commit('closeHovers')
@@ -400,7 +399,22 @@ export default {
         }
       }
 
-      this.checkConflict(files, this.req.items, '')
+      let path = this.$route.path
+      let conflict = upload.checkConflict(files, this.req.items)
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace',
+          confirm: (event) => {
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            this.handleFiles(files, path, true)
+          }
+        })
+
+        return
+      }
+      upload.handleFiles(files, path)
     },
     resetOpacity () {
       let items = document.getElementsByClassName('item')
@@ -409,145 +423,6 @@ export default {
         file.style.opacity = 1
       })
     },
-    scanFiles(dt) {
-        return new Promise((resolve) => {
-            let reading = 0
-            const contents = []
-
-            if (dt.items !== undefined) {
-              for (let item of dt.items) {
-                if (item.kind === "file" && typeof item.webkitGetAsEntry === "function") {
-                  const entry = item.webkitGetAsEntry()
-                  readEntry(entry)
-                }
-              }
-            } else {
-              resolve(dt.files)
-            }
-
-            function readEntry(entry, directory = "") {
-                if (entry.isFile) {
-                    reading++
-                    entry.file(file => {
-                        reading--
-
-                        file.fullPath = `${directory}${file.name}`
-                        contents.push(file)
-
-                        if (reading === 0) {
-                            resolve(contents)
-                        }
-                    })
-                } else if (entry.isDirectory) {
-                    const dir = {
-                      isDir: true,
-                      path: `${directory}${entry.name}`
-                    }
-
-                    contents.push(dir)
-
-                    readReaderContent(entry.createReader(), `${directory}${entry.name}`)
-                }
-            }
-
-            function readReaderContent(reader, directory) {
-                reading++
-
-                reader.readEntries(function (entries) {
-                    reading--
-                    if (entries.length > 0) {
-                        for (const entry of entries) {
-                            readEntry(entry, `${directory}/`)
-                        }
-
-                        readReaderContent(reader, `${directory}/`)
-                    }
-
-                    if (reading === 0) {
-                        resolve(contents)
-                    }
-                })
-            }
-        })
-    },
-    setProgress: throttle(function() {
-      if (this.uploading.count == 0) {
-        return
-      }
-      
-      let sum = this.uploading.progress.reduce((acc, val) => acc + val)
-      this.$store.commit('setProgress', Math.ceil(sum / this.uploading.size * 100))
-    }, 100, {leading: false, trailing: true}),
-    handleFiles (files, base, overwrite = false) {
-      if (this.uploading.count == 0) {
-        buttons.loading('upload')
-      }
-
-      let promises = []
-
-      let onupload = (id) => (event) => {
-        this.uploading.progress[id] = event.loaded
-        this.setProgress()
-      }
-
-      for (let i = 0; i < files.length; i++) {
-        let file = files[i]
-
-        if (!file.isDir) {
-          let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
-          let filenameEncoded = url.encodeRFC5987ValueChars(filename)
-
-          let id = this.uploading.id
-
-          this.uploading.size += file.size
-          this.uploading.id++
-          this.uploading.count++
-
-          let promise = api.post(this.$route.path + base + filenameEncoded, file, overwrite, throttle(onupload(id), 100)).finally(() => {            
-            this.uploading.count--
-          })
-
-          promises.push(promise)
-        } else {
-          let uri = this.$route.path + base
-          let folders = file.path.split("/")
-
-          for (let i = 0; i < folders.length; i++) {
-            let folder = folders[i]
-            let folderEncoded = encodeURIComponent(folder)
-            uri += folderEncoded + "/"
-          }
-
-          api.post(uri)
-        }
-      }
-
-      let finish = () => {
-        if (this.uploading.count > 0) {
-          return
-        }
-
-        buttons.success('upload')
-
-        this.$store.commit('setProgress', 0)
-        this.$store.commit('setReload', true)
-
-        this.uploading.id = 0
-        this.uploading.sizes = []
-        this.uploading.progress = []        
-      }
-
-      Promise.all(promises)
-        .then(() => {
-          finish()
-        })
-        .catch(error => {
-          finish()
-          this.$showError(error)
-        })
-
-      return false
-    },
     async sort (by) {
       let asc = false
 

frontend/src/components/files/ListingItem.vue

@@ -13,7 +13,8 @@
   :aria-label="name"
   :aria-selected="isSelected">
     <div>
-      <i class="material-icons">{{ icon }}</i>
+      <img v-if="type==='image'" :src="thumbnailUrl">
+      <i v-else class="material-icons">{{ icon }}</i>
     </div>
 
     <div>
@@ -30,10 +31,12 @@
 </template>
 
 <script>
+import { baseURL } from '@/utils/constants'
 import { mapMutations, mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 import { files as api } from '@/api'
+import * as upload  from '@/utils/upload'
 
 export default {
   name: 'item',
@@ -44,7 +47,7 @@ export default {
   },
   props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
   computed: {
-    ...mapState(['selected', 'req', 'user']),
+    ...mapState(['selected', 'req', 'user', 'jwt']),
     ...mapGetters(['selectedCount']),
     isSelected () {
       return (this.selected.indexOf(this.index) !== -1)
@@ -69,6 +72,10 @@ export default {
       }
 
       return true
+    },
+    thumbnailUrl () {
+      const path = this.url.replace(/^\/files\//, '')
+      return `${baseURL}/api/preview/thumb/${path}?auth=${this.jwt}&inline=true`
     }
   },
   methods: {
@@ -104,26 +111,61 @@ export default {
 
       el.style.opacity = 1
     },
-    drop: function (event) {
+    drop: async function (event) {
       if (!this.canDrop) return
       event.preventDefault()
 
       if (this.selectedCount === 0) return
 
+      let el = event.target
+      for (let i = 0; i < 5; i++) {
+        if (el !== null && !el.classList.contains('item')) {
+          el = el.parentElement
+        }
+      }
+
       let items = []
 
       for (let i of this.selected) {
         items.push({
           from: this.req.items[i].url,
-          to: this.url + this.req.items[i].name
+          to: this.url + this.req.items[i].name,
+          name: this.req.items[i].name
         })
+      }      
+
+      let base = el.querySelector('.name').innerHTML + '/'
+      let path = this.$route.path + base
+      let baseItems = (await api.fetch(path)).items
+
+      let action = (overwrite, rename) => {
+        api.move(items, overwrite, rename).then(() => {
+          this.$store.commit('setReload', true)
+        }).catch(this.$showError)
       }
 
-      api.move(items)
+      let conflict = upload.checkConflict(items, baseItems)
-        .then(() => {
+
-          this.$store.commit('setReload', true)
+      let overwrite = false
+      let rename = false
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace-rename',
+          confirm: (event, option) => {
+            overwrite = option == 'overwrite'
+            rename = option == 'rename'
+
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            action(overwrite, rename)
+          }
         })
-        .catch(this.$showError)
+
+        return
+      }
+
+      action(overwrite, rename)
     },
     click: function (event) {
       if (this.selectedCount !== 0) event.preventDefault()

frontend/src/components/files/Preview.vue

@@ -5,10 +5,22 @@
         <i class="material-icons">close</i>
       </button>
 
-      <rename-button v-if="user.perm.rename"></rename-button>
+      <div class="title">
-      <delete-button v-if="user.perm.delete"></delete-button>
+        <span>{{ this.name }}</span>
-      <download-button v-if="user.perm.download"></download-button>
+      </div>
-      <info-button></info-button>
+
+      <rename-button :disabled="loading" v-if="user.perm.rename"></rename-button>
+      <delete-button :disabled="loading" v-if="user.perm.delete"></delete-button>
+      <download-button :disabled="loading" v-if="user.perm.download"></download-button>
+      <info-button :disabled="loading"></info-button>
+    </div>
+
+    <div class="loading" v-if="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
     </div>
 
     <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
@@ -18,25 +30,27 @@
       <i class="material-icons">chevron_right</i>
     </button>
 
-    <div class="preview">
+    <template v-if="!loading">
-      <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
+      <div class="preview">
-      <audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
+        <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
-      <video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
+        <audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
-        <track
+        <video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
-          kind="captions"
+          <track
-          v-for="(sub, index) in subtitles"
+            kind="captions"
-          :key="index"
+            v-for="(sub, index) in subtitles"
-          :src="sub"
+            :key="index"
-          :label="'Subtitle ' + index" :default="index === 0">
+            :src="sub"
-        Sorry, your browser doesn't support embedded videos,
+            :label="'Subtitle ' + index" :default="index === 0">
-        but don't worry, you can <a :href="download">download it</a>
+          Sorry, your browser doesn't support embedded videos,
-        and watch it with your favorite video player!
+          but don't worry, you can <a :href="download">download it</a>
-      </video>
+          and watch it with your favorite video player!
-      <object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw"></object>
+        </video>
-      <a v-else-if="req.type == 'blob'" :href="download">
+        <object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw"></object>
-        <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
+        <a v-else-if="req.type == 'blob'" :href="download">
-      </a>
+          <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
-    </div>
+        </a>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -72,11 +86,12 @@ export default {
       previousLink: '',
       nextLink: '',
       listing: null,
+      name: '',
       subtitles: []
     }
   },
   computed: {
-    ...mapState(['req', 'user', 'oldReq', 'jwt']),
+    ...mapState(['req', 'user', 'oldReq', 'jwt', 'loading']),
     hasPrevious () {
       return (this.previousLink !== '')
     },
@@ -86,34 +101,34 @@ export default {
     download () {
       return `${baseURL}/api/raw${this.req.path}?auth=${this.jwt}`
     },
+    previewUrl () {
+      if (this.req.type === 'image') {
+        return `${baseURL}/api/preview/big${this.req.path}?auth=${this.jwt}`
+      }
+      return `${baseURL}/api/raw${this.req.path}?auth=${this.jwt}`
+    },
     raw () {
-      return `${this.download}&inline=true`
+      return `${this.previewUrl}&inline=true`
+    }
+  },
+  watch: {
+    $route: function () {
+      this.updatePreview()
     }
   },
   async mounted () {
     window.addEventListener('keyup', this.key)
-
+    this.$store.commit('setPreviewMode', true)
-    if (this.req.subtitles) {
+    this.listing = this.oldReq.items
-      this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
+    this.updatePreview()
-    }
-
-    try {
-      if (this.oldReq.items) {
-        this.updateLinks(this.oldReq.items)
-      } else {
-        const path = url.removeLastDir(this.$route.path)
-        const res = await api.fetch(path)
-        this.updateLinks(res.items)
-      }
-    } catch (e) {
-      this.$showError(e)
-    }
   },
   beforeDestroy () {
     window.removeEventListener('keyup', this.key)
+    this.$store.commit('setPreviewMode', false)
   },
   methods: {
     back () {
+      this.$store.commit('setPreviewMode', false)
       let uri = url.removeLastDir(this.$route.path) + '/'
       this.$router.push({ path: uri })
     },
@@ -132,22 +147,42 @@ export default {
         if (this.hasPrevious) this.prev()
       }
     },
-    updateLinks (items) {
+    async updatePreview () {
-      for (let i = 0; i < items.length; i++) {
+      if (this.req.subtitles) {
-        if (items[i].name !== this.req.name) {
+        this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
+      }
+
+      let dirs = this.$route.fullPath.split("/")
+      this.name = decodeURIComponent(dirs[dirs.length - 1])
+
+      if (!this.listing) {
+        try {
+          const path = url.removeLastDir(this.$route.path)
+          const res = await api.fetch(path)
+          this.listing = res.items
+        } catch (e) {
+          this.$showError(e)
+        }
+      }
+
+      this.previousLink = ''
+      this.nextLink = ''
+
+      for (let i = 0; i < this.listing.length; i++) {
+        if (this.listing[i].name !== this.name) {
           continue
         }
 
         for (let j = i - 1; j >= 0; j--) {
-          if (mediaTypes.includes(items[j].type)) {
+          if (mediaTypes.includes(this.listing[j].type)) {
-            this.previousLink = items[j].url
+            this.previousLink = this.listing[j].url
             break
           }
         }
 
-        for (let j = i + 1; j < items.length; j++) {
+        for (let j = i + 1; j < this.listing.length; j++) {
-          if (mediaTypes.includes(items[j].type)) {
+          if (mediaTypes.includes(this.listing[j].type)) {
-            this.nextLink = items[j].url
+            this.nextLink = this.listing[j].url
             break
           }
         }

frontend/src/components/prompts/Copy.vue

@@ -16,7 +16,6 @@
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
       <button class="button button--flat"
         @click="copy"
-        :disabled="$route.path === dest"
         :aria-label="$t('buttons.copy')"
         :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
     </div>
@@ -28,6 +27,7 @@ import { mapState } from 'vuex'
 import FileList from './FileList'
 import { files as api } from '@/api'
 import buttons from '@/utils/buttons'
+import * as upload  from '@/utils/upload'
 
 export default {
   name: 'copy',
@@ -42,25 +42,66 @@ export default {
   methods: {
     copy: async function (event) {
       event.preventDefault()
-      buttons.loading('copy')
       let items = []
 
       // Create a new promise for each file.
       for (let item of this.selected) {
         items.push({
           from: this.req.items[item].url,
-          to: this.dest + encodeURIComponent(this.req.items[item].name)
+          to: this.dest + encodeURIComponent(this.req.items[item].name),
+          name: this.req.items[item].name
         })
       }
 
-      try {
+      let action = async (overwrite, rename) => {
-        await api.copy(items)
+        buttons.loading('copy')
-        buttons.success('copy')
+
-        this.$router.push({ path: this.dest })
+        await api.copy(items, overwrite, rename).then(() => {
-      } catch (e) {
+          buttons.success('copy')
-        buttons.done('copy')
+
-        this.$showError(e)
+          if (this.$route.path === this.dest) {
+            this.$store.commit('setReload', true)
+
+            return
+          }
+
+          this.$router.push({ path: this.dest })
+        }).catch((e) => {
+          buttons.done('copy')
+          this.$showError(e)
+        })
       }
+
+      if (this.$route.path === this.dest) {
+        this.$store.commit('closeHovers')
+        action(false, true)
+
+        return
+      }
+
+      let dstItems = (await api.fetch(this.dest)).items
+      let conflict = upload.checkConflict(items, dstItems)
+
+      let overwrite = false
+      let rename = false
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace-rename',
+          confirm: (event, option) => {
+            overwrite = option == 'overwrite'
+            rename = option == 'rename'
+
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            action(overwrite, rename)
+          }
+        })
+
+        return
+      }
+
+      action(overwrite, rename)
     }
   }
 }

frontend/src/components/prompts/FileList.vue

@@ -41,19 +41,7 @@ export default {
     }
   },
   mounted () {
-    // If we're showing this on a listing,
+    this.fillOptions(this.req)
-    // we can use the current request object
-    // to fill the move options.
-    if (this.req.kind === 'listing') {
-      this.fillOptions(this.req)
-      return
-    }
-
-    // Otherwise, we must be on a preview or editor
-    // so we fetch the data from the previous directory.
-    files.fetch(url.removeLastDir(this.$route.path))
-      .then(this.fillOptions)
-      .catch(this.$showError)
   },
   methods: {
     fillOptions (req) {

frontend/src/components/prompts/Move.vue

@@ -27,6 +27,7 @@ import { mapState } from 'vuex'
 import FileList from './FileList'
 import { files as api } from '@/api'
 import buttons from '@/utils/buttons'
+import * as upload  from '@/utils/upload'
 
 export default {
   name: 'move',
@@ -41,26 +42,51 @@ export default {
   methods: {
     move: async function (event) {
       event.preventDefault()
-      buttons.loading('move')
       let items = []
 
       for (let item of this.selected) {
         items.push({
           from: this.req.items[item].url,
-          to: this.dest + encodeURIComponent(this.req.items[item].name)
+          to: this.dest + encodeURIComponent(this.req.items[item].name),
+          name: this.req.items[item].name
         })
       }
 
-      try {
+      let action = async (overwrite, rename) => {
-        api.move(items)
+        buttons.loading('move')
-        buttons.success('move')
+
-        this.$router.push({ path: this.dest })
+        await api.move(items, overwrite, rename).then(() => {
-      } catch (e) {
+          buttons.success('move')
-        buttons.done('move')
+          this.$router.push({ path: this.dest })
-        this.$showError(e)
+        }).catch((e) => {
+          buttons.done('move')
+          this.$showError(e)
+        })
       }
 
-      event.preventDefault()
+      let dstItems = (await api.fetch(this.dest)).items
+      let conflict = upload.checkConflict(items, dstItems)
+
+      let overwrite = false
+      let rename = false
+
+      if (conflict) {
+        this.$store.commit('showHover', {
+          prompt: 'replace-rename',
+          confirm: (event, option) => {
+            overwrite = option == 'overwrite'
+            rename = option == 'rename'
+
+            event.preventDefault()
+            this.$store.commit('closeHovers')
+            action(overwrite, rename)
+          }
+        })
+
+        return
+      }
+
+      action(overwrite, rename)
     }
   }
 }

frontend/src/components/prompts/Prompts.vue

@@ -16,6 +16,7 @@ import Copy from './Copy'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
 import Replace from './Replace'
+import ReplaceRename from './ReplaceRename'
 import Share from './Share'
 import Upload from './Upload'
 import { mapState } from 'vuex'
@@ -35,6 +36,7 @@ export default {
     NewDir,
     Help,
     Replace,
+    ReplaceRename,
     Upload
   },
   data: function () {
@@ -52,7 +54,7 @@ export default {
       return
 
       let prompt = this.$refs.currentComponent;
-      
+
       // Enter
       if (event.keyCode == 13) {
         switch (this.show) {
@@ -87,6 +89,7 @@ export default {
         'newDir',
         'download',
         'replace',
+        'replace-rename',
         'share',
         'upload'
       ].indexOf(this.show) >= 0;

frontend/src/components/prompts/ReplaceRename.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="card floating">
+    <div class="card-title">
+      <h2>{{ $t('prompts.replace') }}</h2>
+    </div>
+
+    <div class="card-content">
+      <p>{{ $t('prompts.replaceMessage') }}</p>
+    </div>
+
+    <div class="card-action">
+      <button class="button button--flat button--grey"
+        @click="$store.commit('closeHovers')"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="button button--flat button--blue"
+        @click="(event) => showConfirm(event, 'rename')"
+        :aria-label="$t('buttons.rename')"
+        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
+      <button class="button button--flat button--red"
+        @click="(event) => showConfirm(event, 'overwrite')"
+        :aria-label="$t('buttons.replace')"
+        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'replace-rename',
+  computed: mapState(['showConfirm'])
+}
+</script>

frontend/src/css/_buttons.css

@@ -25,8 +25,8 @@
   background: var(--red);
 }
 
-.button--red:hover {
+.button--blue {
-  background: var(--dark-red);
+  background: var(--blue);
 }
 
 .button--flat {

frontend/src/css/listing.css

@@ -52,6 +52,13 @@
   vertical-align: bottom;
 }
 
+#listing .item img {
+  width: 4em;
+  height: 4em;
+  margin-right: 0.1em;
+  vertical-align: bottom;
+}
+
 .message {
   text-align: center;
   font-size: 2em;
@@ -129,6 +136,11 @@
   font-size: 2em;
 }
 
+#listing.list .item div:first-of-type img {
+  width: 2em;
+  height: 2em;
+}
+
 #listing.list .item div:last-of-type {
   width: calc(100% - 3em);
   display: flex;

frontend/src/css/styles.css

@@ -125,8 +125,13 @@
   height: 3.7em;
 }
 
-#previewer .action:first-of-type {
+#previewer .bar .title {
   margin-right: auto;
+  padding: 0 1em;
+  line-height: 2.7em;
+  overflow: hidden;
+  word-break: break-word;
+  color: #fff;
 }
 
 #previewer .action i {
@@ -184,6 +189,58 @@
   right: 0.5em;
 }
 
+/* EDITOR */
+
+#editor-container {
+  background-color: #fafafa;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+#editor-container .bar {
+  width: 100%;
+  text-align: right;
+  display: flex;
+  padding: 0.5em;
+  height: 3.7em;
+  background-color: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+#editor-container .title {
+  margin-right: auto;
+  padding: 0 1em;
+  line-height: 2.7em;
+  overflow: hidden;
+  word-break: break-word;
+}
+
+#previewer .title span {
+  font-size: 1.2em;
+}
+
+#previewer .loading {
+  height: 100%;
+  width: 100%;
+}
+
+#editor-container #editor {
+  height: calc(100vh - 8.2em);
+}
+
+#editor-container #breadcrumbs {
+  height: 2.3em;
+  padding: 0 1em;
+}
+
+#editor-container #breadcrumbs span {
+  font-size: 12px;
+}
 
 /* * * * * * * * * * * * * * * *
  *            PROMPT           *

frontend/src/store/getters.js

@@ -3,7 +3,15 @@ const getters = {
   isFiles: state => !state.loading && state.route.name === 'Files',
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
-  selectedCount: state => state.selected.length
+  selectedCount: state => state.selected.length,
+  progress : state => {
+    if (state.upload.progress.length == 0) {
+      return 0;
+    }
+
+    let sum = state.upload.progress.reduce((acc, val) => acc + val)
+    return Math.ceil(sum / state.upload.size * 100);
+  }
 }
 
 export default getters

frontend/src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import mutations from './mutations'
 import getters from './getters'
+import upload from './modules/upload'
 
 Vue.use(Vuex)
 
@@ -22,12 +23,14 @@ const state = {
   show: null,
   showShell: false,
   showMessage: null,
-  showConfirm: null
+  showConfirm: null,
+  previewMode: false
 }
 
 export default new Vuex.Store({
   strict: true,
   state,
   getters,
-  mutations
+  mutations,
+  modules: { upload }
 })

frontend/src/store/modules/upload.js

@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import { files as api } from '@/api'
+import throttle from 'lodash.throttle'
+import buttons from '@/utils/buttons'
+
+const UPLOADS_LIMIT = 5;
+
+const state = {
+  id: 0,
+  size: 0,
+  progress: [],
+  queue: [],
+  uploads: {}
+}
+
+const mutations = {
+  setProgress(state, { id, loaded }) {
+    Vue.set(state.progress, id, loaded)
+  },
+  reset: (state) => {
+    state.id = 0
+    state.size = 0
+    state.progress = []
+  },
+  addJob: (state, item) => {
+    state.queue.push(item)
+    state.size += item.file.size
+    state.id++
+  },
+  moveJob(state) {
+    const item = state.queue[0]
+    state.queue.shift()
+    Vue.set(state.uploads, item.id, item)
+  },
+  removeJob(state, id) {
+    delete state.uploads[id]
+  }
+}
+
+const beforeUnload = (event) => {
+  event.preventDefault()
+  event.returnValue = ''
+}
+
+const actions = {
+  upload: (context, item) => {
+    let uploadsCount = Object.keys(context.state.uploads).length;
+
+    let isQueueEmpty = context.state.queue.length == 0
+    let isUploadsEmpty = uploadsCount == 0
+
+    if (isQueueEmpty && isUploadsEmpty) {
+      window.addEventListener('beforeunload', beforeUnload)
+      buttons.loading('upload')
+    }
+
+    context.commit('addJob', item)
+    context.dispatch('processUploads')
+  },
+  finishUpload: (context, item) => {
+    context.commit('setProgress', { id: item.id, loaded: item.file.size })
+    context.commit('removeJob', item.id)
+    context.dispatch('processUploads')
+  },
+  processUploads: async (context) => {
+    let uploadsCount = Object.keys(context.state.uploads).length;
+
+    let isBellowLimit = uploadsCount < UPLOADS_LIMIT
+    let isQueueEmpty = context.state.queue.length == 0
+    let isUploadsEmpty = uploadsCount == 0
+
+    let isFinished = isQueueEmpty && isUploadsEmpty
+    let canProcess = isBellowLimit && !isQueueEmpty
+
+    if (isFinished) {
+      window.removeEventListener('beforeunload', beforeUnload)
+      buttons.success('upload')
+      context.commit('reset')
+      context.commit('setReload', true, { root: true })
+    }
+
+    if (canProcess) {
+      const item = context.state.queue[0];
+      context.commit('moveJob')
+
+      if (item.file.isDir) {
+        await api.post(item.path).catch(Vue.prototype.$showError)
+      } else {
+        let onUpload = throttle(
+          (event) => context.commit('setProgress', { id: item.id, loaded: event.loaded }),
+          100, { leading: true, trailing: false }
+        )
+
+        await api.post(item.path, item.file, item.overwrite, onUpload).catch(Vue.prototype.$showError)
+      }
+
+      context.dispatch('finishUpload', item)
+    }
+  }
+}
+
+export default { state, mutations, actions, namespaced: true }

frontend/src/store/mutations.js

@@ -78,13 +78,14 @@ const mutations = {
   updateClipboard: (state, value) => {
     state.clipboard.key = value.key
     state.clipboard.items = value.items
+    state.clipboard.path = value.path
   },
   resetClipboard: (state) => {
     state.clipboard.key = ''
     state.clipboard.items = []
   },
-  setProgress: (state, value) => {
+  setPreviewMode(state, value) {
-    state.progress = value
+    state.previewMode = value
   }
 }
 

frontend/src/utils/upload.js

@@ -0,0 +1,130 @@
+import store from '@/store'
+import url from '@/utils/url'
+
+export function checkConflict(files, items) {
+  if (typeof items === 'undefined' || items === null) {
+    items = []
+  }
+
+  let folder_upload = files[0].fullPath !== undefined
+
+  let conflict = false
+  for (let i = 0; i < files.length; i++) {
+    let file = files[i]
+    let name = file.name
+
+    if (folder_upload) {
+      let dirs = file.fullPath.split("/")
+      if (dirs.length > 1) {
+        name = dirs[0]
+      }
+    }
+
+    let res = items.findIndex(function hasConflict(element) {
+      return (element.name === this)
+    }, name)
+
+    if (res >= 0) {
+      conflict = true
+      break
+    }
+  }
+
+  return conflict
+}
+
+export function scanFiles(dt) {
+  return new Promise((resolve) => {
+    let reading = 0
+    const contents = []
+
+    if (dt.items !== undefined) {
+      for (let item of dt.items) {
+        if (item.kind === "file" && typeof item.webkitGetAsEntry === "function") {
+          const entry = item.webkitGetAsEntry()
+          readEntry(entry)
+        }
+      }
+    } else {
+      resolve(dt.files)
+    }
+
+    function readEntry(entry, directory = "") {
+      if (entry.isFile) {
+        reading++
+        entry.file(file => {
+          reading--
+
+          file.fullPath = `${directory}${file.name}`
+          contents.push(file)
+
+          if (reading === 0) {
+            resolve(contents)
+          }
+        })
+      } else if (entry.isDirectory) {
+        const dir = {
+          isDir: true,
+          size: 0,
+          fullPath: `${directory}${entry.name}`
+        }
+
+        contents.push(dir)
+
+        readReaderContent(entry.createReader(), `${directory}${entry.name}`)
+      }
+    }
+
+    function readReaderContent(reader, directory) {
+      reading++
+
+      reader.readEntries(function (entries) {
+        reading--
+        if (entries.length > 0) {
+          for (const entry of entries) {
+            readEntry(entry, `${directory}/`)
+          }
+
+          readReaderContent(reader, `${directory}/`)
+        }
+
+        if (reading === 0) {
+          resolve(contents)
+        }
+      })
+    }
+  })
+}
+
+export function handleFiles(files, path, overwrite = false) {
+  for (let i = 0; i < files.length; i++) {
+    let file = files[i]
+
+    let filename = (file.fullPath !== undefined) ? file.fullPath : file.name
+    let filenameEncoded = url.encodeRFC5987ValueChars(filename)
+
+    let id = store.state.upload.id
+
+    let itemPath = path + filenameEncoded
+
+    if (file.isDir) {
+      itemPath = path
+      let folders = file.fullPath.split("/")
+
+      for (let i = 0; i < folders.length; i++) {
+        let folder = folders[i]
+        let folderEncoded = encodeURIComponent(folder)
+        itemPath += folderEncoded + "/"
+      }
+    }
+
+    const item = {
+      id,
+      path: itemPath,
+      file,
+      overwrite
+    }
+
+    store.dispatch('upload/upload', item);
+  }
+}

frontend/src/views/Files.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="breadcrumbs">
+    <div id="breadcrumbs" v-if="isListing || error">
       <router-link to="/files/" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
       </router-link>
@@ -10,14 +10,15 @@
         <router-link :to="link.url">{{ link.name }}</router-link>
       </span>
     </div>
+
     <div v-if="error">
       <not-found v-if="error.message === '404'"></not-found>
       <forbidden v-else-if="error.message === '403'"></forbidden>
       <internal-error v-else></internal-error>
     </div>
+    <preview v-else-if="isPreview"></preview>
     <editor v-else-if="isEditor"></editor>
     <listing :class="{ multiple }" v-else-if="isListing"></listing>
-    <preview v-else-if="isPreview"></preview>
     <div v-else>
       <h2 class="message">
         <span>{{ $t('files.loading') }}</span>
@@ -61,10 +62,11 @@ export default {
       'user',
       'reload',
       'multiple',
-      'loading'
+      'loading',
+      'show'
     ]),
     isPreview () {
-      return !this.loading && !this.isListing && !this.isEditor
+      return !this.loading && !this.isListing && !this.isEditor || this.loading && this.$store.state.previewMode
     },
     breadcrumbs () {
       let parts = this.$route.path.split('/')
@@ -158,10 +160,17 @@ export default {
       }
     },
     keyEvent (event) {
-      // Esc!
+      if (this.show !== null) {
-      if (event.keyCode === 27) {
+        // Esc!
-        this.$store.commit('closeHovers')
+        if (event.keyCode === 27) {
+          this.$store.commit('closeHovers')
+        }
 
+        return
+      }
+
+      // Esc!
+      if (event.keyCode === 27) {        
         // If we're on a listing, unselect all
         // files and folders.
         if (this.isListing) {

frontend/src/views/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="progress">
-      <div v-bind:style="{ width: $store.state.progress + '%' }"></div>
+      <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
     <site-header></site-header>
     <sidebar></sidebar>
@@ -29,7 +29,7 @@ export default {
     Shell
   },
   computed: {
-    ...mapGetters([ 'isLogged' ]),
+    ...mapGetters([ 'isLogged', 'progress' ]),
     ...mapState([ 'user' ])
   },
   watch: {

go.mod

@@ -8,6 +8,7 @@ require (
 	github.com/caddyserver/caddy v1.0.3
 	github.com/daaku/go.zipexe v1.0.1 // indirect
 	github.com/dgrijalva/jwt-go v3.2.0+incompatible
+	github.com/disintegration/imaging v1.6.2
 	github.com/dsnet/compress v0.0.1 // indirect
 	github.com/golang/snappy v0.0.1 // indirect
 	github.com/gorilla/mux v1.7.3

go.sum

@@ -43,6 +43,8 @@ github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/dgrijalva/jwt-go v3.2.0+incompatible h1:7qlOGliEKZXTDg6OTjfoBKDXWrumCAMpl/TFQ4/5kLM=
 github.com/dgrijalva/jwt-go v3.2.0+incompatible/go.mod h1:E3ru+11k8xSBh+hMPgOLZmtrrCbhqsmaPHjLKYnJCaQ=
 github.com/dgryski/go-sip13 v0.0.0-20181026042036-e10d5fee7954/go.mod h1:vAd38F8PWV+bWy6jNmig1y/TA+kYO4g3RSRF0IAv0no=
+github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
+github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
 github.com/dsnet/compress v0.0.1 h1:PlZu0n3Tuv04TzpfPbrnI0HW/YwodEXDS+oPKahKF0Q=
 github.com/dsnet/compress v0.0.1/go.mod h1:Aw8dCMJ7RioblQeTqt88akK31OvO8Dhf5JflhBbQEHo=
 github.com/dsnet/golib v0.0.0-20171103203638-1ea166775780/go.mod h1:Lj+Z9rebOhdfkVLjJ8T6VcRQv3SXugXy999NBtR9aFY=
@@ -239,6 +241,8 @@ golang.org/x/crypto v0.0.0-20190228161510-8dd112bcdc25/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20200510223506-06a226fb4e37 h1:cg5LA/zNPRzIXIWSCxQW10Rvpy94aQh3LT/ShoCpkHw=
 golang.org/x/crypto v0.0.0-20200510223506-06a226fb4e37/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8 h1:hVwzHzIUGRjiF7EcUjqNxk3NCfkPxbDKRdnNE1Rpg0U=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225 h1:kNX+jCowfMYzvlSvJu5pQWEmyWFrBXJ3PBy10xKMXK8=

http/http.go

@@ -59,6 +59,7 @@ func NewHandler(store *storage.Storage, server *settings.Server) (http.Handler,
 	api.Handle("/settings", monkey(settingsPutHandler, "")).Methods("PUT")
 
 	api.PathPrefix("/raw").Handler(monkey(rawHandler, "/api/raw")).Methods("GET")
+	api.PathPrefix("/preview/{size}/{path:.*}").Handler(monkey(previewHandler, "/api/preview")).Methods("GET")
 	api.PathPrefix("/command").Handler(monkey(commandsHandler, "/api/command")).Methods("GET")
 	api.PathPrefix("/search").Handler(monkey(searchHandler, "/api/search")).Methods("GET")
 

http/preview.go

@@ -0,0 +1,101 @@
+package http
+
+import (
+	"fmt"
+	"image"
+	"net/http"
+
+	"github.com/disintegration/imaging"
+	"github.com/gorilla/mux"
+
+	"github.com/filebrowser/filebrowser/v2/files"
+)
+
+const (
+	sizeThumb = "thumb"
+	sizeBig   = "big"
+)
+
+type imageProcessor func(src image.Image) (image.Image, error)
+
+var previewHandler = withUser(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
+	if !d.user.Perm.Download {
+		return http.StatusAccepted, nil
+	}
+	vars := mux.Vars(r)
+	size := vars["size"]
+	if size != sizeBig && size != sizeThumb {
+		return http.StatusNotImplemented, nil
+	}
+
+	file, err := files.NewFileInfo(files.FileOptions{
+		Fs:      d.user.Fs,
+		Path:    "/" + vars["path"],
+		Modify:  d.user.Perm.Modify,
+		Expand:  true,
+		Checker: d,
+	})
+	if err != nil {
+		return errToStatus(err), err
+	}
+
+	setContentDisposition(w, r, file)
+
+	switch file.Type {
+	case "image":
+		return handleImagePreview(w, r, file, size)
+	default:
+		return http.StatusNotImplemented, fmt.Errorf("can't create preview for %s type", file.Type)
+	}
+})
+
+func handleImagePreview(w http.ResponseWriter, r *http.Request, file *files.FileInfo, size string) (int, error) {
+	format, err := imaging.FormatFromExtension(file.Extension)
+	if err != nil {
+		// Unsupported extensions directly return the raw data
+		if err == imaging.ErrUnsupportedFormat {
+			return rawFileHandler(w, r, file)
+		}
+		return errToStatus(err), err
+	}
+
+	fd, err := file.Fs.Open(file.Path)
+	if err != nil {
+		return errToStatus(err), err
+	}
+	defer fd.Close()
+
+	if format == imaging.GIF && size == sizeBig {
+		if _, err := rawFileHandler(w, r, file); err != nil { //nolint: govet
+			return errToStatus(err), err
+		}
+		return 0, nil
+	}
+
+	var imgProcessor imageProcessor
+	switch size {
+	case sizeBig:
+		imgProcessor = func(img image.Image) (image.Image, error) {
+			return imaging.Fit(img, 1080, 1080, imaging.Lanczos), nil
+		}
+	case sizeThumb:
+		imgProcessor = func(img image.Image) (image.Image, error) {
+			return imaging.Thumbnail(img, 128, 128, imaging.Box), nil
+		}
+	default:
+		return http.StatusBadRequest, fmt.Errorf("unsupported preview size %s", size)
+	}
+
+	img, err := imaging.Decode(fd, imaging.AutoOrientation(true))
+	if err != nil {
+		return errToStatus(err), err
+	}
+	img, err = imgProcessor(img)
+	if err != nil {
+		return errToStatus(err), err
+	}
+	if imaging.Encode(w, img, format) != nil {
+		return errToStatus(err), err
+	}
+	return 0, nil
+}

http/raw.go

@@ -58,6 +58,15 @@ func parseQueryAlgorithm(r *http.Request) (string, archiver.Writer, error) {
 	}
 }
 
+func setContentDisposition(w http.ResponseWriter, r *http.Request, file *files.FileInfo) {
+	if r.URL.Query().Get("inline") == "true" {
+		w.Header().Set("Content-Disposition", "inline")
+	} else {
+		// As per RFC6266 section 4.3
+		w.Header().Set("Content-Disposition", "attachment; filename*=utf-8''"+url.PathEscape(file.Name))
+	}
+}
+
 var rawHandler = withUser(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
 	if !d.user.Perm.Download {
 		return http.StatusAccepted, nil
@@ -168,12 +177,7 @@ func rawFileHandler(w http.ResponseWriter, r *http.Request, file *files.FileInfo
 	}
 	defer fd.Close()
 
-	if r.URL.Query().Get("inline") == "true" {
+	setContentDisposition(w, r, file)
-		w.Header().Set("Content-Disposition", "inline")
-	} else {
-		// As per RFC6266 section 4.3
-		w.Header().Set("Content-Disposition", "attachment; filename*=utf-8''"+url.PathEscape(file.Name))
-	}
 
 	http.ServeContent(w, r, file.Name, file.ModTime, fd)
 	return 0, nil

http/resource.go

@@ -127,6 +127,10 @@ var resourcePostPutHandler = withUser(func(w http.ResponseWriter, r *http.Reques
 		return nil
 	}, action, r.URL.Path, "", d.user)
 
+	if err != nil {
+		_ = d.user.Fs.RemoveAll(r.URL.Path)
+	}
+
 	return errToStatus(err), err
 })
 
@@ -144,6 +148,31 @@ var resourcePatchHandler = withUser(func(w http.ResponseWriter, r *http.Request,
 		return http.StatusForbidden, nil
 	}
 
+	override := r.URL.Query().Get("override") == "true"
+	rename := r.URL.Query().Get("rename") == "true"
+
+	if !override && !rename {
+		if _, err = d.user.Fs.Stat(dst); err == nil {
+			return http.StatusConflict, nil
+		}
+	}
+
+	if rename {
+		counter := 1
+		dir, name := filepath.Split(dst)
+		ext := filepath.Ext(name)
+		base := strings.TrimSuffix(name, ext)
+
+		for {
+			if _, err = d.user.Fs.Stat(dst); err != nil {
+				break
+			}
+			new := fmt.Sprintf("%s(%d)%s", base, counter, ext)
+			dst = filepath.Join(dir, new)
+			counter++
+		}
+	}
+
 	err = d.RunHook(func() error {
 		switch action {
 		// TODO: use enum