chore(release): 2.26.0

Bumps [golang.org/x/image](https://github.com/golang/image) from 0.5.0 to 0.10.0.
- [Commits](https://github.com/golang/image/compare/v0.5.0...v0.10.0)

---
updated-dependencies:
- dependency-name: golang.org/x/image
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.dockerignore

@@ -1,2 +1,5 @@
 *
+!docker/*
+!healthcheck.sh
+!docker_config.json
 !filebrowser

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,19 +4,19 @@ about: Create a report to help us improve
 ---
 
 **Description**
-A clear and concise description of what the issue is about. What are you trying to do?
+<!-- A clear and concise description of what the issue is about. What are you trying to do? -->
 
 **Expected behaviour**
-What did you expect to happen?
+<!-- What did you expect to happen? -->
 
 **What is happening instead?**
-Please, give full error messages and/or log.
+<!-- Please, give full error messages and/or log. -->
 
 **Additional context**
-Add any other context about the problem here. If applicable, add screenshots to help explain your problem.
+<!-- Add any other context about the problem here. If applicable, add screenshots to help explain your problem. -->
 
 **How to reproduce?**
-Tell us how to reproduce this issue. How can someone who is starting from scratch reproduce this behaviour as minimally as possible?
+<!-- Tell us how to reproduce this issue. How can someone who is starting from scratch reproduce this behaviour as minimally as possible? -->
 
 **Files**
-A list of relevant files for this issue. Large files can be uploaded one-by-one or in a tarball/zipfile.
+<!-- A list of relevant files for this issue. Large files can be uploaded one-by-one or in a tarball/zipfile. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,13 +4,13 @@ about: Suggest an idea for this project
 ---
 
 **Is your feature request related to a problem? Please describe.**
-Add a clear and concise description of what the problem is. E.g. *I'm always frustrated when [...]*
+<!-- Add a clear and concise description of what the problem is. E.g. *I'm always frustrated when [...]* -->
 
 **Describe the solution you'd like**
-Add a clear and concise description of what you want to happen.
+<!-- Add a clear and concise description of what you want to happen.  -->
 
 **Describe alternatives you've considered**
-Add a clear and concise description of any alternative solutions or features you've considered.
+<!-- Add a clear and concise description of any alternative solutions or features you've considered.  -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,8 @@
 **Description**
+<!--
 Please explain the changes you made here.
 If the feature changes current behaviour, explain why your solution is better.
+-->
 
 :rotating_light: Before submitting your PR, please read [community](https://github.com/filebrowser/community), and indicate which issues (in any of the repos) are either fixed or closed by this PR. See [GitHub Help: Closing issues using keywords](https://help.github.com/articles/closing-issues-via-commit-messages/).
 
@@ -11,6 +13,8 @@ If the feature changes current behaviour, explain why your solution is better.
 - [ ] AVOID breaking the continuous integration build.
 
 **Further comments**
+<!--
 If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did, what alternatives you considered, etc.
 
 :heart: Thank you!
+-->

.github/workflows/main.yaml

@@ -9,29 +9,63 @@ on:
   pull_request:
 
 jobs:
+# linters
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: make lint-frontend
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-go@v2
+        with:
+          go-version: 1.21.0
+      - run: make lint-backend
+  lint-commits:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: make lint-commits
   lint:
+    runs-on: ubuntu-latest
+    needs: [lint-frontend, lint-backend, lint-commits]
+    steps:
+      - run: echo "done"
+
+# tests
+  test-frontend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-go@v2
-        with:
-          go-version: 1.16
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
-      - run: npm i -g commitlint
-      - run: make lint
-  test:
+          node-version: '18'
+      - run: make test-frontend
+  test-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-go@v2
         with:
-          go-version: 1.16
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-      - run: make test
+          go-version: 1.21.0
+      - run: make test-backend
+  test:
+    runs-on: ubuntu-latest
+    needs: [test-frontend, test-backend]
+    steps:
+      - run: echo "done"
+
+# release
   release:
     runs-on: ubuntu-latest
     needs: [lint, test]
@@ -42,15 +76,15 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-go@v2
         with:
-          go-version: 1.16
+          go-version: 1.21.0
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: '18'
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
-      - name: Build fronetend
+      - name: Build frontend
         run: make build-frontend
       - name: Login to Docker Hub
         uses: docker/login-action@v1
@@ -61,6 +95,6 @@ jobs:
         uses: goreleaser/goreleaser-action@v2
         with:
           version: latest
-          args: release --rm-dist
+          args: release --clean
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
+          GITHUB_TOKEN: ${{ secrets.GH_PAT }}

.github/workflows/stale.yml

@@ -0,0 +1,24 @@
+name: 'Close stale issues and PRs'
+permissions:
+  issues: write
+  pull-requests: write
+
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5
+        with:
+          stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
+          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
+          days-before-stale: 30
+          days-before-close: 5
+          exempt-issue-labels: 'feature ☘,enhancement ⚙,bug 🐞'
+          exempt-pr-labels: 'need-help,wip'
+          operations-per-run: 100

.gitignore

@@ -1,15 +1,14 @@
 *.db
-*.lock
 *.bak
 _old
 rice-box.go
 .idea/
-filebrowser
-dist/
+/filebrowser
+/filebrowser.exe
+/dist
 
 .DS_Store
 node_modules
-/frontend/dist
 
 # local env files
 .env.local
@@ -30,3 +29,6 @@ yarn-error.log*
 *.sw*
 bin/
 build/
+
+/frontend/dist/*
+!/frontend/dist/.gitkeep

.golangci.yml

@@ -6,6 +6,8 @@ linters-settings:
   funlen:
     lines: 100
     statements: 50
+  gci:
+    local-prefixes: github.com/filebrowser/filebrowser
   goconst:
     min-len: 2
     min-occurrences: 2
@@ -26,8 +28,6 @@ linters-settings:
     min-complexity: 15
   goimports:
     local-prefixes: github.com/filebrowser/filebrowser
-  golint:
-    min-confidence: 0
   gomnd:
     settings:
       mnd:
@@ -54,30 +54,28 @@ linters:
   enable:
     - bodyclose
     - deadcode
-    - depguard
     - dogsled
     - dupl
     - errcheck
+    - exportloopref
+    - exhaustive
     - funlen
     - gochecknoinits
     - goconst
     - gocritic
     - gocyclo
     - goimports
-    - golint
     - gomnd
     - goprintffuncname
     - gosec
     - gosimple
     - govet
     - ineffassign
-    - interfacer
     - lll
     - misspell
     - nakedret
     - nolintlint
     - rowserrcheck
-    - scopelint
     - staticcheck
     - structcheck
     - stylecheck
@@ -89,19 +87,6 @@ linters:
     - whitespace
     - prealloc
 
-  # don't enable:
-  # - asciicheck
-  # - exhaustive (TODO: enable after next release; current release at time of writing is v1.27)
-  # - gochecknoglobals
-  # - gocognit
-  # - godot
-  # - godox
-  # - goerr113
-  # - maligned
-  # - nestif
-  # - testpackage
-  # - wsl
-
 issues:
   exclude-rules:
     - path: cmd/.*.go
@@ -118,8 +103,12 @@ issues:
     - text: "Auther"
       linters:
         - misspell
+    - text: "strconv.Parse"
+      linters:
+        - gomnd
 
 run:
+  go: '1.18'
   skip-dirs:
     - frontend/
   skip-files:

.goreleaser.yml

@@ -3,36 +3,33 @@ project_name: filebrowser
 env:
   - GO111MODULE=on
 
-before:
-  hooks:
-    - make bundle-frontend
-
-build:
-  env:
-    - CGO_ENABLED=0
-  ldflags:
-    - -s -w -X github.com/filebrowser/filebrowser/v2/version.Version={{ .Version }} -X github.com/filebrowser/filebrowser/v2/version.CommitSHA={{ .ShortCommit }}
-  main: main.go
-  binary: filebrowser
-  goos:
-    - darwin
-    - linux
-    - windows
-    - freebsd
-  goarch:
-    - amd64
-    - 386
-    - arm
-    - arm64
-  goarm:
-    - 5
-    - 6
-    - 7
-  ignore:
-    - goos: darwin
-      goarch: 386
-    - goos: freebsd
-      goarch: arm
+builds:
+  - env:
+      - CGO_ENABLED=0
+    ldflags:
+      - -s -w -X github.com/filebrowser/filebrowser/v2/version.Version={{ .Version }} -X github.com/filebrowser/filebrowser/v2/version.CommitSHA={{ .ShortCommit }}
+    main: main.go
+    binary: filebrowser
+    goos:
+      - darwin
+      - linux
+      - windows
+      - freebsd
+    goarch:
+      - amd64
+      - 386
+      - arm
+      - arm64
+      - riscv64
+    goarm:
+      - 5
+      - 6
+      - 7
+    ignore:
+      - goos: darwin
+        goarch: 386
+      - goos: freebsd
+        goarch: arm
 
 archives:
   -
@@ -45,7 +42,7 @@ archives:
 dockers:
   -
     dockerfile: Dockerfile
-    use_buildx: true
+    use: buildx
     build_flag_templates:
       - "--pull"
       - "--label=org.opencontainers.image.created={{.Date}}"
@@ -59,9 +56,12 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-amd64"
       - "filebrowser/filebrowser:v{{ .Major }}-amd64"
+    extra_files:
+      - docker_config.json
+      - healthcheck.sh
   -
     dockerfile: Dockerfile
-    use_buildx: true
+    use: buildx
     build_flag_templates:
       - "--pull"
       - "--label=org.opencontainers.image.created={{.Date}}"
@@ -75,9 +75,12 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-arm64"
       - "filebrowser/filebrowser:v{{ .Major }}-arm64"
+    extra_files:
+      - docker_config.json
+      - healthcheck.sh
   -
     dockerfile: Dockerfile
-    use_buildx: true
+    use: buildx
     build_flag_templates:
       - "--pull"
       - "--label=org.opencontainers.image.created={{.Date}}"
@@ -92,9 +95,12 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-armv6"
       - "filebrowser/filebrowser:v{{ .Major }}-armv6"
+    extra_files:
+      - docker_config.json
+      - healthcheck.sh
   -
     dockerfile: Dockerfile
-    use_buildx: true
+    use: buildx
     build_flag_templates:
       - "--pull"
       - "--label=org.opencontainers.image.created={{.Date}}"
@@ -109,28 +115,78 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-armv7"
       - "filebrowser/filebrowser:v{{ .Major }}-armv7"
+    extra_files:
+      - docker_config.json
+      - healthcheck.sh
+## s6 based docker images
+  -
+    dockerfile: Dockerfile.s6
+    use: buildx
+    build_flag_templates:
+      - "--pull"
+      - "--label=org.opencontainers.image.created={{.Date}}"
+      - "--label=org.opencontainers.image.name={{.ProjectName}}"
+      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
+      - "--label=org.opencontainers.image.version={{.Version}}"
+      - "--label=org.opencontainers.image.source={{.GitURL}}"
+      - "--platform=linux/amd64"
+    goos: linux
+    goarch: amd64
+    image_templates:
+      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
+      - "filebrowser/filebrowser:v{{ .Major }}-amd64-s6"
+    extra_files:
+      - docker/root
+  -
+    dockerfile: Dockerfile.s6.aarch64
+    use: buildx
+    build_flag_templates:
+      - "--pull"
+      - "--label=org.opencontainers.image.created={{.Date}}"
+      - "--label=org.opencontainers.image.name={{.ProjectName}}"
+      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
+      - "--label=org.opencontainers.image.version={{.Version}}"
+      - "--label=org.opencontainers.image.source={{.GitURL}}"
+      - "--platform=linux/arm64"
+    goos: linux
+    goarch: arm64
+    image_templates:
+      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
+      - "filebrowser/filebrowser:v{{ .Major }}-arm64-s6"
+    extra_files:
+      - docker/root
 docker_manifests:
   - name_template: "filebrowser/filebrowser:latest"
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-amd64"
       - "filebrowser/filebrowser:{{ .Tag }}-arm64"
-      - "filebrowser/filebrowser:{{ .Tag }}-armv6"
       - "filebrowser/filebrowser:{{ .Tag }}-armv7"
   - name_template: "filebrowser/filebrowser:{{ .Tag }}"
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-amd64"
       - "filebrowser/filebrowser:{{ .Tag }}-arm64"
-      - "filebrowser/filebrowser:{{ .Tag }}-armv6"
       - "filebrowser/filebrowser:{{ .Tag }}-armv7"
   - name_template: "filebrowser/filebrowser:v{{ .Major }}"
     image_templates:
       - "filebrowser/filebrowser:v{{ .Major }}-amd64"
       - "filebrowser/filebrowser:v{{ .Major }}-arm64"
-      - "filebrowser/filebrowser:v{{ .Major }}-armv6"
       - "filebrowser/filebrowser:v{{ .Major }}-armv7"
+## s6 image manifests
+  - name_template: "filebrowser/filebrowser:s6"
+    image_templates:
+      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
+      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
+  - name_template: "filebrowser/filebrowser:{{ .Tag }}-s6"
+    image_templates:
+      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
+      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
+  - name_template: "filebrowser/filebrowser:v{{ .Major }}-s6"
+    image_templates:
+      - "filebrowser/filebrowser:v{{ .Major }}-amd64-s6"
+      - "filebrowser/filebrowser:v{{ .Major }}-arm64-s6"
 brews:
   - name: filebrowser
-    tap:
+    repository:
       owner: filebrowser
       name: homebrew-tap
     folder: Formula
@@ -139,4 +195,4 @@ brews:
       name: FileBrowser Robot
       email: robot@filebrowser.org
     description: File Browser is a create-your-own-cloud-kind of software where you can install it on a server, direct it to a path and then access your files through a nice web interface
-    license: "MIT"
+    license: "MIT"

CHANGELOG.md

@@ -2,6 +2,482 @@
 
 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.26.0](https://github.com/filebrowser/filebrowser/compare/v2.25.0...v2.26.0) (2023-11-02)
+
+
+### Features
+
+* add modern greek translation ([#2778](https://github.com/filebrowser/filebrowser/issues/2778)) ([c3079d3](https://github.com/filebrowser/filebrowser/commit/c3079d30e22385d7e677f172324cd9cbab6487ce))
+* make user session timeout configurable ([#2753](https://github.com/filebrowser/filebrowser/issues/2753)) ([7fabadc](https://github.com/filebrowser/filebrowser/commit/7fabadc871ea91ea22fe9454e2ca4b33e5c211be))
+
+
+### Bug Fixes
+
+* avoid the front-end calling api/renew loop ([#2792](https://github.com/filebrowser/filebrowser/issues/2792)) ([edd808f](https://github.com/filebrowser/filebrowser/commit/edd808f124f4ada99bcbe4bca98ddbe20e5a424c))
+* disable static resource files listing ([da1fe7c](https://github.com/filebrowser/filebrowser/commit/da1fe7c9d76a9c6a25bfa19ebd6cf8023eff5d62))
+* display file size as base 2 (KiB instead of KB) ([#2779](https://github.com/filebrowser/filebrowser/issues/2779)) ([cdcd9a3](https://github.com/filebrowser/filebrowser/commit/cdcd9a313aa50c2e6806a182b6838462d42dcafe))
+* goreleaser yaml ([4d0a68e](https://github.com/filebrowser/filebrowser/commit/4d0a68e7875274f4c939f2bfa15739a9b0ecf70a))
+* revert fetchURL changes in auth (Fixes [#2729](https://github.com/filebrowser/filebrowser/issues/2729)) ([#2739](https://github.com/filebrowser/filebrowser/issues/2739)) ([bd3c194](https://github.com/filebrowser/filebrowser/commit/bd3c1941ff8289a5dae877e08f7e25fa9b2a92c5))
+* solve docker build failed issue ([#2797](https://github.com/filebrowser/filebrowser/issues/2797)) ([6a31af6](https://github.com/filebrowser/filebrowser/commit/6a31af6c0a144128af865d802c8039fa5250e946))
+
+
+### Build
+
+* **deps-dev:** bump postcss from 8.4.27 to 8.4.31 in /frontend ([#2749](https://github.com/filebrowser/filebrowser/issues/2749)) ([21d361a](https://github.com/filebrowser/filebrowser/commit/21d361ad308d109d2a6b323597019aaa09ce1781))
+* **deps:** bump @babel/traverse in /frontend ([#2775](https://github.com/filebrowser/filebrowser/issues/2775)) ([bb4bb50](https://github.com/filebrowser/filebrowser/commit/bb4bb508a9d71516e8fa80b3a6285fe002a059d2))
+* **deps:** bump golang.org/x/image from 0.5.0 to 0.10.0 ([#2800](https://github.com/filebrowser/filebrowser/issues/2800)) ([a744bd2](https://github.com/filebrowser/filebrowser/commit/a744bd224f0ff1efc53ab94481fa76ef68788df1))
+* **deps:** bump golang.org/x/net from 0.11.0 to 0.17.0 ([#2758](https://github.com/filebrowser/filebrowser/issues/2758)) ([d574fb6](https://github.com/filebrowser/filebrowser/commit/d574fb6d1af41ec31778b0f402674e5111a7875d))
+* fix deprecated goreleaser config options ([38f7788](https://github.com/filebrowser/filebrowser/commit/38f77882559133b9ff330cfb955a9d4ea4728cf8))
+
+## [2.25.0](https://github.com/filebrowser/filebrowser/compare/v2.24.2...v2.25.0) (2023-09-14)
+
+
+### Features
+
+* add new folder button to move/create dialogs ([#2667](https://github.com/filebrowser/filebrowser/issues/2667)) ([5994224](https://github.com/filebrowser/filebrowser/commit/599422446849fa37d5ab448bbf464afb7304b99d))
+* added shell resizing ([#2648](https://github.com/filebrowser/filebrowser/issues/2648)) ([584b706](https://github.com/filebrowser/filebrowser/commit/584b706b1e310297acc2580c60442ff5c11ae432))
+* implement abort upload functionality ([#2673](https://github.com/filebrowser/filebrowser/issues/2673)) ([a404fb0](https://github.com/filebrowser/filebrowser/commit/a404fb043da2573bf04385863b2d34b1f918b8e1))
+* implement upload speed calculation and ETA estimation ([#2677](https://github.com/filebrowser/filebrowser/issues/2677)) ([ecdd684](https://github.com/filebrowser/filebrowser/commit/ecdd684bf1d537a4591caa38348102b61dd51e5d))
+
+
+### Bug Fixes
+
+* refactor path resolution logic for project root ([#2674](https://github.com/filebrowser/filebrowser/issues/2674)) ([95fec7f](https://github.com/filebrowser/filebrowser/commit/95fec7f69430c108e5cf95c428db9d671cd97a94))
+* tus upload with cloudflare proxy ([36af01d](https://github.com/filebrowser/filebrowser/commit/36af01daa6e04005ce3d18985eebaeef06f7393d)), closes [#2593](https://github.com/filebrowser/filebrowser/issues/2593)
+
+
+### Refactorings
+
+* migrate frontend tooling to vite 4 ([#2645](https://github.com/filebrowser/filebrowser/issues/2645)) ([8838a09](https://github.com/filebrowser/filebrowser/commit/8838a09cf5104deac22b6143050588040c6825e6))
+
+
+### Build
+
+* bump go version to 1.21.0 ([#2672](https://github.com/filebrowser/filebrowser/issues/2672)) ([2c97573](https://github.com/filebrowser/filebrowser/commit/2c97573301a1b13179678fb7f9bd8316539ecdff))
+* bump node version to 18 ([#2671](https://github.com/filebrowser/filebrowser/issues/2671)) ([70eba7e](https://github.com/filebrowser/filebrowser/commit/70eba7ecc9d19545c0899ae40eb3897a7c48562f))
+
+
+### Performance improvements
+
+* **backend:** optimize subtitles detection performance ([#2637](https://github.com/filebrowser/filebrowser/issues/2637)) ([374bbd3](https://github.com/filebrowser/filebrowser/commit/374bbd3ec199fddbe491ab2b74e520a10a73e54b))
+
+### [2.24.2](https://github.com/filebrowser/filebrowser/compare/v2.24.1...v2.24.2) (2023-08-08)
+
+
+### Bug Fixes
+
+* 403 error error when uploading ([#2598](https://github.com/filebrowser/filebrowser/issues/2598)) ([289c8e6](https://github.com/filebrowser/filebrowser/commit/289c8e6f32eb520cc711389f6b6a4ed94a73ecd4))
+* config init for branding.disableUsedPercentage ([#2576](https://github.com/filebrowser/filebrowser/issues/2576)) ([#2596](https://github.com/filebrowser/filebrowser/issues/2596)) ([ff1e0b8](https://github.com/filebrowser/filebrowser/commit/ff1e0b8185faf14b1f8e91830ca5e71e68ab672e))
+
+
+### Build
+
+* add riscv64 binary releases ([#2587](https://github.com/filebrowser/filebrowser/issues/2587)) ([0ac3968](https://github.com/filebrowser/filebrowser/commit/0ac39684f175487314e97403406f4d2c482e3d79))
+
+### [2.24.1](https://github.com/filebrowser/filebrowser/compare/v2.24.0...v2.24.1) (2023-07-31)
+
+
+### Bug Fixes
+
+* add directory creation code to partial upload handler ([#2575](https://github.com/filebrowser/filebrowser/issues/2575)) ([#2580](https://github.com/filebrowser/filebrowser/issues/2580)) ([912f27a](https://github.com/filebrowser/filebrowser/commit/912f27a9e3286ee4bf2a27b366a1d35b3b55799c))
+* resolved CSS rendering issue in Chrome browser ([#2582](https://github.com/filebrowser/filebrowser/issues/2582)) ([2a4a46c](https://github.com/filebrowser/filebrowser/commit/2a4a46c61a5d5376bea65b28d0eb6a7ec2fdf4e5))
+
+
+### Build
+
+* **backend:** upgrade golangci-lint to v1.53.3 ([efd41cc](https://github.com/filebrowser/filebrowser/commit/efd41cc4c147b8d2d5e61fb2642df8d934f49362))
+
+## [2.24.0](https://github.com/filebrowser/filebrowser/compare/v2.23.0...v2.24.0) (2023-07-29)
+
+
+### Features
+
+* add a healthcheck script that works with a dynamic port ([#2510](https://github.com/filebrowser/filebrowser/issues/2510)) ([ff4375c](https://github.com/filebrowser/filebrowser/commit/ff4375cf6ce849459889f892dd91304703c52dcd))
+* add a new setting that disables the display of the disk usage ([#2136](https://github.com/filebrowser/filebrowser/issues/2136)) ([428c1c6](https://github.com/filebrowser/filebrowser/commit/428c1c606d1b858ed0eb58b7c31f570bc6a9b792))
+* add Hungarian translation ([#2232](https://github.com/filebrowser/filebrowser/issues/2232)) ([11e9202](https://github.com/filebrowser/filebrowser/commit/11e92021607e12efff9fb2d5c8728483eee31199))
+* add option to copy download links from shares ([#2442](https://github.com/filebrowser/filebrowser/issues/2442)) ([a4ef02a](https://github.com/filebrowser/filebrowser/commit/a4ef02a47b53742a0ac1f639563b0c67116619c8))
+* integrate tus.io for resumable and chunked uploads ([#2145](https://github.com/filebrowser/filebrowser/issues/2145)) ([7b35815](https://github.com/filebrowser/filebrowser/commit/7b35815754690540f76e3ffe114eedb47cfd5c7e))
+
+
+### Bug Fixes
+
+* added an early return on non-existent items ([#2571](https://github.com/filebrowser/filebrowser/issues/2571)) ([2744f7d](https://github.com/filebrowser/filebrowser/commit/2744f7d5b9106c7c2eec69010e550e0939c23d80))
+* build on FreeBSD and non-Linux platforms ([#2332](https://github.com/filebrowser/filebrowser/issues/2332)) ([60d1e2d](https://github.com/filebrowser/filebrowser/commit/60d1e2d2913cce591fbee97337bd58310480269f))
+* error while using fallback of dir move ([#2349](https://github.com/filebrowser/filebrowser/issues/2349)) ([853ec90](https://github.com/filebrowser/filebrowser/commit/853ec906efbdee9013c5d34ed1d9b8fee88a6b29))
+* filter ANSI color for shell ([#2529](https://github.com/filebrowser/filebrowser/issues/2529)) ([9bcfa90](https://github.com/filebrowser/filebrowser/commit/9bcfa900f904fe683c8d9085947f57932bfe22a0))
+* goreleaser docker build ([051104b](https://github.com/filebrowser/filebrowser/commit/051104bfa061720d4402c612e61bb0fc80a946bf))
+* solve broken Docker build with alpine image ([#2486](https://github.com/filebrowser/filebrowser/issues/2486)) ([b8ee340](https://github.com/filebrowser/filebrowser/commit/b8ee3404ee480ef1fd439543ab6d46f318ff3647))
+* video preview click next or prev button subtitles not update ([#2423](https://github.com/filebrowser/filebrowser/issues/2423)) ([6744cd4](https://github.com/filebrowser/filebrowser/commit/6744cd47cef87e3a76a2190bdf123b6c2197fe6f))
+* xss vulnerability in /api/raw ([#2570](https://github.com/filebrowser/filebrowser/issues/2570)) ([#2572](https://github.com/filebrowser/filebrowser/issues/2572)) ([b508ac3](https://github.com/filebrowser/filebrowser/commit/b508ac3d4f7f0f75d6b49c99bdc661a6d2173f30))
+
+
+### Refactorings
+
+* replace username old focus logic with the autofocus attribute ([#2223](https://github.com/filebrowser/filebrowser/issues/2223)) ([2b2c108](https://github.com/filebrowser/filebrowser/commit/2b2c1085fb50ad68612ad438e527fd316d8aafee))
+
+
+### Build
+
+* **backend:** bump go version to 1.20.1 ([fa95299](https://github.com/filebrowser/filebrowser/commit/fa95299df4aa7e4c54d872e786a91ded5bdb01c1))
+* **backend:** bump go version to 1.20.6 ([9bf6b85](https://github.com/filebrowser/filebrowser/commit/9bf6b856e5411e635ba9102ff53dfe927183848e))
+* **deps-dev:** bump word-wrap from 1.2.3 to 1.2.4 in /frontend ([#2556](https://github.com/filebrowser/filebrowser/issues/2556)) ([bb34862](https://github.com/filebrowser/filebrowser/commit/bb3486286c0da112ad97456ad258ddcdfe17c154))
+* **deps:** bump minimatch from 3.0.4 to 3.1.2 in /tools ([#2561](https://github.com/filebrowser/filebrowser/issues/2561)) ([a664ba1](https://github.com/filebrowser/filebrowser/commit/a664ba1f9df45c7f6d03492c85466c5aa07c740e))
+* **deps:** bump semver from 5.7.1 to 5.7.2 in /tools ([#2546](https://github.com/filebrowser/filebrowser/issues/2546)) ([c2f1423](https://github.com/filebrowser/filebrowser/commit/c2f1423c02e4736f4c243c3164dc671879e065f3))
+* remove armv6-s6 docker target ([66dfbb3](https://github.com/filebrowser/filebrowser/commit/66dfbb303cf792b7b01650d0125d948ab8d81ddd))
+* remove armv7-s6 docker target ([4d77ce0](https://github.com/filebrowser/filebrowser/commit/4d77ce0955644551f891af3e4098c37e9cc37e40))
+
+## [2.23.0](https://github.com/filebrowser/filebrowser/compare/v2.22.4...v2.23.0) (2022-11-05)
+
+
+### Features
+
+* add rtl support ([#2178](https://github.com/filebrowser/filebrowser/issues/2178)) ([2c14146](https://github.com/filebrowser/filebrowser/commit/2c14146a314bb271be66a36c63b64852a2848e26))
+* hebrew translation ([#2168](https://github.com/filebrowser/filebrowser/issues/2168)) ([a49105d](https://github.com/filebrowser/filebrowser/commit/a49105db1d5f0d8f3d6641940ea86da959ffe006))
+* hook authentication method ([dda9a38](https://github.com/filebrowser/filebrowser/commit/dda9a389f387e94643a9a2ae56027260b210152a))
+* update Polish translation ([#2089](https://github.com/filebrowser/filebrowser/issues/2089)) ([57c99e0](https://github.com/filebrowser/filebrowser/commit/57c99e0e261b4ed4c2cf468ce3ab09f1a440b359))
+
+
+### Bug Fixes
+
+* missing video controls on mobile ([#2180](https://github.com/filebrowser/filebrowser/issues/2180)) ([a5757b9](https://github.com/filebrowser/filebrowser/commit/a5757b94e8ed492d454b9e427b7f45824cc56c5c))
+* modify the delete confirmation interface logic. ([#2138](https://github.com/filebrowser/filebrowser/issues/2138)) ([0401adf](https://github.com/filebrowser/filebrowser/commit/0401adf7f4dd76760fe26b5baee02ebc726b51a9))
+
+
+### Build
+
+* **deps:** bump ansi-html and webpack-dev-server in /frontend ([#2184](https://github.com/filebrowser/filebrowser/issues/2184)) ([3a0dace](https://github.com/filebrowser/filebrowser/commit/3a0dace9a93f9d57855801de548891010cf0830e))
+* **deps:** bump terser from 4.8.0 to 4.8.1 in /frontend ([#2054](https://github.com/filebrowser/filebrowser/issues/2054)) ([aaed985](https://github.com/filebrowser/filebrowser/commit/aaed985699b3c63092ecb02c8bc07634123360ab))
+
+### [2.22.4](https://github.com/filebrowser/filebrowser/compare/v2.22.3...v2.22.4) (2022-07-18)
+
+
+### Bug Fixes
+
+* disable cookie auth for non GET requests ([80030de](https://github.com/filebrowser/filebrowser/commit/80030dee32d161043766d57ba4e0ad0b0d99290b))
+
+
+### Build
+
+* **deps:** bump moment from 2.29.2 to 2.29.4 in /frontend ([#2036](https://github.com/filebrowser/filebrowser/issues/2036)) ([cb43770](https://github.com/filebrowser/filebrowser/commit/cb437700255e41ff559b9f5a99ab4290b2f8df87))
+* **deps:** bump shell-quote from 1.7.2 to 1.7.3 in /frontend ([#2025](https://github.com/filebrowser/filebrowser/issues/2025)) ([eaba7e5](https://github.com/filebrowser/filebrowser/commit/eaba7e5255f960141e0fc1557f87073df9f6d66a))
+
+### [2.22.3](https://github.com/filebrowser/filebrowser/compare/v2.22.2...v2.22.3) (2022-07-05)
+
+
+### Bug Fixes
+
+* use correct field name in user put api ([#2026](https://github.com/filebrowser/filebrowser/issues/2026)) ([d94acdd](https://github.com/filebrowser/filebrowser/commit/d94acdd89a0069fe87107024fd332a0d59a112fc))
+
+### [2.22.2](https://github.com/filebrowser/filebrowser/compare/v2.22.1...v2.22.2) (2022-07-01)
+
+
+### Bug Fixes
+
+* display disk capacity in a correct format ([#2013](https://github.com/filebrowser/filebrowser/issues/2013)) ([dec3d62](https://github.com/filebrowser/filebrowser/commit/dec3d629d42de567aa708154ebc4e03b5223608c))
+* don't calculate usage for files ([#1973](https://github.com/filebrowser/filebrowser/issues/1973)) ([577c0ef](https://github.com/filebrowser/filebrowser/commit/577c0efa9cff13628d5e3bac710ef568a00949e0)), closes [#1972](https://github.com/filebrowser/filebrowser/issues/1972) [#1967](https://github.com/filebrowser/filebrowser/issues/1967)
+* preview url building fix ([#1976](https://github.com/filebrowser/filebrowser/issues/1976)) ([dcf0bc6](https://github.com/filebrowser/filebrowser/commit/dcf0bc65bfcfc7df3804d7392598a92019468cf7))
+
+
+### Build
+
+* **backend:** upgrade golangci-lint to 1.46.2 ([#1991](https://github.com/filebrowser/filebrowser/issues/1991)) ([8118afd](https://github.com/filebrowser/filebrowser/commit/8118afd0ac0d25f4503c98879369764c35e7408e))
+
+### [2.22.1](https://github.com/filebrowser/filebrowser/compare/v2.22.0...v2.22.1) (2022-06-06)
+
+
+### Bug Fixes
+
+* use correct basepath prefix for preview urls ([#1971](https://github.com/filebrowser/filebrowser/issues/1971)) ([1e7d3b2](https://github.com/filebrowser/filebrowser/commit/1e7d3b25c283c556d98c65f1c2f46db4e4178995))
+
+
+### Build
+
+* **backend:** bump go version to 1.8.3 ([b16982d](https://github.com/filebrowser/filebrowser/commit/b16982df0f7da9eedb678455298b42ac55c86666))
+
+## [2.22.0](https://github.com/filebrowser/filebrowser/compare/v2.21.1...v2.22.0) (2022-06-03)
+
+
+### Features
+
+* add branding to the window title ([#1850](https://github.com/filebrowser/filebrowser/issues/1850)) ([f8dfbf7](https://github.com/filebrowser/filebrowser/commit/f8dfbf7eeecf3ee99ce906276777676f44e81e34))
+* add disk usage information to the sidebar ([d1d8e3e](https://github.com/filebrowser/filebrowser/commit/d1d8e3e3405381b01317fe07ae729d70219415a7))
+* automatically focus username field on login page ([596c732](https://github.com/filebrowser/filebrowser/commit/596c73288f5b53bd7e79ab8046136dc75ff078b9))
+* invalid symlink icon ([b14b911](https://github.com/filebrowser/filebrowser/commit/b14b9114f837cacf9f7788e88c503142a81585be))
+* page title localization ([8a43413](https://github.com/filebrowser/filebrowser/commit/8a43413f888440dc11b11c509abff45f706033d8))
+
+
+### Bug Fixes
+
+* allow CSP inline styling ([5da9d74](https://github.com/filebrowser/filebrowser/commit/5da9d74da62c69c431361bcaf0c07dc1da237ea8))
+* disable autocapitalize of login input (closes [#1910](https://github.com/filebrowser/filebrowser/issues/1910)) ([aed3af5](https://github.com/filebrowser/filebrowser/commit/aed3af58384697dc3de30f1450b837b0b74e4fa6))
+* drag-and-drop folder upload ([e677c78](https://github.com/filebrowser/filebrowser/commit/e677c78471f09f8d2c21d63d7388e908924aa6d9))
+* expired token error ([c3bd118](https://github.com/filebrowser/filebrowser/commit/c3bd1188aa396cbf00c593d259a9da0eddeeea3b))
+* folder info on upload list ([d1d7b23](https://github.com/filebrowser/filebrowser/commit/d1d7b23da6cc0c9a2f2f3e17021ec4f13ea557dd))
+* network error object message ([fc209f6](https://github.com/filebrowser/filebrowser/commit/fc209f64deff7a2793980d11ee738f7140c444cf))
+* set correct scope when user home creation is enabled ([02730bb](https://github.com/filebrowser/filebrowser/commit/02730bb9bfa3bfbfa251bb4736fc4c08d33609ab))
+
+
+### Build
+
+* **backend:** bump dependency versions ([7c9a75e](https://github.com/filebrowser/filebrowser/commit/7c9a75e72588f92d58fb58d32cdac352bce73b20))
+* **deps:** bump async from 2.6.3 to 2.6.4 in /frontend ([#1933](https://github.com/filebrowser/filebrowser/issues/1933)) ([e5fa96b](https://github.com/filebrowser/filebrowser/commit/e5fa96b666eac2e46a02bde832488baca5f2cd6d))
+* **deps:** bump eventsource from 1.1.0 to 1.1.1 in /frontend ([dd50369](https://github.com/filebrowser/filebrowser/commit/dd503695a1a8119a631643414d3a9070890f3f3c))
+* **deps:** bump minimist from 1.2.5 to 1.2.6 in /frontend ([#1889](https://github.com/filebrowser/filebrowser/issues/1889)) ([a74c72d](https://github.com/filebrowser/filebrowser/commit/a74c72db451207e1275988f3d208fa6d6f0468a9))
+* **deps:** bump minimist from 1.2.5 to 1.2.6 in /tools ([#1891](https://github.com/filebrowser/filebrowser/issues/1891)) ([f5b1e10](https://github.com/filebrowser/filebrowser/commit/f5b1e106183fb2192063a72fd195fc8c181ba8f9))
+* **deps:** bump moment from 2.29.1 to 2.29.2 in /frontend ([#1900](https://github.com/filebrowser/filebrowser/issues/1900)) ([040584c](https://github.com/filebrowser/filebrowser/commit/040584c86563d869c7a05887ef1f781bce653033))
+* **deps:** bump url-parse from 1.5.7 to 1.5.10 in /frontend ([#1841](https://github.com/filebrowser/filebrowser/issues/1841)) ([b2ad3f7](https://github.com/filebrowser/filebrowser/commit/b2ad3f73686a2abaa4fc62963fba6f83c9da9b5e))
+* **frontend:** bump node version from 14 to 16 ([ac3ead8](https://github.com/filebrowser/filebrowser/commit/ac3ead8dcef9c64c6be8b5cbbceee143b2cc77a8))
+* upgrade go version to 1.18.1 ([6bd34c7](https://github.com/filebrowser/filebrowser/commit/6bd34c76324780c1edd8625d5b22f5a84990852b))
+
+### [2.21.1](https://github.com/filebrowser/filebrowser/compare/v2.21.0...v2.21.1) (2022-02-22)
+
+
+### Bug Fixes
+
+* display user scope for admin users ([#1834](https://github.com/filebrowser/filebrowser/issues/1834)) ([6366cf0](https://github.com/filebrowser/filebrowser/commit/6366cf0b181f13eac38f69f1760d6f6f0586a5d1))
+
+## [2.21.0](https://github.com/filebrowser/filebrowser/compare/v2.20.1...v2.21.0) (2022-02-21)
+
+
+### Features
+
+* add colorized file type icons ([2948589](https://github.com/filebrowser/filebrowser/commit/2948589fcde6d1dca7f3ea52a621d8213fa3300c))
+* add gallery view mode ([8888b9f](https://github.com/filebrowser/filebrowser/commit/8888b9f44640394df9e3583db4392472d7027a4b))
+* add Ukrainian translation / update Russian translation ([#1753](https://github.com/filebrowser/filebrowser/issues/1753)) ([665e458](https://github.com/filebrowser/filebrowser/commit/665e45889cd333f1e3500e4bf38d15d229c9fe2a))
+* add upload file list with progress ([#1825](https://github.com/filebrowser/filebrowser/issues/1825)) ([cf85404](https://github.com/filebrowser/filebrowser/commit/cf85404dd25cd7fdd73aa32878b4dc5f85ee3e96))
+* smaller column width to fit 2 columns in landscape mobiles ([7870e89](https://github.com/filebrowser/filebrowser/commit/7870e89bc04f1494f2705795476b5f1c9d621e38))
+* use real image path to calculate cache key ([c198723](https://github.com/filebrowser/filebrowser/commit/c1987237d05adcce77c614e5247a181ae5cdfacd))
+
+
+### Bug Fixes
+
+* correctly handle non-ascii passwords for shared resources ([c782f21](https://github.com/filebrowser/filebrowser/commit/c782f21b0fa4511a15e7015117d075eaf5ea332c))
+* don't expose scope for non-admin users ([0942fc7](https://github.com/filebrowser/filebrowser/commit/0942fc7042fd949cce91855169d0bcf16eb75771))
+* open all the pdf files correctly ([#1742](https://github.com/filebrowser/filebrowser/issues/1742)) ([949f0f2](https://github.com/filebrowser/filebrowser/commit/949f0f277f6004904b3edfa716a8365ec93fa0fa))
+
+
+### Build
+
+* **deps:** bump browserslist from 4.16.3 to 4.19.1 in /frontend ([8089007](https://github.com/filebrowser/filebrowser/commit/80890075e802e2a4217edbb01d6417122d702f5e))
+* **deps:** bump dns-packet from 1.3.1 to 1.3.4 in /frontend ([a73d7f1](https://github.com/filebrowser/filebrowser/commit/a73d7f14b787935c6ebe525dba64b65f8ed733e2))
+* **deps:** bump follow-redirects from 1.13.3 to 1.14.8 in /frontend ([f1f7f17](https://github.com/filebrowser/filebrowser/commit/f1f7f17ade8d40fc6cfb22c79960bce299876b56))
+* **deps:** bump hosted-git-info from 2.8.8 to 2.8.9 in /frontend ([e7659ea](https://github.com/filebrowser/filebrowser/commit/e7659ea36bdf780ce17005f7170a2fef02a2d5e5))
+* **deps:** bump path-parse from 1.0.6 to 1.0.7 in /frontend ([c014966](https://github.com/filebrowser/filebrowser/commit/c01496624a7ebfc8a7c256bd919a400367281cbb))
+* **deps:** bump postcss from 7.0.35 to 7.0.39 in /frontend ([9182d33](https://github.com/filebrowser/filebrowser/commit/9182d33e1cc375473fb18989a92d20252884f096))
+* **deps:** bump ssri from 6.0.1 to 6.0.2 in /frontend ([3717186](https://github.com/filebrowser/filebrowser/commit/371718634b11f32e68165f31c51b6b1139c829ec))
+* **deps:** bump tar from 6.1.0 to 6.1.11 in /frontend ([010d16f](https://github.com/filebrowser/filebrowser/commit/010d16fc1d8f0200e5662943aef17ee89c5877b7))
+* **deps:** bump url-parse from 1.5.1 to 1.5.4 in /frontend ([8906408](https://github.com/filebrowser/filebrowser/commit/8906408a8f0ed86d1e11ea90fc573b36815c9c0d))
+* **deps:** bump url-parse from 1.5.4 to 1.5.7 in /frontend ([228ebea](https://github.com/filebrowser/filebrowser/commit/228ebea66cc871b33459406590a80ef906298e7d))
+* **deps:** bump ws from 6.2.1 to 6.2.2 in /frontend ([73c8073](https://github.com/filebrowser/filebrowser/commit/73c80732d934bc8802a6d7c7a559cad37df405f0))
+
+### [2.20.1](https://github.com/filebrowser/filebrowser/compare/v2.20.0...v2.20.1) (2021-12-21)
+
+
+### Build
+
+* revert to using the default alpine based docker image ([46d8046](https://github.com/filebrowser/filebrowser/commit/46d80464d2a67927b06a11b83fb137ad364a90ed))
+
+## [2.20.0](https://github.com/filebrowser/filebrowser/compare/v2.19.0...v2.20.0) (2021-12-20)
+
+
+### Features
+
+* detect multiple subtitle languages ([#1723](https://github.com/filebrowser/filebrowser/issues/1723)) ([c2e03bb](https://github.com/filebrowser/filebrowser/commit/c2e03bbfab97fc6716bcdd59158e9d5129bf0ea7))
+* use linuxserver based docker image ([b8f35ce](https://github.com/filebrowser/filebrowser/commit/b8f35ce9322c2b0dbf954cfd3ff584bc9f742fdd))
+
+
+### Bug Fixes
+
+* set correct default database path in the config ([988d3e5](https://github.com/filebrowser/filebrowser/commit/988d3e5bdd224509ddc2f08444560e3087e9c67d))
+* upgrade vulnerable versions of the library ([6eb3ab0](https://github.com/filebrowser/filebrowser/commit/6eb3ab063509a015ad630ab704ae3791461d0982))
+
+
+### Build
+
+* refactor makefile ([f81857a](https://github.com/filebrowser/filebrowser/commit/f81857acce25936a700945db5ef4af545eaeb1cf))
+* remove deprecated goreleaser use_buildx param ([4d1b9dd](https://github.com/filebrowser/filebrowser/commit/4d1b9dd2112002a93bb26cece07dcfd81c31dc2c))
+
+## [2.19.0](https://github.com/filebrowser/filebrowser/compare/v2.18.0...v2.19.0) (2021-11-24)
+
+
+### Features
+
+* prefetch previous and next images in preview. ([#1627](https://github.com/filebrowser/filebrowser/issues/1627)) ([7401d16](https://github.com/filebrowser/filebrowser/commit/7401d16e457bb232fd7dd7ef427e8960d465705c))
+
+
+### Bug Fixes
+
+* empty file listing on share ([e082397](https://github.com/filebrowser/filebrowser/commit/e08239781f61e7bb25d9b8c5c6cce90f34621a76))
+* relative font sizes ([c29698d](https://github.com/filebrowser/filebrowser/commit/c29698dffac769077ab7c7869569a902979ee3d7))
+
+## [2.18.0](https://github.com/filebrowser/filebrowser/compare/v2.17.2...v2.18.0) (2021-10-31)
+
+
+### Features
+
+* add ability to select file modified time format ([#1536](https://github.com/filebrowser/filebrowser/issues/1536)) ([0426629](https://github.com/filebrowser/filebrowser/commit/0426629a59c712849570d3e29956948ae7725a4a))
+* add manifest theme color param ([#1542](https://github.com/filebrowser/filebrowser/issues/1542)) ([0358e42](https://github.com/filebrowser/filebrowser/commit/0358e42d2c206732fffa77714f5a66f4fe50a69d))
+
+
+### Bug Fixes
+
+* back button behaviour in preview ([#1573](https://github.com/filebrowser/filebrowser/issues/1573)) ([deabc80](https://github.com/filebrowser/filebrowser/commit/deabc80fd7670983039dfcd29531b45002ca5d9e))
+* fix sidebar navigation on mobile devices ([#1618](https://github.com/filebrowser/filebrowser/issues/1618)) ([f09bf3e](https://github.com/filebrowser/filebrowser/commit/f09bf3e1d076b27d29ba8a91cf448a99993bc444))
+* search box is misaligned when the browser preferred font size is other than 16px ([#1613](https://github.com/filebrowser/filebrowser/issues/1613)) ([6f345be](https://github.com/filebrowser/filebrowser/commit/6f345be3e47ba57ecc1eb9a62587ab949078c125))
+* security issue in command runner (closes [#1621](https://github.com/filebrowser/filebrowser/issues/1621)) ([74b7cd8](https://github.com/filebrowser/filebrowser/commit/74b7cd8e81840537a8206317344f118093153e8d))
+* set correct editor height regardless of preferred font size ([#1614](https://github.com/filebrowser/filebrowser/issues/1614)) ([ddd4ffa](https://github.com/filebrowser/filebrowser/commit/ddd4ffa4caa6b292a3a644ecd897aba1237c7503))
+* zoom pics when dlclick at first time ([#1561](https://github.com/filebrowser/filebrowser/issues/1561)) ([b6a51be](https://github.com/filebrowser/filebrowser/commit/b6a51bed516814944f8aa41440652242d57824c5))
+
+### [2.17.2](https://github.com/filebrowser/filebrowser/compare/v2.17.1...v2.17.2) (2021-08-27)
+
+
+### Bug Fixes
+
+* bug with inlineLink not creating url properly ([#1515](https://github.com/filebrowser/filebrowser/issues/1515)) ([43a4609](https://github.com/filebrowser/filebrowser/commit/43a460993c3f0d158b876db4b20caa7963e9f361))
+
+### [2.17.1](https://github.com/filebrowser/filebrowser/compare/v2.17.0...v2.17.1) (2021-08-23)
+
+
+### Bug Fixes
+
+* internal server error if --disable-preview-resize flag is set (closes [#1510](https://github.com/filebrowser/filebrowser/issues/1510)) ([4c3099a](https://github.com/filebrowser/filebrowser/commit/4c3099a086c206dcb3bc70ee8c8da02eee61c30b))
+
+## [2.17.0](https://github.com/filebrowser/filebrowser/compare/v2.16.1...v2.17.0) (2021-08-21)
+
+
+### Features
+
+* open file option on preview ([76add9e](https://github.com/filebrowser/filebrowser/commit/76add9e5274b0373c6b983e3b20e387a14ea6c9e))
+
+
+### Bug Fixes
+
+* 401 error in share view open file button ([#1495](https://github.com/filebrowser/filebrowser/issues/1495)) ([25c8788](https://github.com/filebrowser/filebrowser/commit/25c87883908babde073390a2e2320a8e5880a87c))
+* escape quote on index template ([23d646c](https://github.com/filebrowser/filebrowser/commit/23d646c456876d06cf48e71c1e57b69de99511f0)), closes [#1501](https://github.com/filebrowser/filebrowser/issues/1501)
+* file caching directive ([c63cc5a](https://github.com/filebrowser/filebrowser/commit/c63cc5a2d25909cc4e2f2e7235f276ec66c32bf2))
+
+### [2.16.1](https://github.com/filebrowser/filebrowser/compare/v2.16.0...v2.16.1) (2021-08-04)
+
+
+### Bug Fixes
+
+* check symlink target type (closes [#1488](https://github.com/filebrowser/filebrowser/issues/1488)) ([76b466f](https://github.com/filebrowser/filebrowser/commit/76b466f6492e74cf13e66a33e7e5f597ac92b240))
+
+## [2.16.0](https://github.com/filebrowser/filebrowser/compare/v2.15.0...v2.16.0) (2021-07-26)
+
+
+### Features
+
+* browser cache directives ([190cb99](https://github.com/filebrowser/filebrowser/commit/190cb99a79a0d438eca2da13539f8c6449ad73ac))
+* display error messages on settings ([6032038](https://github.com/filebrowser/filebrowser/commit/603203848a8b2221158088b6d849609db4c0c46c))
+* file name on page title ([16a34de](https://github.com/filebrowser/filebrowser/commit/16a34defc02554a77c6ac47b9e17e69d098a09fe))
+* gzip encoding for static js files ([aa172b8](https://github.com/filebrowser/filebrowser/commit/aa172b8bb5f17d5f5cb9666bfb5ee650d8091fb5))
+* loading spinner on views navigation ([976eb55](https://github.com/filebrowser/filebrowser/commit/976eb5583dae474125fd7ddec5dc19b6c291f98f))
+* message for connection error ([5e6f14b](https://github.com/filebrowser/filebrowser/commit/5e6f14b5dcb9c5efdf526f1346e09c2d0b2f6974))
+* mod time title on file info ([7d1e030](https://github.com/filebrowser/filebrowser/commit/7d1e03075d2c27148f60813defa0f68403d1d3c2))
+* open file option on share ([1c25f6e](https://github.com/filebrowser/filebrowser/commit/1c25f6ee69bd71eed82af7020006d0e27537a967))
+* show more button on share ([ba8c09f](https://github.com/filebrowser/filebrowser/commit/ba8c09f454feeadf4a1e97547a34151a81b389d5))
+* support for IE11 browser ([7ec24d9](https://github.com/filebrowser/filebrowser/commit/7ec24d9d7794fa37825f64ca2d1575f568fb1362))
+
+
+### Bug Fixes
+
+* break resource create/update handlers on error (closes [#1464](https://github.com/filebrowser/filebrowser/issues/1464)) ([5072bbb](https://github.com/filebrowser/filebrowser/commit/5072bbb2cbf5b29d041629faa8367f15e4d145a2))
+* copying files with special characters ([20ebbf6](https://github.com/filebrowser/filebrowser/commit/20ebbf6611b734371426fb1b9cb5e388be90bf7e))
+* delete image cache when moving ([8973c45](https://github.com/filebrowser/filebrowser/commit/8973c4598ff817647f1f1ad6ee36480054cd2776))
+* don't remove files on unsuccessful updates (closes [#1456](https://github.com/filebrowser/filebrowser/issues/1456)) ([6b19ab6](https://github.com/filebrowser/filebrowser/commit/6b19ab6613b12be7f075299cd98f4b41d43827c7))
+* failure on broken symlink deletion ([8650d2f](https://github.com/filebrowser/filebrowser/commit/8650d2ffe7a29cbafa800efcecbf6a61598a9f0c))
+* inconsistent double click on listing item ([ba7e71a](https://github.com/filebrowser/filebrowser/commit/ba7e71a7c3b0cc71012e5adf94b1c642e554972e))
+* no items displayed on file listing ([18889ad](https://github.com/filebrowser/filebrowser/commit/18889ad725f7f7e5a7e3f7abcf156487556dbeaf))
+* omit file content ([209f9fa](https://github.com/filebrowser/filebrowser/commit/209f9fa77f751054512355f2b74b9b7258465d0b))
+* short commit sha and typo fix in Makefile ([#1411](https://github.com/filebrowser/filebrowser/issues/1411)) ([46ee595](https://github.com/filebrowser/filebrowser/commit/46ee59538914dc2859f0da6b32e2d062d0a01b10))
+
+## [2.15.0](https://github.com/filebrowser/filebrowser/compare/v2.14.1...v2.15.0) (2021-04-06)
+
+
+### Features
+
+* add EXIF thumbnail support for JPEG files ([#1234](https://github.com/filebrowser/filebrowser/issues/1234)) ([7dd5b34](https://github.com/filebrowser/filebrowser/commit/7dd5b34d425dfbc2782152310483cbecf85c800a))
+* dynamic autoplay on previewer ([a76e01d](https://github.com/filebrowser/filebrowser/commit/a76e01d2b78a785f3665a8b3532c7cc566bfabce))
+* dynamic item count on file listing ([6c8ee96](https://github.com/filebrowser/filebrowser/commit/6c8ee96e6a21fae5d4608bdc7a5c5a161d7dafd3))
+* dynamic zoom limit on previewer ([e410272](https://github.com/filebrowser/filebrowser/commit/e410272e6be6a0b660efe8d4eee6c6e9dd834cc5))
+
+
+### Bug Fixes
+
+* buttons without permission on header ([1516d99](https://github.com/filebrowser/filebrowser/commit/1516d9932bf9926ac8b4cb3e738a5f51e80d5b1d))
+* check modify permission on file overwrite ([59f9964](https://github.com/filebrowser/filebrowser/commit/59f9964e80c8233775f27be33a4c16a31bfe848a))
+* empty archive name on directory download ([2697093](https://github.com/filebrowser/filebrowser/commit/2697093ac151f74eea3022951d128acfe04d1dcf))
+* empty text file on editor ([e9baf0c](https://github.com/filebrowser/filebrowser/commit/e9baf0c4b688fab291cdc842ec464c7a7a816499))
+* error causes panic on upload ([e1a6f59](https://github.com/filebrowser/filebrowser/commit/e1a6f593e1824e7fa4345a61dff5b1bb8cd22d05))
+* hidden editor header on Safari ([b521dec](https://github.com/filebrowser/filebrowser/commit/b521dec8f9b14dd92248c429e902ebc639046389))
+* image quality switch on previewer ([c0d85f3](https://github.com/filebrowser/filebrowser/commit/c0d85f3d85926c8790757bf142140d19455ae8ca))
+* list item interactions on share ([87f1881](https://github.com/filebrowser/filebrowser/commit/87f1881b429877a740ea84a8e783ad4103248289))
+* missing bold variation for Roboto font ([98d79b8](https://github.com/filebrowser/filebrowser/commit/98d79b8ed955df5691a306d709b4ab60d91da408))
+* mouse wheel zoom on previewer ([fcb115f](https://github.com/filebrowser/filebrowser/commit/fcb115f42d33db2be7a4d428ec53d65d6050320b))
+* no header button animations on file listing ([fe80730](https://github.com/filebrowser/filebrowser/commit/fe80730bb135b38e4d9de470c75cbe10b1aec201))
+
+### [2.14.1](https://github.com/filebrowser/filebrowser/compare/v2.14.0...v2.14.1) (2021-03-21)
+
+
+### Bug Fixes
+
+* display public routes with header proxy auth ([da54bd6](https://github.com/filebrowser/filebrowser/commit/da54bd6c214d7ee39b71d710ddfe6dd25fc4e5d6))
+
+## [2.14.0](https://github.com/filebrowser/filebrowser/compare/v2.13.0...v2.14.0) (2021-03-21)
+
+
+### Features
+
+* add health check handler ([a721dc1](https://github.com/filebrowser/filebrowser/commit/a721dc1f314732e60d331a1a7da97d06e0e8b613))
+
+
+### Bug Fixes
+
+* hide dotfile error on share ([5f4a031](https://github.com/filebrowser/filebrowser/commit/5f4a0317ab5685fe4a558df74e604c12e04a1c10))
+* prefix handling on http router ([93a35ad](https://github.com/filebrowser/filebrowser/commit/93a35ad2516accdcb9735db509550979d01de2c3))
+* qr code url on share ([22f4be8](https://github.com/filebrowser/filebrowser/commit/22f4be8f54162b7cf494177705ffb8b09117bd01))
+* text file detection on editor ([eeadc53](https://github.com/filebrowser/filebrowser/commit/eeadc532fe6057969b3c1a4726f236851b154cfa))
+
+## [2.13.0](https://github.com/filebrowser/filebrowser/compare/v2.12.1...v2.13.0) (2021-03-14)
+
+
+### Features
+
+* dual pane settings view ([db5aad8](https://github.com/filebrowser/filebrowser/commit/db5aad8eb679cfe1b1ace5142cf342951217f0f7))
+* improved settings navbar ([5b28aa0](https://github.com/filebrowser/filebrowser/commit/5b28aa0848710b9d3ee02a2aa912856395f48bd2))
+* improved sharing prompt ([1819377](https://github.com/filebrowser/filebrowser/commit/18193778971e27d18b5a35df8c2d0e2953b48111))
+* increased header button counter size ([4fb832c](https://github.com/filebrowser/filebrowser/commit/4fb832c0422107e16f22b7aa928224f36de4978f))
+* larger previewer content ([62fff5c](https://github.com/filebrowser/filebrowser/commit/62fff5ca60da1f887c1f95fa4808d3753596dab2))
+
+
+### Bug Fixes
+
+* archive contains parent path on Windows ([54f3570](https://github.com/filebrowser/filebrowser/commit/54f35701a2bd5cb7ec0628ca9789047072c073db))
+* check rules on http resource handlers ([5bf1554](https://github.com/filebrowser/filebrowser/commit/5bf15548d0ad147acfad5000277531be2671f7ce))
+* download current dir on file listing ([488d980](https://github.com/filebrowser/filebrowser/commit/488d98045e7476ed11e53c13d9498a9db3165bbc))
+* encoded file path on share ([7955e07](https://github.com/filebrowser/filebrowser/commit/7955e0720baef3710106c7e69bbbf078d5489220))
+* full file path on share ([e017a19](https://github.com/filebrowser/filebrowser/commit/e017a199850e19dd51b960ba59402c215fd8f1af))
+* header dropdown icon color on previewer ([f8df76f](https://github.com/filebrowser/filebrowser/commit/f8df76f52684f10722ce123fec2c90e321ddf103))
+* item dragging on file listing ([326b35a](https://github.com/filebrowser/filebrowser/commit/326b35a7ac7871afcdf892ca150349665b7f6379))
+* modified time on info prompt ([11ebaec](https://github.com/filebrowser/filebrowser/commit/11ebaec5f0671ec02ebe55d4a73a514bce3a6713))
+* root path name on archive ([426b38b](https://github.com/filebrowser/filebrowser/commit/426b38bb3362d2d477d0d8aa27d880664d537431))
+* stuck icon on header button ([6a734c0](https://github.com/filebrowser/filebrowser/commit/6a734c01391b437c2842f5d97fb63f29a0017510))
+* update image cache when replacing ([81b6f4d](https://github.com/filebrowser/filebrowser/commit/81b6f4d6f6a01886583016f61f4f1951a59f244d))
+* wait for async command exit ([#1326](https://github.com/filebrowser/filebrowser/issues/1326)) ([6d5ceae](https://github.com/filebrowser/filebrowser/commit/6d5ceae8b454edd749b3b65c88aacc0a31ce9215))
+
+
+### Refactorings
+
+* migrate from rice to embed.FS ([fc55061](https://github.com/filebrowser/filebrowser/commit/fc5506179a64e9e2f57f7b6d6cce4b95f5ebc235))
+
+### [2.12.1](https://github.com/filebrowser/filebrowser/compare/v2.12.0...v2.12.1) (2021-03-07)
+
+
+### Bug Fixes
+
+* add missing default config into the docker image ([7358b3f](https://github.com/filebrowser/filebrowser/commit/7358b3fe3178c20007b4b5ef5c03705badd538c4))
+
 ## [2.12.0](https://github.com/filebrowser/filebrowser/compare/v2.11.0...v2.12.0) (2021-03-04)
 
 

Dockerfile

@@ -1,10 +1,19 @@
 FROM alpine:latest
-RUN apk --update add ca-certificates
-RUN apk --update add mailcap
+RUN apk --update add ca-certificates \
+                     mailcap \
+                     curl \
+                     jq
+
+COPY healthcheck.sh /healthcheck.sh
+RUN chmod +x /healthcheck.sh  # Make the script executable
+
+HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
+    CMD /healthcheck.sh || exit 1
 
 VOLUME /srv
 EXPOSE 80
 
+COPY docker_config.json /.filebrowser.json
 COPY filebrowser /filebrowser
 
 ENTRYPOINT [ "/filebrowser" ]

Dockerfile.s6

@@ -0,0 +1,16 @@
+FROM ghcr.io/linuxserver/baseimage-alpine:3.17
+
+RUN apk --update add ca-certificates \
+                     mailcap \
+                     curl
+
+HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
+  CMD curl -f http://localhost/health || exit 1
+
+# copy local files
+COPY docker/root/ /
+COPY filebrowser /usr/bin/filebrowser
+
+# ports and volumes
+VOLUME /srv /config /database
+EXPOSE 80

Dockerfile.s6.aarch64

@@ -0,0 +1,16 @@
+FROM ghcr.io/linuxserver/baseimage-alpine:arm64v8-3.17
+
+RUN apk --update add ca-certificates \
+                     mailcap \
+                     curl
+
+HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
+  CMD curl -f http://localhost/health || exit 1
+
+# copy local files
+COPY docker/root/ /
+COPY filebrowser /usr/bin/filebrowser
+
+# ports and volumes
+VOLUME /srv /config /database
+EXPOSE 80

Dockerfile.s6.armhf

@@ -0,0 +1,16 @@
+FROM ghcr.io/linuxserver/baseimage-alpine:arm32v7-3.17
+
+RUN apk --update add ca-certificates \
+                     mailcap \
+                     curl
+
+HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
+  CMD curl -f http://localhost/health || exit 1
+
+# copy local files
+COPY docker/root/ /
+COPY filebrowser /usr/bin/filebrowser
+
+# ports and volumes
+VOLUME /srv /config /database
+EXPOSE 80

Makefile

@@ -1,100 +1,68 @@
-SHELL := /bin/bash
-BASE_PATH := $(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
-VERSION ?= $(shell git describe --tags --always --match=v* 2> /dev/null || \
-           			cat $(CURDIR)/.version 2> /dev/null || echo v0)
-VERSION_HASH = $(shell git rev-parse HEAD)
+include common.mk
+include tools.mk
 
-BIN = $(BASE_PATH)/bin
-PATH := $(BIN):$(PATH)
-export PATH
+LDFLAGS += -X "$(MODULE)/version.Version=$(VERSION)" -X "$(MODULE)/version.CommitSHA=$(VERSION_HASH)"
 
-# printing
-V = 0
-Q = $(if $(filter 1,$V),,@)
-M = $(shell printf "\033[34;1m▶\033[0m")
+## Build:
 
-GO = GOGC=off go
-# go module
-MODULE = $(shell env GO111MODULE=on $(GO) list -m)
-
-DATE    ?= $(shell date +%FT%T%z)
-VERSION ?= $(shell git describe --tags --always --match=v* 2> /dev/null || \
-			cat $(CURDIR)/.version 2> /dev/null || echo v0)
-VERSION_HASH = 	$(shell git rev-parse HEAD)
-BRANCH = $(shell git rev-parse --abbrev-ref HEAD)
-
-LDFLAGS += -X "$(MODULE)/varsion.Version=$(VERSION)" -X "$(MODULE)/varsion.CommitSHA=$(VERSION_HASH)"
-
-# tools
-$(BIN):
-	@mkdir -p $@
-$(BIN)/%: | $(BIN) ; $(info $(M) installing $(PACKAGE)…)
-	$Q env GOBIN=$(BIN) $(GO) install $(PACKAGE)
-
-GOLANGCI_LINT = $(BIN)/golangci-lint
-$(BIN)/golangci-lint: PACKAGE=github.com/golangci/golangci-lint/cmd/golangci-lint@v1.37.1
-
-GOIMPORTS = $(BIN)/goimports
-$(BIN)/goimports: PACKAGE=golang.org/x/tools/cmd/goimports@v0.1.0
-
-RICE = $(BIN)/rice
-$(BIN)/rice: PACKAGE=github.com/GeertJohan/go.rice/rice@v1.0.2
-
-## build: Build
 .PHONY: build
-build: | build-frontend build-backend ; $(info $(M) building…)
+build: | build-frontend build-backend ## Build binary
 
-## build-frontend: Build frontend
 .PHONY: build-frontend
-build-frontend: | ; $(info $(M) building frontend…)
+build-frontend: ## Build frontend
 	$Q cd frontend && npm ci && npm run build
 
-## build-backend: Build backend
 .PHONY: build-backend
-build-backend: bundle-frontend | ; $(info $(M) building backend…)
-	$Q $(GO) build -ldflags '$(LDFLAGS)' -o filebrowser
+build-backend: ## Build backend
+	$Q $(go) build -ldflags '$(LDFLAGS)' -o .
 
-bundle-frontend: | $(RICE) ; $(info $(M) building backend…)
-	$Q cd ./http && rm -rf rice-box.go && $(RICE) embed-go
-
-## test: Run all tests
 .PHONY: test
-test: | test-frontend test-backend ; $(info $(M) running tests…)
+test: | test-frontend test-backend ## Run all tests
 
-## test-frontend: Run frontend tests
 .PHONY: test-frontend
-test-frontend: | ; $(info $(M) running frontend tests…)
+test-frontend: ## Run frontend tests
 
-## test-backend: Run backend tests
 .PHONY: test-backend
-test-backend: | $(RICE) ; $(info $(M) running backend tests…)
-	$Q $(GO) test -v ./...
+test-backend: ## Run backend tests
+	$Q $(go) test -v ./...
 
-## lint: Lint
 .PHONY: lint
-lint: lint-frontend lint-backend lint-commits | ; $(info $(M) running all linters…)
+lint: lint-frontend lint-backend lint-commits ## Run all linters
 
-## lint-frontend: Lint frontend
 .PHONY: lint-frontend
-lint-frontend: | ; $(info $(M) running frontend linters…)
+lint-frontend: ## Run frontend linters
 	$Q cd frontend && npm ci && npm run lint
 
-## lint-backend: Lint backend
 .PHONY: lint-backend
-lint-backend: | $(GOLANGCI_LINT) ; $(info $(M) running backend linters…)
-	$Q $(GOLANGCI_LINT) run
+lint-backend: | $(golangci-lint) ## Run backend linters
+	$Q $(golangci-lint) run -v
 
-## lint-commits: Lint commits
 .PHONY: lint-commits
-lint-commits: | ; $(info $(M) running commitlint…)
+lint-commits: $(commitlint) ## Run commit linters
 	$Q ./scripts/commitlint.sh
 
-## bump-version: Bump app version
+fmt: $(goimports) ## Format source files
+	$Q $(goimports) -local $(MODULE) -w $$(find . -type f -name '*.go' -not -path "./vendor/*")
+
+clean: clean-tools ## Clean
+
+## Release:
+
 .PHONY: bump-version
-bump-version: | ; $(info $(M) creating a new release…)
+bump-version: $(standard-version) ## Bump app version
 	$Q ./scripts/bump_version.sh
 
-## help: Show this help
-.PHONY: help
-help:
-	@sed -n 's/^## //p' $(MAKEFILE_LIST) | column -t -s ':' |  sed -e 's/^/ /' | sort
+## Help:
+help: ## Show this help
+	@echo ''
+	@echo 'Usage:'
+	@echo '  ${YELLOW}make${RESET} ${GREEN}<target> [options]${RESET}'
+	@echo ''
+	@echo 'Options:'
+	@$(call global_option, "V [0|1]", "enable verbose mode (default:0)")
+	@echo ''
+	@echo 'Targets:'
+	@awk 'BEGIN {FS = ":.*?## "} { \
+		if (/^[a-zA-Z_-]+:.*?##.*$$/) {printf "    ${YELLOW}%-20s${GREEN}%s${RESET}\n", $$1, $$2} \
+		else if (/^## .*$$/) {printf "  ${CYAN}%s${RESET}\n", substr($$1,4)} \
+		}' $(MAKEFILE_LIST)

README.md

@@ -10,7 +10,13 @@
 [![Version](https://img.shields.io/github/release/filebrowser/filebrowser.svg?style=flat-square)](https://github.com/filebrowser/filebrowser/releases/latest)
 [![Chat IRC](https://img.shields.io/badge/freenode-%23filebrowser-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23filebrowser)
 
-filebrowser provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app or as a middleware.
+filebrowser provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app.
+
+## Demo
+
+url: https://demo.filebrowser.org/
+
+credentials: `demo`/`demo`
 
 ## Features
 

SECURITY.md

@@ -0,0 +1,26 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are
+currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 2.x     | :white_check_mark: |
+| < 2.0   | :x:                |
+
+## Reporting a Vulnerability
+
+Vulnerabilities should be reported to filebrowser@googlegroups.com - which is a private, maintainer-only group. Maintainers will attempt to respond to/confirm reports within 2-3 days, but if you believe your report to be "critical" to user safety and security, please note as such in the subject. We have tens of thousands of users using our software, and take security vulnerabilities seriously.
+
+When reporting an issue, where possible, please provide at least:
+
+* The commit version the issue was identified at
+* A proof of concept (plaintext; no binaries)
+* Steps to reproduce
+* Your recommended remediation(s), if any.
+
+The FileBrowser team is a volunteer-only effort, and may reach back out for clarification.
+
+> Note: Please do not open public issues for security issues, as GitHub does not provide facility for private issues, and deleting the issue makes it hard to triage/respond back to the reporter.

auth/auth.go

@@ -3,13 +3,14 @@ package auth
 import (
 	"net/http"
 
+	"github.com/filebrowser/filebrowser/v2/settings"
 	"github.com/filebrowser/filebrowser/v2/users"
 )
 
 // Auther is the authentication interface.
 type Auther interface {
 	// Auth is called to authenticate a request.
-	Auth(r *http.Request, s users.Store, root string) (*users.User, error)
+	Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error)
 	// LoginPage indicates if this auther needs a login page.
 	LoginPage() bool
 }

auth/hook.go

@@ -0,0 +1,302 @@
+package auth
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"os/exec"
+	"strings"
+
+	"github.com/filebrowser/filebrowser/v2/errors"
+	"github.com/filebrowser/filebrowser/v2/files"
+	"github.com/filebrowser/filebrowser/v2/settings"
+	"github.com/filebrowser/filebrowser/v2/users"
+)
+
+// MethodHookAuth is used to identify hook auth.
+const MethodHookAuth settings.AuthMethod = "hook"
+
+type hookCred struct {
+	Password string `json:"password"`
+	Username string `json:"username"`
+}
+
+// HookAuth is a hook implementation of an Auther.
+type HookAuth struct {
+	Users    users.Store        `json:"-"`
+	Settings *settings.Settings `json:"-"`
+	Server   *settings.Server   `json:"-"`
+	Cred     hookCred           `json:"-"`
+	Fields   hookFields         `json:"-"`
+	Command  string             `json:"command"`
+}
+
+// Auth authenticates the user via a json in content body.
+func (a *HookAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
+	var cred hookCred
+
+	if r.Body == nil {
+		return nil, os.ErrPermission
+	}
+
+	err := json.NewDecoder(r.Body).Decode(&cred)
+	if err != nil {
+		return nil, os.ErrPermission
+	}
+
+	a.Users = usr
+	a.Settings = stg
+	a.Server = srv
+	a.Cred = cred
+
+	action, err := a.RunCommand()
+	if err != nil {
+		return nil, err
+	}
+
+	switch action {
+	case "auth":
+		u, err := a.SaveUser()
+		if err != nil {
+			return nil, err
+		}
+		return u, nil
+	case "block":
+		return nil, os.ErrPermission
+	case "pass":
+		u, err := a.Users.Get(a.Server.Root, a.Cred.Username)
+		if err != nil || !users.CheckPwd(a.Cred.Password, u.Password) {
+			return nil, os.ErrPermission
+		}
+		return u, nil
+	default:
+		return nil, fmt.Errorf("invalid hook action: %s", action)
+	}
+}
+
+// LoginPage tells that hook auth requires a login page.
+func (a *HookAuth) LoginPage() bool {
+	return true
+}
+
+// RunCommand starts the hook command and returns the action
+func (a *HookAuth) RunCommand() (string, error) {
+	command := strings.Split(a.Command, " ")
+	envMapping := func(key string) string {
+		switch key {
+		case "USERNAME":
+			return a.Cred.Username
+		case "PASSWORD":
+			return a.Cred.Password
+		default:
+			return os.Getenv(key)
+		}
+	}
+	for i, arg := range command {
+		if i == 0 {
+			continue
+		}
+		command[i] = os.Expand(arg, envMapping)
+	}
+
+	cmd := exec.Command(command[0], command[1:]...) //nolint:gosec
+	cmd.Env = append(os.Environ(), fmt.Sprintf("USERNAME=%s", a.Cred.Username))
+	cmd.Env = append(cmd.Env, fmt.Sprintf("PASSWORD=%s", a.Cred.Password))
+	out, err := cmd.Output()
+	if err != nil {
+		return "", err
+	}
+
+	a.GetValues(string(out))
+
+	return a.Fields.Values["hook.action"], nil
+}
+
+// GetValues creates a map with values from the key-value format string
+func (a *HookAuth) GetValues(s string) {
+	m := map[string]string{}
+
+	// make line breaks consistent on Windows platform
+	s = strings.ReplaceAll(s, "\r\n", "\n")
+
+	// iterate input lines
+	for _, val := range strings.Split(s, "\n") {
+		v := strings.SplitN(val, "=", 2) //nolint: gomnd
+
+		// skips non key and value format
+		if len(v) != 2 { //nolint: gomnd
+			continue
+		}
+
+		fieldKey := strings.TrimSpace(v[0])
+		fieldValue := strings.TrimSpace(v[1])
+
+		if a.Fields.IsValid(fieldKey) {
+			m[fieldKey] = fieldValue
+		}
+	}
+
+	a.Fields.Values = m
+}
+
+// SaveUser updates the existing user or creates a new one when not found
+func (a *HookAuth) SaveUser() (*users.User, error) {
+	u, err := a.Users.Get(a.Server.Root, a.Cred.Username)
+	if err != nil && err != errors.ErrNotExist {
+		return nil, err
+	}
+
+	if u == nil {
+		pass, err := users.HashPwd(a.Cred.Password)
+		if err != nil {
+			return nil, err
+		}
+
+		// create user with the provided credentials
+		d := &users.User{
+			Username:     a.Cred.Username,
+			Password:     pass,
+			Scope:        a.Settings.Defaults.Scope,
+			Locale:       a.Settings.Defaults.Locale,
+			ViewMode:     a.Settings.Defaults.ViewMode,
+			SingleClick:  a.Settings.Defaults.SingleClick,
+			Sorting:      a.Settings.Defaults.Sorting,
+			Perm:         a.Settings.Defaults.Perm,
+			Commands:     a.Settings.Defaults.Commands,
+			HideDotfiles: a.Settings.Defaults.HideDotfiles,
+		}
+		u = a.GetUser(d)
+
+		userHome, err := a.Settings.MakeUserDir(u.Username, u.Scope, a.Server.Root)
+		if err != nil {
+			return nil, fmt.Errorf("user: failed to mkdir user home dir: [%s]", userHome)
+		}
+		u.Scope = userHome
+		log.Printf("user: %s, home dir: [%s].", u.Username, userHome)
+
+		err = a.Users.Save(u)
+		if err != nil {
+			return nil, err
+		}
+	} else if p := !users.CheckPwd(a.Cred.Password, u.Password); len(a.Fields.Values) > 1 || p {
+		u = a.GetUser(u)
+
+		// update the password when it doesn't match the current
+		if p {
+			pass, err := users.HashPwd(a.Cred.Password)
+			if err != nil {
+				return nil, err
+			}
+			u.Password = pass
+		}
+
+		// update user with provided fields
+		err := a.Users.Update(u)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return u, nil
+}
+
+// GetUser returns a User filled with hook values or provided defaults
+func (a *HookAuth) GetUser(d *users.User) *users.User {
+	// adds all permissions when user is admin
+	isAdmin := a.Fields.GetBoolean("user.perm.admin", d.Perm.Admin)
+	perms := users.Permissions{
+		Admin:    isAdmin,
+		Execute:  isAdmin || a.Fields.GetBoolean("user.perm.execute", d.Perm.Execute),
+		Create:   isAdmin || a.Fields.GetBoolean("user.perm.create", d.Perm.Create),
+		Rename:   isAdmin || a.Fields.GetBoolean("user.perm.rename", d.Perm.Rename),
+		Modify:   isAdmin || a.Fields.GetBoolean("user.perm.modify", d.Perm.Modify),
+		Delete:   isAdmin || a.Fields.GetBoolean("user.perm.delete", d.Perm.Delete),
+		Share:    isAdmin || a.Fields.GetBoolean("user.perm.share", d.Perm.Share),
+		Download: isAdmin || a.Fields.GetBoolean("user.perm.download", d.Perm.Download),
+	}
+	user := users.User{
+		ID:          d.ID,
+		Username:    d.Username,
+		Password:    d.Password,
+		Scope:       a.Fields.GetString("user.scope", d.Scope),
+		Locale:      a.Fields.GetString("user.locale", d.Locale),
+		ViewMode:    users.ViewMode(a.Fields.GetString("user.viewMode", string(d.ViewMode))),
+		SingleClick: a.Fields.GetBoolean("user.singleClick", d.SingleClick),
+		Sorting: files.Sorting{
+			Asc: a.Fields.GetBoolean("user.sorting.asc", d.Sorting.Asc),
+			By:  a.Fields.GetString("user.sorting.by", d.Sorting.By),
+		},
+		Commands:     a.Fields.GetArray("user.commands", d.Commands),
+		HideDotfiles: a.Fields.GetBoolean("user.hideDotfiles", d.HideDotfiles),
+		Perm:         perms,
+		LockPassword: true,
+	}
+
+	return &user
+}
+
+// hookFields is used to access fields from the hook
+type hookFields struct {
+	Values map[string]string
+}
+
+// validHookFields contains names of the fields that can be used
+var validHookFields = []string{
+	"hook.action",
+	"user.scope",
+	"user.locale",
+	"user.viewMode",
+	"user.singleClick",
+	"user.sorting.by",
+	"user.sorting.asc",
+	"user.commands",
+	"user.hideDotfiles",
+	"user.perm.admin",
+	"user.perm.execute",
+	"user.perm.create",
+	"user.perm.rename",
+	"user.perm.modify",
+	"user.perm.delete",
+	"user.perm.share",
+	"user.perm.download",
+}
+
+// IsValid checks if the provided field is on the valid fields list
+func (hf *hookFields) IsValid(field string) bool {
+	for _, val := range validHookFields {
+		if field == val {
+			return true
+		}
+	}
+
+	return false
+}
+
+// GetString returns the string value or provided default
+func (hf *hookFields) GetString(k, dv string) string {
+	val, ok := hf.Values[k]
+	if ok {
+		return val
+	}
+	return dv
+}
+
+// GetBoolean returns the bool value or provided default
+func (hf *hookFields) GetBoolean(k string, dv bool) bool {
+	val, ok := hf.Values[k]
+	if ok {
+		return val == "true"
+	}
+	return dv
+}
+
+// GetArray returns the array value or provided default
+func (hf *hookFields) GetArray(k string, dv []string) []string {
+	val, ok := hf.Values[k]
+	if ok && strings.TrimSpace(val) != "" {
+		return strings.Split(val, " ")
+	}
+	return dv
+}

auth/json.go

@@ -26,7 +26,7 @@ type JSONAuth struct {
 }
 
 // Auth authenticates the user via a json in content body.
-func (a JSONAuth) Auth(r *http.Request, sto users.Store, root string) (*users.User, error) {
+func (a JSONAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
 	var cred jsonCred
 
 	if r.Body == nil {
@@ -51,7 +51,7 @@ func (a JSONAuth) Auth(r *http.Request, sto users.Store, root string) (*users.Us
 		}
 	}
 
-	u, err := sto.Get(root, cred.Username)
+	u, err := usr.Get(srv.Root, cred.Username)
 	if err != nil || !users.CheckPwd(cred.Password, u.Password) {
 		return nil, os.ErrPermission
 	}

auth/none.go

@@ -14,8 +14,8 @@ const MethodNoAuth settings.AuthMethod = "noauth"
 type NoAuth struct{}
 
 // Auth uses authenticates user 1.
-func (a NoAuth) Auth(r *http.Request, sto users.Store, root string) (*users.User, error) {
-	return sto.Get(root, uint(1))
+func (a NoAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
+	return usr.Get(srv.Root, uint(1))
 }
 
 // LoginPage tells that no auth doesn't require a login page.

auth/proxy.go

@@ -18,9 +18,9 @@ type ProxyAuth struct {
 }
 
 // Auth authenticates the user via an HTTP header.
-func (a ProxyAuth) Auth(r *http.Request, sto users.Store, root string) (*users.User, error) {
+func (a ProxyAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
 	username := r.Header.Get(a.Header)
-	user, err := sto.Get(root, username)
+	user, err := usr.Get(srv.Root, username)
 	if err == errors.ErrNotExist {
 		return nil, os.ErrPermission
 	}

cmd/config.go

@@ -35,14 +35,17 @@ func addConfigFlags(flags *pflag.FlagSet) {
 
 	flags.String("auth.method", string(auth.MethodJSONAuth), "authentication type")
 	flags.String("auth.header", "", "HTTP header for auth.method=proxy")
+	flags.String("auth.command", "", "command for auth.method=hook")
 
 	flags.String("recaptcha.host", "https://www.google.com", "use another host for ReCAPTCHA. recaptcha.net might be useful in China")
 	flags.String("recaptcha.key", "", "ReCaptcha site key")
 	flags.String("recaptcha.secret", "", "ReCaptcha secret")
 
 	flags.String("branding.name", "", "replace 'File Browser' by this name")
+	flags.String("branding.color", "", "set the theme color")
 	flags.String("branding.files", "", "path to directory with images and custom styles")
 	flags.Bool("branding.disableExternal", false, "disable external links such as GitHub links")
+	flags.Bool("branding.disableUsedPercentage", false, "disable used disk percentage graph")
 }
 
 //nolint:gocyclo
@@ -113,6 +116,20 @@ func getAuthentication(flags *pflag.FlagSet, defaults ...interface{}) (settings.
 		auther = jsonAuth
 	}
 
+	if method == auth.MethodHookAuth {
+		command := mustGetString(flags, "auth.command")
+
+		if command == "" {
+			command = defaultAuther["command"].(string)
+		}
+
+		if command == "" {
+			checkErr(nerrors.New("you must set the flag 'auth.command' for method 'hook'"))
+		}
+
+		auther = &auth.HookAuth{Command: command}
+	}
+
 	if auther == nil {
 		panic(errors.ErrInvalidAuthMethod)
 	}
@@ -121,7 +138,7 @@ func getAuthentication(flags *pflag.FlagSet, defaults ...interface{}) (settings.
 }
 
 func printSettings(ser *settings.Server, set *settings.Settings, auther auth.Auther) {
-	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0)
+	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0) //nolint:gomnd
 
 	fmt.Fprintf(w, "Sign up:\t%t\n", set.Signup)
 	fmt.Fprintf(w, "Create User Dir:\t%t\n", set.CreateUserDir)
@@ -131,6 +148,8 @@ func printSettings(ser *settings.Server, set *settings.Settings, auther auth.Aut
 	fmt.Fprintf(w, "\tName:\t%s\n", set.Branding.Name)
 	fmt.Fprintf(w, "\tFiles override:\t%s\n", set.Branding.Files)
 	fmt.Fprintf(w, "\tDisable external links:\t%t\n", set.Branding.DisableExternal)
+	fmt.Fprintf(w, "\tDisable used disk percentage graph:\t%t\n", set.Branding.DisableUsedPercentage)
+	fmt.Fprintf(w, "\tColor:\t%s\n", set.Branding.Color)
 	fmt.Fprintln(w, "\nServer:")
 	fmt.Fprintf(w, "\tLog:\t%s\n", ser.Log)
 	fmt.Fprintf(w, "\tPort:\t%s\n", ser.Port)

cmd/config_import.go

@@ -70,6 +70,8 @@ The path must be for a json or yaml file.`,
 			auther = getAuther(auth.NoAuth{}, rawAuther).(*auth.NoAuth)
 		case auth.MethodProxyAuth:
 			auther = getAuther(auth.ProxyAuth{}, rawAuther).(*auth.ProxyAuth)
+		case auth.MethodHookAuth:
+			auther = getAuther(&auth.HookAuth{}, rawAuther).(*auth.HookAuth)
 		default:
 			checkErr(errors.New("invalid auth method"))
 		}

cmd/config_init.go

@@ -35,9 +35,10 @@ override the options.`,
 			AuthMethod: authMethod,
 			Defaults:   defaults,
 			Branding: settings.Branding{
-				Name:            mustGetString(flags, "branding.name"),
-				DisableExternal: mustGetBool(flags, "branding.disableExternal"),
-				Files:           mustGetString(flags, "branding.files"),
+				Name:                  mustGetString(flags, "branding.name"),
+				DisableExternal:       mustGetBool(flags, "branding.disableExternal"),
+				DisableUsedPercentage: mustGetBool(flags, "branding.disableUsedPercentage"),
+				Files:                 mustGetString(flags, "branding.files"),
 			},
 		}
 

cmd/config_set.go

@@ -51,8 +51,12 @@ you want to change. Other options will remain unchanged.`,
 				set.Shell = convertCmdStrToCmdArray(mustGetString(flags, flag.Name))
 			case "branding.name":
 				set.Branding.Name = mustGetString(flags, flag.Name)
+			case "branding.color":
+				set.Branding.Color = mustGetString(flags, flag.Name)
 			case "branding.disableExternal":
 				set.Branding.DisableExternal = mustGetBool(flags, flag.Name)
+			case "branding.disableUsedPercentage":
+				set.Branding.DisableUsedPercentage = mustGetBool(flags, flag.Name)
 			case "branding.files":
 				set.Branding.Files = mustGetString(flags, flag.Name)
 			}

cmd/docs.go

@@ -98,12 +98,12 @@ func generateMarkdown(cmd *cobra.Command, w io.Writer) {
 	buf.WriteString(long + "\n\n")
 
 	if cmd.Runnable() {
-		buf.WriteString(fmt.Sprintf("```\n%s\n```\n\n", cmd.UseLine()))
+		_, _ = fmt.Fprintf(buf, "```\n%s\n```\n\n", cmd.UseLine())
 	}
 
 	if len(cmd.Example) > 0 {
 		buf.WriteString("## Examples\n\n")
-		buf.WriteString(fmt.Sprintf("```\n%s\n```\n\n", cmd.Example))
+		_, _ = fmt.Fprintf(buf, "```\n%s\n```\n\n", cmd.Example)
 	}
 
 	printOptions(buf, cmd)

cmd/root.go

@@ -3,7 +3,8 @@ package cmd
 import (
 	"crypto/tls"
 	"errors"
-	"io/ioutil"
+	"io"
+	"io/fs"
 	"log"
 	"net"
 	"net/http"
@@ -22,6 +23,7 @@ import (
 
 	"github.com/filebrowser/filebrowser/v2/auth"
 	"github.com/filebrowser/filebrowser/v2/diskcache"
+	"github.com/filebrowser/filebrowser/v2/frontend"
 	fbhttp "github.com/filebrowser/filebrowser/v2/http"
 	"github.com/filebrowser/filebrowser/v2/img"
 	"github.com/filebrowser/filebrowser/v2/settings"
@@ -59,10 +61,10 @@ func addServerFlags(flags *pflag.FlagSet) {
 	flags.StringP("key", "k", "", "tls key")
 	flags.StringP("root", "r", ".", "root to prepend to relative paths")
 	flags.String("socket", "", "socket to listen to (cannot be used with address, port, cert nor key flags)")
-	flags.Uint32("socket-perm", 0666, "unix socket file permissions")
+	flags.Uint32("socket-perm", 0666, "unix socket file permissions") //nolint:gomnd
 	flags.StringP("baseurl", "b", "", "base url")
 	flags.String("cache-dir", "", "file cache directory (disabled if empty)")
-	flags.Int("img-processors", 4, "image processors count")
+	flags.Int("img-processors", 4, "image processors count") //nolint:gomnd
 	flags.Bool("disable-thumbnails", false, "disable image thumbnails")
 	flags.Bool("disable-preview-resize", false, "disable resize of image previews")
 	flags.Bool("disable-exec", false, "disables Command Runner feature")
@@ -126,7 +128,7 @@ user created with the credentials from options "username" and "password".`,
 		cacheDir, err := cmd.Flags().GetString("cache-dir")
 		checkErr(err)
 		if cacheDir != "" {
-			if err := os.MkdirAll(cacheDir, 0700); err != nil { //nolint:govet
+			if err := os.MkdirAll(cacheDir, 0700); err != nil { //nolint:govet,gomnd
 				log.Fatalf("can't make directory %s: %s", cacheDir, err)
 			}
 			fileCache = diskcache.New(afero.NewOsFs(), cacheDir)
@@ -168,12 +170,18 @@ user created with the credentials from options "username" and "password".`,
 		signal.Notify(sigc, os.Interrupt, syscall.SIGTERM)
 		go cleanupHandler(listener, sigc)
 
-		handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, server)
+		assetsFs, err := fs.Sub(frontend.Assets(), "dist")
+		if err != nil {
+			panic(err)
+		}
+
+		handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, server, assetsFs)
 		checkErr(err)
 
 		defer listener.Close()
 
 		log.Println("Listening on", listener.Addr().String())
+		//nolint: gosec
 		if err := http.Serve(listener, handler); err != nil {
 			log.Fatal(err)
 		}
@@ -292,7 +300,7 @@ func setupLog(logMethod string) {
 	case "stderr":
 		log.SetOutput(os.Stderr)
 	case "":
-		log.SetOutput(ioutil.Discard)
+		log.SetOutput(io.Discard)
 	default:
 		log.SetOutput(&lumberjack.Logger{
 			Filename:   logMethod,
@@ -305,9 +313,10 @@ func setupLog(logMethod string) {
 
 func quickSetup(flags *pflag.FlagSet, d pythonData) {
 	set := &settings.Settings{
-		Key:           generateKey(),
-		Signup:        false,
-		CreateUserDir: false,
+		Key:              generateKey(),
+		Signup:           false,
+		CreateUserDir:    false,
+		UserHomeBasePath: settings.DefaultUsersHomeBasePath,
 		Defaults: settings.UserDefaults{
 			Scope:       ".",
 			Locale:      "en",
@@ -323,6 +332,15 @@ func quickSetup(flags *pflag.FlagSet, d pythonData) {
 				Download: true,
 			},
 		},
+		AuthMethod: "",
+		Branding:   settings.Branding{},
+		Tus: settings.Tus{
+			ChunkSize:  settings.DefaultTusChunkSize,
+			RetryCount: settings.DefaultTusRetryCount,
+		},
+		Commands: nil,
+		Shell:    nil,
+		Rules:    nil,
 	}
 
 	var err error

cmd/rule_rm.go

@@ -28,7 +28,7 @@ You can also specify an optional parameter (index_end) so
 you can remove all commands from 'index' to 'index_end',
 including 'index_end'.`,
 	Args: func(cmd *cobra.Command, args []string) error {
-		if err := cobra.RangeArgs(1, 2)(cmd, args); err != nil {
+		if err := cobra.RangeArgs(1, 2)(cmd, args); err != nil { //nolint:gomnd
 			return err
 		}
 

cmd/users.go

@@ -26,7 +26,7 @@ var usersCmd = &cobra.Command{
 }
 
 func printUsers(usrs []*users.User) {
-	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0)
+	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0) //nolint:gomnd
 	fmt.Fprintln(w, "ID\tUsername\tScope\tLocale\tV. Mode\tS.Click\tAdmin\tExecute\tCreate\tRename\tModify\tDelete\tShare\tDownload\tPwd Lock")
 
 	for _, u := range usrs {
@@ -53,7 +53,7 @@ func printUsers(usrs []*users.User) {
 }
 
 func parseUsernameOrID(arg string) (username string, id uint) {
-	id64, err := strconv.ParseUint(arg, 10, 0)
+	id64, err := strconv.ParseUint(arg, 10, 64)
 	if err != nil {
 		return arg, 0
 	}

cmd/utils.go

@@ -9,7 +9,7 @@ import (
 	"path/filepath"
 	"strings"
 
-	"github.com/asdine/storm"
+	"github.com/asdine/storm/v3"
 	"github.com/spf13/cobra"
 	"github.com/spf13/pflag"
 	yaml "gopkg.in/yaml.v2"
@@ -72,7 +72,7 @@ func dbExists(path string) (bool, error) {
 		d := filepath.Dir(path)
 		_, err = os.Stat(d)
 		if os.IsNotExist(err) {
-			if err := os.MkdirAll(d, 0700); err != nil { //nolint:govet
+			if err := os.MkdirAll(d, 0700); err != nil { //nolint:govet,gomnd
 				return false, err
 			}
 			return false, nil

common.mk

@@ -0,0 +1,28 @@
+SHELL := /usr/bin/env bash
+DATE ?= $(shell date +%FT%T%z)
+BASE_PATH := $(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
+VERSION ?= $(shell git describe --tags --always --match=v* 2> /dev/null || \
+           			cat $(CURDIR)/.version 2> /dev/null || echo v0)
+VERSION_HASH = $(shell git rev-parse HEAD)
+BRANCH = $(shell git rev-parse --abbrev-ref HEAD)
+
+go = GOGC=off go
+MODULE = $(shell env GO111MODULE=on go list -m)
+
+# printing
+# $Q (quiet) is used in the targets as a replacer for @.
+# This macro helps to print the command for debugging by setting V to 1. Example `make test-unit V=1`
+V = 0
+Q = $(if $(filter 1,$V),,@)
+# $M is a macro to print a colored ▶ character. Example `$(info $(M) running coverage tests…)` will print "▶ running coverage tests…"
+M = $(shell printf "\033[34;1m▶\033[0m")
+
+GREEN  := $(shell tput -Txterm setaf 2)
+YELLOW := $(shell tput -Txterm setaf 3)
+WHITE  := $(shell tput -Txterm setaf 7)
+CYAN   := $(shell tput -Txterm setaf 6)
+RESET  := $(shell tput -Txterm sgr0)
+
+define global_option
+    printf "  ${YELLOW}%-20s${GREEN}%s${RESET}\n" $(1) $(2)
+endef

diskcache/file_cache.go

@@ -6,7 +6,7 @@ import (
 	"encoding/hex"
 	"errors"
 	"fmt"
-	"io/ioutil"
+	"io"
 	"os"
 	"path/filepath"
 	"sync"
@@ -37,11 +37,11 @@ func (f *FileCache) Store(ctx context.Context, key string, value []byte) error {
 	defer mu.Unlock()
 
 	fileName := f.getFileName(key)
-	if err := f.fs.MkdirAll(filepath.Dir(fileName), 0700); err != nil {
+	if err := f.fs.MkdirAll(filepath.Dir(fileName), 0700); err != nil { //nolint:gomnd
 		return err
 	}
 
-	if err := afero.WriteFile(f.fs, fileName, value, 0700); err != nil {
+	if err := afero.WriteFile(f.fs, fileName, value, 0700); err != nil { //nolint:gomnd
 		return err
 	}
 
@@ -55,7 +55,7 @@ func (f *FileCache) Load(ctx context.Context, key string) (value []byte, exist b
 	}
 	defer r.Close()
 
-	value, err = ioutil.ReadAll(r)
+	value, err = io.ReadAll(r)
 	if err != nil {
 		return nil, false, err
 	}

docker/root/defaults/settings.json

@@ -0,0 +1,8 @@
+{
+  "port": 80,
+  "baseURL": "",
+  "address": "",
+  "log": "stdout",
+  "database": "/database/filebrowser.db",
+  "root": "/srv"
+}

docker/root/etc/cont-init.d/20-config

@@ -0,0 +1,15 @@
+#!/usr/bin/with-contenv bash
+
+# make folders
+mkdir -p /database
+
+# copy config
+if [ ! -f "/config/settings.json" ]; then
+  cp -a /defaults/settings.json /config/settings.json
+fi
+
+# permissions
+chown abc:abc \
+	/config/settings.json \
+	/database \
+	/srv

docker/root/etc/services.d/filebrowser/run

@@ -0,0 +1,3 @@
+#!/usr/bin/with-contenv bash
+
+exec s6-setuidgid abc filebrowser -c /config/settings.json -d /database/filebrowser.db;

docker_config.json

@@ -0,0 +1,8 @@
+{
+  "port": 80,
+  "baseURL": "",
+  "address": "",
+  "log": "stdout",
+  "database": "/database.db",
+  "root": "/srv"
+}

files/file.go

@@ -23,22 +23,27 @@ import (
 	"github.com/filebrowser/filebrowser/v2/rules"
 )
 
+const PermFile = 0664
+const PermDir = 0755
+
 // FileInfo describes a file.
 type FileInfo struct {
 	*Listing
-	Fs        afero.Fs          `json:"-"`
-	Path      string            `json:"path"`
-	Name      string            `json:"name"`
-	Size      int64             `json:"size"`
-	Extension string            `json:"extension"`
-	ModTime   time.Time         `json:"modified"`
-	Mode      os.FileMode       `json:"mode"`
-	IsDir     bool              `json:"isDir"`
-	Type      string            `json:"type"`
-	Subtitles []string          `json:"subtitles,omitempty"`
-	Content   string            `json:"content,omitempty"`
-	Checksums map[string]string `json:"checksums,omitempty"`
-	Token     string            `json:"token,omitempty"`
+	Fs         afero.Fs          `json:"-"`
+	Path       string            `json:"path"`
+	Name       string            `json:"name"`
+	Size       int64             `json:"size"`
+	Extension  string            `json:"extension"`
+	ModTime    time.Time         `json:"modified"`
+	Mode       os.FileMode       `json:"mode"`
+	IsDir      bool              `json:"isDir"`
+	IsSymlink  bool              `json:"isSymlink"`
+	Type       string            `json:"type"`
+	Subtitles  []string          `json:"subtitles,omitempty"`
+	Content    string            `json:"content,omitempty"`
+	Checksums  map[string]string `json:"checksums,omitempty"`
+	Token      string            `json:"token,omitempty"`
+	currentDir []os.FileInfo     `json:"-"`
 }
 
 // FileOptions are the options when getting a file info.
@@ -50,6 +55,7 @@ type FileOptions struct {
 	ReadHeader bool
 	Token      string
 	Checker    rules.Checker
+	Content    bool
 }
 
 // NewFileInfo creates a File object from a path and a given user. This File
@@ -60,12 +66,73 @@ func NewFileInfo(opts FileOptions) (*FileInfo, error) {
 		return nil, os.ErrPermission
 	}
 
-	info, err := opts.Fs.Stat(opts.Path)
+	file, err := stat(opts)
 	if err != nil {
 		return nil, err
 	}
 
-	file := &FileInfo{
+	if opts.Expand {
+		if file.IsDir {
+			if err := file.readListing(opts.Checker, opts.ReadHeader); err != nil { //nolint:govet
+				return nil, err
+			}
+			return file, nil
+		}
+
+		err = file.detectType(opts.Modify, opts.Content, true)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return file, err
+}
+
+func stat(opts FileOptions) (*FileInfo, error) {
+	var file *FileInfo
+
+	if lstaterFs, ok := opts.Fs.(afero.Lstater); ok {
+		info, _, err := lstaterFs.LstatIfPossible(opts.Path)
+		if err != nil {
+			return nil, err
+		}
+		file = &FileInfo{
+			Fs:        opts.Fs,
+			Path:      opts.Path,
+			Name:      info.Name(),
+			ModTime:   info.ModTime(),
+			Mode:      info.Mode(),
+			IsDir:     info.IsDir(),
+			IsSymlink: IsSymlink(info.Mode()),
+			Size:      info.Size(),
+			Extension: filepath.Ext(info.Name()),
+			Token:     opts.Token,
+		}
+	}
+
+	// regular file
+	if file != nil && !file.IsSymlink {
+		return file, nil
+	}
+
+	// fs doesn't support afero.Lstater interface or the file is a symlink
+	info, err := opts.Fs.Stat(opts.Path)
+	if err != nil {
+		// can't follow symlink
+		if file != nil && file.IsSymlink {
+			return file, nil
+		}
+		return nil, err
+	}
+
+	// set correct file size in case of symlink
+	if file != nil && file.IsSymlink {
+		file.Size = info.Size()
+		file.IsDir = info.IsDir()
+		return file, nil
+	}
+
+	file = &FileInfo{
 		Fs:        opts.Fs,
 		Path:      opts.Path,
 		Name:      info.Name(),
@@ -77,21 +144,7 @@ func NewFileInfo(opts FileOptions) (*FileInfo, error) {
 		Token:     opts.Token,
 	}
 
-	if opts.Expand {
-		if file.IsDir {
-			if err := file.readListing(opts.Checker, opts.ReadHeader); err != nil { //nolint:govet
-				return nil, err
-			}
-			return file, nil
-		}
-
-		err = file.detectType(opts.Modify, true, true)
-		if err != nil {
-			return nil, err
-		}
-	}
-
-	return file, err
+	return file, nil
 }
 
 // Checksum checksums a given File for a given User, using a specific
@@ -136,8 +189,22 @@ func (i *FileInfo) Checksum(algo string) error {
 	return nil
 }
 
+func (i *FileInfo) RealPath() string {
+	if realPathFs, ok := i.Fs.(interface {
+		RealPath(name string) (fPath string, err error)
+	}); ok {
+		realPath, err := realPathFs.RealPath(i.Path)
+		if err == nil {
+			return realPath
+		}
+	}
+
+	return i.Path
+}
+
+// TODO: use constants
+//
 //nolint:goconst
-//TODO: use constants
 func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	if IsNamedPipe(i.Mode) {
 		i.Type = "blob"
@@ -148,12 +215,15 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	// of files couldn't be opened: we'd have immediately
 	// a 500 even though it doesn't matter. So we just log it.
 
-	var buffer []byte
-
 	mimetype := mime.TypeByExtension(i.Extension)
-	if mimetype == "" && readHeader {
+
+	var buffer []byte
+	if readHeader {
 		buffer = i.readFirstBytes()
-		mimetype = http.DetectContentType(buffer)
+
+		if mimetype == "" {
+			mimetype = http.DetectContentType(buffer)
+		}
 	}
 
 	switch {
@@ -167,7 +237,10 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	case strings.HasPrefix(mimetype, "image"):
 		i.Type = "image"
 		return nil
-	case (strings.HasPrefix(mimetype, "text") || (len(buffer) > 0 && !isBinary(buffer))) && i.Size <= 10*1024*1024: // 10 MB
+	case strings.HasSuffix(mimetype, "pdf"):
+		i.Type = "pdf"
+		return nil
+	case (strings.HasPrefix(mimetype, "text") || !isBinary(buffer)) && i.Size <= 10*1024*1024: // 10 MB
 		i.Type = "text"
 
 		if !modify {
@@ -200,7 +273,7 @@ func (i *FileInfo) readFirstBytes() []byte {
 	}
 	defer reader.Close()
 
-	buffer := make([]byte, 512)
+	buffer := make([]byte, 512) //nolint:gomnd
 	n, err := reader.Read(buffer)
 	if err != nil && err != io.EOF {
 		log.Print(err)
@@ -219,11 +292,25 @@ func (i *FileInfo) detectSubtitles() {
 	i.Subtitles = []string{}
 	ext := filepath.Ext(i.Path)
 
-	// TODO: detect multiple languages. Base.Lang.vtt
+	// detect multiple languages. Base*.vtt
+	// TODO: give subtitles descriptive names (lang) and track attributes
+	parentDir := strings.TrimRight(i.Path, i.Name)
+	var dir []os.FileInfo
+	if len(i.currentDir) > 0 {
+		dir = i.currentDir
+	} else {
+		var err error
+		dir, err = afero.ReadDir(i.Fs, parentDir)
+		if err != nil {
+			return
+		}
+	}
 
-	fPath := strings.TrimSuffix(i.Path, ext) + ".vtt"
-	if _, err := i.Fs.Stat(fPath); err == nil {
-		i.Subtitles = append(i.Subtitles, fPath)
+	base := strings.TrimSuffix(i.Name, ext)
+	for _, f := range dir {
+		if !f.IsDir() && strings.HasPrefix(f.Name(), base) && strings.HasSuffix(f.Name(), ".vtt") {
+			i.Subtitles = append(i.Subtitles, path.Join(parentDir, f.Name()))
+		}
 	}
 }
 
@@ -248,24 +335,30 @@ func (i *FileInfo) readListing(checker rules.Checker, readHeader bool) error {
 			continue
 		}
 
+		isSymlink, isInvalidLink := false, false
 		if IsSymlink(f.Mode()) {
+			isSymlink = true
 			// It's a symbolic link. We try to follow it. If it doesn't work,
 			// we stay with the link information instead of the target's.
 			info, err := i.Fs.Stat(fPath)
 			if err == nil {
 				f = info
+			} else {
+				isInvalidLink = true
 			}
 		}
 
 		file := &FileInfo{
-			Fs:        i.Fs,
-			Name:      name,
-			Size:      f.Size(),
-			ModTime:   f.ModTime(),
-			Mode:      f.Mode(),
-			IsDir:     f.IsDir(),
-			Extension: filepath.Ext(name),
-			Path:      fPath,
+			Fs:         i.Fs,
+			Name:       name,
+			Size:       f.Size(),
+			ModTime:    f.ModTime(),
+			Mode:       f.Mode(),
+			IsDir:      f.IsDir(),
+			IsSymlink:  isSymlink,
+			Extension:  filepath.Ext(name),
+			Path:       fPath,
+			currentDir: dir,
 		}
 
 		if file.IsDir {
@@ -273,9 +366,13 @@ func (i *FileInfo) readListing(checker rules.Checker, readHeader bool) error {
 		} else {
 			listing.NumFiles++
 
-			err := file.detectType(true, false, readHeader)
-			if err != nil {
-				return err
+			if isInvalidLink {
+				file.Type = "invalid_link"
+			} else {
+				err := file.detectType(true, false, readHeader)
+				if err != nil {
+					return err
+				}
 			}
 		}
 

files/listing.go

@@ -16,6 +16,7 @@ type Listing struct {
 }
 
 // ApplySort applies the sort order using .Order and .Sort
+//
 //nolint:goconst
 func (l Listing) ApplySort() {
 	// Check '.Order' to know how to sort

fileutils/file.go

@@ -17,12 +17,12 @@ func MoveFile(fs afero.Fs, src, dst string) error {
 		return nil
 	}
 	// fallback
-	err := CopyFile(fs, src, dst)
+	err := Copy(fs, src, dst)
 	if err != nil {
 		_ = fs.Remove(dst)
 		return err
 	}
-	if err := fs.Remove(src); err != nil {
+	if err := fs.RemoveAll(src); err != nil {
 		return err
 	}
 	return nil
@@ -40,13 +40,13 @@ func CopyFile(fs afero.Fs, source, dest string) error {
 
 	// Makes the directory needed to create the dst
 	// file.
-	err = fs.MkdirAll(filepath.Dir(dest), 0666)
+	err = fs.MkdirAll(filepath.Dir(dest), 0666) //nolint:gomnd
 	if err != nil {
 		return err
 	}
 
 	// Create the destination file.
-	dst, err := fs.OpenFile(dest, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0775)
+	dst, err := fs.OpenFile(dest, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0775) //nolint:gomnd
 	if err != nil {
 		return err
 	}

frontend/.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier"
+  ],
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/no-reserved-component-names": "warn",
+    "vue/no-mutating-props": "warn"
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  }
+}

frontend/.prettierignore

@@ -0,0 +1,2 @@
+# Ignore artifacts:
+dist

frontend/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

frontend/assets.go

@@ -0,0 +1,13 @@
+//go:build !dev
+// +build !dev
+
+package frontend
+
+import "embed"
+
+//go:embed dist/*
+var assets embed.FS
+
+func Assets() embed.FS {
+	return assets
+}

frontend/assets_dev.go

@@ -0,0 +1,15 @@
+//go:build dev
+// +build dev
+
+package frontend
+
+import (
+	"io/fs"
+	"os"
+)
+
+var assets fs.FS = os.DirFS("frontend")
+
+func Assets() fs.FS {
+	return assets
+}

frontend/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

frontend/index.html

@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
+
+    <title>File Browser</title>
+
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/img/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/img/icons/favicon-16x16.png"
+    />
+
+    <!-- Add to home screen for Android and modern mobile browsers -->
+    <link
+      rel="manifest"
+      id="manifestPlaceholder"
+      crossorigin="use-credentials"
+    />
+    <meta name="theme-color" content="#2979ff" />
+
+    <!-- Add to home screen for Safari on iOS/iPadOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="assets" />
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />
+
+    <!-- Add to home screen for Windows -->
+    <meta
+      name="msapplication-TileImage"
+      content="/img/icons/mstile-144x144.png"
+    />
+    <meta name="msapplication-TileColor" content="#2979ff" />
+
+    <!-- Inject Some Variables and generate the manifest json -->
+    <script>
+      // We can assign JSON directly
+      window.FileBrowser = {
+        AuthMethod: "json",
+        BaseURL: "",
+        CSS: false,
+        Color: "",
+        DisableExternal: false,
+        DisableUsedPercentage: false,
+        EnableExec: true,
+        EnableThumbs: true,
+        LoginPage: true,
+        Name: "",
+        NoAuth: false,
+        ReCaptcha: false,
+        ResizePreview: true,
+        Signup: false,
+        StaticURL: "",
+        Theme: "",
+        TusSettings: { chunkSize: 10485760, retryCount: 5 },
+        Version: "(untracked)",
+      };
+      // Global function to prepend static url
+      window.__prependStaticUrl = (url) => {
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
+      };
+      var dynamicManifest = {
+        name: window.FileBrowser.Name || "File Browser",
+        short_name: window.FileBrowser.Name || "File Browser",
+        icons: [
+          {
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-192x192.png"
+            ),
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-512x512.png"
+            ),
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+        start_url: window.location.origin + window.FileBrowser.BaseURL,
+        display: "standalone",
+        background_color: "#ffffff",
+        theme_color: window.FileBrowser.Color || "#455a64",
+      };
+
+      const stringManifest = JSON.stringify(dynamicManifest);
+      const blob = new Blob([stringManifest], { type: "application/json" });
+      const manifestURL = URL.createObjectURL(blob);
+      document
+        .querySelector("#manifestPlaceholder")
+        .setAttribute("href", manifestURL);
+    </script>
+
+    <style>
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        z-index: 9999;
+        transition: 0.1s ease opacity;
+        -webkit-transition: 0.1s ease opacity;
+      }
+
+      #loading.done {
+        opacity: 0;
+      }
+
+      #loading .spinner {
+        width: 70px;
+        text-align: center;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+
+      #loading .spinner > div {
+        width: 18px;
+        height: 18px;
+        background-color: #333;
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+      }
+
+      #loading .spinner .bounce1 {
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+      }
+
+      #loading .spinner .bounce2 {
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+      }
+
+      @-webkit-keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+        }
+      }
+
+      @keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <div id="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    </div>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

frontend/package.json

@@ -2,62 +2,63 @@
   "name": "filebrowser-frontend",
   "version": "2.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "watch": "vue-cli-service build --watch",
-    "lint": "vue-cli-service lint --fix"
+    "dev": "vite dev",
+    "serve": "vite serve",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "clean": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitkeep' -exec rm -r {} +",
+    "lint": "eslint --ext .vue,.js src/",
+    "lint:fix": "eslint --ext .vue,.js --fix src/",
+    "format": "prettier --write ."
   },
   "dependencies": {
-    "ace-builds": "^1.4.7",
-    "clipboard": "^2.0.4",
-    "js-base64": "^2.5.1",
+    "ace-builds": "^1.23.4",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.32.0",
+    "css-vars-ponyfill": "^2.4.8",
+    "filesize": "^10.0.8",
+    "js-base64": "^3.7.5",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "material-design-icons": "^3.0.1",
-    "moment": "^2.24.0",
+    "material-icons": "^1.13.9",
+    "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
+    "pretty-bytes": "^6.1.1",
     "qrcode.vue": "^1.7.0",
+    "tus-js-client": "^3.1.1",
     "utif": "^3.1.0",
-    "vue": "^2.6.10",
-    "vue-i18n": "^8.15.3",
-    "vue-lazyload": "^1.3.3",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.2",
-    "vuex-router-sync": "^5.0.0"
+    "vue": "^2.7.14",
+    "vue-async-computed": "^3.9.0",
+    "vue-i18n": "^8.28.2",
+    "vue-lazyload": "^1.3.5",
+    "vue-router": "^3.6.5",
+    "vue-simple-progress": "^1.1.1",
+    "vuex": "^3.6.2",
+    "vuex-router-sync": "^5.0.0",
+    "whatwg-fetch": "^3.6.17"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-service": "^4.1.2",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.1.2",
-    "vue-template-compiler": "^2.6.10"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.16.1",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.1",
+    "terser": "^5.19.2",
+    "vite": "^4.4.9",
+    "vite-plugin-compression2": "^0.10.3",
+    "vite-plugin-rewrite-all": "^1.0.1"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not ie < 11"
   ]
 }

frontend/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

frontend/public/index.html

@@ -1,144 +1,193 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
 
-  [{[ if .ReCaptcha -]}]
+    [{[ if .ReCaptcha -]}]
     <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
-  [{[ end ]}]
+    [{[ end ]}]
 
-  <title>[{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]</title>
+    <title>
+      [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
+    </title>
 
-  <link rel="icon" type="image/png" sizes="32x32" href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png"
+    />
 
-  <!-- Add to home screen for Android and modern mobile browsers -->
-  <link rel="manifest" id="manifestPlaceholder" crossorigin="use-credentials">
-  <meta name="theme-color" content="#2979ff">
+    <!-- Add to home screen for Android and modern mobile browsers -->
+    <link
+      rel="manifest"
+      id="manifestPlaceholder"
+      crossorigin="use-credentials"
+    />
+    <meta
+      name="theme-color"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />
 
-  <!-- Add to home screen for Safari on iOS/iPadOS -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="assets">
-  <link rel="apple-touch-icon" href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png">
+    <!-- Add to home screen for Safari on iOS/iPadOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="assets" />
+    <link
+      rel="apple-touch-icon"
+      href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png"
+    />
 
-  <!-- Add to home screen for Windows -->
-  <meta name="msapplication-TileImage" content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png">
-  <meta name="msapplication-TileColor" content="#2979ff">
+    <!-- Add to home screen for Windows -->
+    <meta
+      name="msapplication-TileImage"
+      content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png"
+    />
+    <meta
+      name="msapplication-TileColor"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />
 
-  <!-- Inject Some Variables and generate the manifest json -->
-  <script>
-    window.FileBrowser = JSON.parse(`[{[ .Json ]}]`);
+    <!-- Inject Some Variables and generate the manifest json -->
+    <script>
+      // We can assign JSON directly
+      window.FileBrowser = [{[ .Json ]}];
+      // Global function to prepend static url
+      window.__prependStaticUrl = (url) => {
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
+      };
+      var dynamicManifest = {
+        name: window.FileBrowser.Name || "File Browser",
+        short_name: window.FileBrowser.Name || "File Browser",
+        icons: [
+          {
+            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+        start_url: window.location.origin + window.FileBrowser.BaseURL,
+        display: "standalone",
+        background_color: "#ffffff",
+        theme_color: window.FileBrowser.Color || "#455a64",
+      };
 
-    var fullStaticURL = window.location.origin + window.FileBrowser.StaticURL;
-    var dynamicManifest = {
-      "name": window.FileBrowser.Name || 'File Browser',
-      "short_name": window.FileBrowser.Name || 'File Browser',
-      "icons": [
-        {
-          "src": fullStaticURL + "/img/icons/android-chrome-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        },
-        {
-          "src": fullStaticURL + "/img/icons/android-chrome-512x512.png",
-          "sizes": "512x512",
-          "type": "image/png"
+      const stringManifest = JSON.stringify(dynamicManifest);
+      const blob = new Blob([stringManifest], { type: "application/json" });
+      const manifestURL = URL.createObjectURL(blob);
+      document
+        .querySelector("#manifestPlaceholder")
+        .setAttribute("href", manifestURL);
+    </script>
+
+    <style>
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        z-index: 9999;
+        transition: 0.1s ease opacity;
+        -webkit-transition: 0.1s ease opacity;
+      }
+
+      #loading.done {
+        opacity: 0;
+      }
+
+      #loading .spinner {
+        width: 70px;
+        text-align: center;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+
+      #loading .spinner > div {
+        width: 18px;
+        height: 18px;
+        background-color: #333;
+        border-radius: 100%;
+        display: inline-block;
+        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+      }
+
+      #loading .spinner .bounce1 {
+        -webkit-animation-delay: -0.32s;
+        animation-delay: -0.32s;
+      }
+
+      #loading .spinner .bounce2 {
+        -webkit-animation-delay: -0.16s;
+        animation-delay: -0.16s;
+      }
+
+      @-webkit-keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
         }
-      ],
-      "start_url": window.location.origin + window.FileBrowser.BaseURL,
-      "display": "standalone",
-      "background_color": "#ffffff",
-      "theme_color": "#455a64"
-    }
+        40% {
+          -webkit-transform: scale(1);
+        }
+      }
 
-    const stringManifest = JSON.stringify(dynamicManifest);
-    const blob = new Blob([stringManifest], {type: 'application/json'});
-    const manifestURL = URL.createObjectURL(blob);
-    document.querySelector('#manifestPlaceholder').setAttribute('href', manifestURL);
-  </script>
+      @keyframes sk-bouncedelay {
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
 
-  <style>
-  #loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    z-index: 9999;
-    transition: .1s ease opacity;
-    -webkit-transition: .1s ease opacity;
-  }
-
-  #loading.done {
-    opacity: 0;
-  }
-
-  .spinner {
-    width: 70px;
-    text-align: center;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-            transform: translate(-50%, -50%);
-  }
-
-  .spinner > div {
-    width: 18px;
-    height: 18px;
-    background-color: #333;
-    border-radius: 100%;
-    display: inline-block;
-    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  }
-
-  .spinner .bounce1 {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  .spinner .bounce2 {
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-
-  @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
-  }
-
-  @keyframes sk-bouncedelay {
-    0%, 80%, 100% {
-      -webkit-transform: scale(0);
-      transform: scale(0);
-    } 40% {
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
-    }
-  }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <div id="loading">
-    <div class="spinner">
-      <div class="bounce1"></div>
-      <div class="bounce2"></div>
-      <div class="bounce3"></div>
+    <div id="loading">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
     </div>
-  </div>
 
-  [{[ if .Theme -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
-  [{[ end ]}]
-  [{[ if .CSS -]}]
+    <script type="module" src="/src/main.js"></script>
+
+    [{[ if .Theme -]}]
+    <link
+      rel="stylesheet"
+      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
+    />
+    [{[ end ]}] [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
-  [{[ end ]}]
-</body>
+    [{[ end ]}]
+  </body>
 </html>

frontend/public/themes/dark.css

@@ -16,7 +16,7 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div, #previewer .loading .spinner div {
+#loading .spinner div, main .spinner div {
   background: var(--icon);
 }
 
@@ -69,13 +69,16 @@ nav > div {
   border-color: var(--divider);
 }
 
-#breadcrumbs {
+.breadcrumbs {
   border-color: var(--divider);
   color: var(--textPrimary) !important;
 }
-#breadcrumbs span {
+.breadcrumbs span {
   color: var(--textPrimary) !important;
 }
+.breadcrumbs a:hover {
+  background-color: rgba(255, 255, 255, .1);
+}
 
 #listing .item {
   background: var(--surfacePrimary);
@@ -114,13 +117,20 @@ nav > div {
   background: var(--surfaceSecondary);
 }
 
+.dashboard #nav ul li {
+  color: var(--textSecondary);
+}
+.dashboard #nav ul li:hover {
+  background: var(--surfaceSecondary);
+}
+
 .card h3,
 .dashboard #nav,
 .dashboard p label {
   color: var(--textPrimary);
 }
-.card#share ul li input,
-.card#share ul li select,
+.card#share input,
+.card#share select,
 .input {
   background: var(--surfaceSecondary);
   color: var(--textPrimary);
@@ -138,7 +148,7 @@ nav > div {
   background: #147A41;
 }
 
-.dashboard #nav li,
+.dashboard #nav .wrapper,
 .collapsible {
   border-color: var(--divider);
 }
@@ -164,6 +174,12 @@ table th {
   background: var(--surfacePrimary);
   color: var(--textPrimary);
 }
+.shell__divider {
+  background: rgba(255, 255, 255, 0.1);
+}
+.shell__divider:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
 .shell__result {
   border-top: 1px solid var(--divider);
 }

frontend/src/App.vue

@@ -5,19 +5,22 @@
 </template>
 
 <script>
+// eslint-disable-next-line no-undef
+// __webpack_public_path__ = window.FileBrowser.StaticURL + "/";
+
 export default {
-  name: 'app',
-  mounted () {
-    const loading = document.getElementById('loading')
-    loading.classList.add('done')
+  name: "app",
+  mounted() {
+    const loading = document.getElementById("loading");
+    loading.classList.add("done");
 
     setTimeout(function () {
-      loading.parentNode.removeChild(loading)
-    }, 200)
-  }
-}
+      loading.parentNode.removeChild(loading);
+    }, 200);
+  },
+};
 </script>
 
 <style>
-@import './css/styles.css';
+@import "./css/styles.css";
 </style>

frontend/src/api/commands.js

@@ -1,16 +1,16 @@
-import { removePrefix } from './utils'
-import { baseURL } from '@/utils/constants'
-import store from '@/store'
+import { removePrefix } from "./utils";
+import { baseURL } from "@/utils/constants";
+import store from "@/store";
 
-const ssl = (window.location.protocol === 'https:')
-const protocol = (ssl ? 'wss:' : 'ws:')
+const ssl = window.location.protocol === "https:";
+const protocol = ssl ? "wss:" : "ws:";
 
 export default function command(url, command, onmessage, onclose) {
-  url = removePrefix(url)
-  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`
+  url = removePrefix(url);
+  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`;
 
-  let conn = new window.WebSocket(url)
-  conn.onopen = () => conn.send(command)
-  conn.onmessage = onmessage
-  conn.onclose = onclose
+  let conn = new window.WebSocket(url);
+  conn.onopen = () => conn.send(command);
+  conn.onmessage = onmessage;
+  conn.onclose = onclose;
 }

frontend/src/api/files.js

@@ -1,149 +1,202 @@
-import { fetchURL, removePrefix } from './utils'
-import { baseURL } from '@/utils/constants'
-import store from '@/store'
+import { createURL, fetchURL, removePrefix } from "./utils";
+import { baseURL } from "@/utils/constants";
+import store from "@/store";
+import { upload as postTus, useTus } from "./tus";
 
-export async function fetch (url) {
-  url = removePrefix(url)
+export async function fetch(url) {
+  url = removePrefix(url);
 
-  const res = await fetchURL(`/api/resources${url}`, {})
+  const res = await fetchURL(`/api/resources${url}`, {});
 
-  if (res.status === 200) {
-    let data = await res.json()
-    data.url = `/files${url}`
+  let data = await res.json();
+  data.url = `/files${url}`;
 
-    if (data.isDir) {
-      if (!data.url.endsWith('/')) data.url += '/'
-      data.items = data.items.map((item, index) => {
-        item.index = index
-        item.url = `${data.url}${encodeURIComponent(item.name)}`
+  if (data.isDir) {
+    if (!data.url.endsWith("/")) data.url += "/";
+    data.items = data.items.map((item, index) => {
+      item.index = index;
+      item.url = `${data.url}${encodeURIComponent(item.name)}`;
 
-        if (item.isDir) {
-          item.url += '/'
-        }
+      if (item.isDir) {
+        item.url += "/";
+      }
 
-        return item
-      })
-    }
-
-    return data
-  } else {
-    throw new Error(res.status)
+      return item;
+    });
   }
+
+  return data;
 }
 
-async function resourceAction (url, method, content) {
-  url = removePrefix(url)
+async function resourceAction(url, method, content) {
+  url = removePrefix(url);
 
-  let opts = { method }
+  let opts = { method };
 
   if (content) {
-    opts.body = content
+    opts.body = content;
   }
 
-  const res = await fetchURL(`/api/resources${url}`, opts)
+  const res = await fetchURL(`/api/resources${url}`, opts);
 
-  if (res.status !== 200) {
-    throw new Error(await res.text())
-  } else {
-    return res
-  }
+  return res;
 }
 
-export async function remove (url) {
-  return resourceAction(url, 'DELETE')
+export async function remove(url) {
+  return resourceAction(url, "DELETE");
 }
 
-export async function put (url, content = '') {
-  return resourceAction(url, 'PUT', content)
+export async function put(url, content = "") {
+  return resourceAction(url, "PUT", content);
 }
 
-export function download (format, ...files) {
-  let url = store.getters['isSharing'] ? `${baseURL}/api/public/dl/${store.state.hash}` : `${baseURL}/api/raw`
+export function download(format, ...files) {
+  let url = `${baseURL}/api/raw`;
 
   if (files.length === 1) {
-    url += removePrefix(files[0]) + '?'
+    url += removePrefix(files[0]) + "?";
   } else {
-    let arg = ''
+    let arg = "";
 
     for (let file of files) {
-      arg += removePrefix(file) + ','
+      arg += removePrefix(file) + ",";
     }
 
-    arg = arg.substring(0, arg.length - 1)
-    arg = encodeURIComponent(arg)
-    url += `/?files=${arg}&`
+    arg = arg.substring(0, arg.length - 1);
+    arg = encodeURIComponent(arg);
+    url += `/?files=${arg}&`;
   }
 
-  if (format !== null) {
-    url += `algo=${format}&`
-  }
-  if (store.state.jwt !== ''){
-    url += `auth=${store.state.jwt}&`
-  }
-  if (store.state.token !== ''){
-    url += `token=${store.state.token}`
+  if (format) {
+    url += `algo=${format}&`;
   }
 
-  window.open(url)
+  if (store.state.jwt) {
+    url += `auth=${store.state.jwt}&`;
+  }
+
+  window.open(url);
 }
 
-export async function post (url, content = '', overwrite = false, onupload) {
-  url = removePrefix(url)
+export async function post(url, content = "", overwrite = false, onupload) {
+  // Use the pre-existing API if:
+  const useResourcesApi =
+    // a folder is being created
+    url.endsWith("/") ||
+    // We're not using http(s)
+    (content instanceof Blob &&
+      !["http:", "https:"].includes(window.location.protocol)) ||
+    // Tus is disabled / not applicable
+    !(await useTus(content));
+  return useResourcesApi
+    ? postResources(url, content, overwrite, onupload)
+    : postTus(url, content, overwrite, onupload);
+}
 
-  let bufferContent
-  if (content instanceof Blob && !['http:', 'https:'].includes(window.location.protocol)) {
-    bufferContent = await new Response(content).arrayBuffer()
+async function postResources(url, content = "", overwrite = false, onupload) {
+  url = removePrefix(url);
+
+  let bufferContent;
+  if (
+    content instanceof Blob &&
+    !["http:", "https:"].includes(window.location.protocol)
+  ) {
+    bufferContent = await new Response(content).arrayBuffer();
   }
 
   return new Promise((resolve, reject) => {
-    let request = new XMLHttpRequest()
-    request.open('POST', `${baseURL}/api/resources${url}?override=${overwrite}`, true)
-    request.setRequestHeader('X-Auth', store.state.jwt)
+    let request = new XMLHttpRequest();
+    request.open(
+      "POST",
+      `${baseURL}/api/resources${url}?override=${overwrite}`,
+      true
+    );
+    request.setRequestHeader("X-Auth", store.state.jwt);
 
-    if (typeof onupload === 'function') {
-      request.upload.onprogress = onupload
+    if (typeof onupload === "function") {
+      request.upload.onprogress = onupload;
     }
 
     request.onload = () => {
       if (request.status === 200) {
-        resolve(request.responseText)
+        resolve(request.responseText);
       } else if (request.status === 409) {
-        reject(request.status)
+        reject(request.status);
       } else {
-        reject(request.responseText)
+        reject(request.responseText);
       }
-    }
+    };
 
-    request.onerror = (error) => {
-      reject(error)
-    }
+    request.onerror = () => {
+      reject(new Error("001 Connection aborted"));
+    };
 
-    request.send(bufferContent || content)
-  })
+    request.send(bufferContent || content);
+  });
 }
 
-function moveCopy (items, copy = false, overwrite = false, rename = false) {
-  let promises = []
+function moveCopy(items, copy = false, overwrite = false, rename = false) {
+  let promises = [];
 
   for (let item of items) {
-    const from = item.from
-    const to = encodeURIComponent(removePrefix(item.to))
-    const url = `${from}?action=${copy ? 'copy' : 'rename'}&destination=${to}&override=${overwrite}&rename=${rename}`
-    promises.push(resourceAction(url, 'PATCH'))
+    const from = item.from;
+    const to = encodeURIComponent(removePrefix(item.to));
+    const url = `${from}?action=${
+      copy ? "copy" : "rename"
+    }&destination=${to}&override=${overwrite}&rename=${rename}`;
+    promises.push(resourceAction(url, "PATCH"));
   }
 
-  return Promise.all(promises)
+  return Promise.all(promises);
 }
 
-export function move (items, overwrite = false, rename = false) {
-  return moveCopy(items, false, overwrite, rename)
+export function move(items, overwrite = false, rename = false) {
+  return moveCopy(items, false, overwrite, rename);
 }
 
-export function copy (items, overwrite = false, rename = false) {
-  return moveCopy(items, true, overwrite, rename)
+export function copy(items, overwrite = false, rename = false) {
+  return moveCopy(items, true, overwrite, rename);
 }
 
-export async function checksum (url, algo) {
-  const data = await resourceAction(`${url}?checksum=${algo}`, 'GET')
-  return (await data.json()).checksums[algo]
+export async function checksum(url, algo) {
+  const data = await resourceAction(`${url}?checksum=${algo}`, "GET");
+  return (await data.json()).checksums[algo];
+}
+
+export function getDownloadURL(file, inline) {
+  const params = {
+    ...(inline && { inline: "true" }),
+  };
+
+  return createURL("api/raw" + file.path, params);
+}
+
+export function getPreviewURL(file, size) {
+  const params = {
+    inline: "true",
+    key: Date.parse(file.modified),
+  };
+
+  return createURL("api/preview/" + size + file.path, params);
+}
+
+export function getSubtitlesURL(file) {
+  const params = {
+    inline: "true",
+  };
+
+  const subtitles = [];
+  for (const sub of file.subtitles) {
+    subtitles.push(createURL("api/raw" + sub, params));
+  }
+
+  return subtitles;
+}
+
+export async function usage(url) {
+  url = removePrefix(url);
+
+  const res = await fetchURL(`/api/usage${url}`, {});
+
+  return await res.json();
 }

frontend/src/api/index.js

@@ -1,15 +1,9 @@
-import * as files from './files'
-import * as share from './share'
-import * as users from './users'
-import * as settings from './settings'
-import search from './search'
-import commands from './commands'
+import * as files from "./files";
+import * as share from "./share";
+import * as users from "./users";
+import * as settings from "./settings";
+import * as pub from "./pub";
+import search from "./search";
+import commands from "./commands";
 
-export {
-  files,
-  share,
-  users,
-  settings,
-  commands,
-  search
-}
+export { files, share, users, settings, pub, commands, search };

frontend/src/api/pub.js

@@ -0,0 +1,70 @@
+import { fetchURL, removePrefix, createURL } from "./utils";
+import { baseURL } from "@/utils/constants";
+
+export async function fetch(url, password = "") {
+  url = removePrefix(url);
+
+  const res = await fetchURL(
+    `/api/public/share${url}`,
+    {
+      headers: { "X-SHARE-PASSWORD": encodeURIComponent(password) },
+    },
+    false
+  );
+
+  let data = await res.json();
+  data.url = `/share${url}`;
+
+  if (data.isDir) {
+    if (!data.url.endsWith("/")) data.url += "/";
+    data.items = data.items.map((item, index) => {
+      item.index = index;
+      item.url = `${data.url}${encodeURIComponent(item.name)}`;
+
+      if (item.isDir) {
+        item.url += "/";
+      }
+
+      return item;
+    });
+  }
+
+  return data;
+}
+
+export function download(format, hash, token, ...files) {
+  let url = `${baseURL}/api/public/dl/${hash}`;
+
+  if (files.length === 1) {
+    url += encodeURIComponent(files[0]) + "?";
+  } else {
+    let arg = "";
+
+    for (let file of files) {
+      arg += encodeURIComponent(file) + ",";
+    }
+
+    arg = arg.substring(0, arg.length - 1);
+    arg = encodeURIComponent(arg);
+    url += `/?files=${arg}&`;
+  }
+
+  if (format) {
+    url += `algo=${format}&`;
+  }
+
+  if (token) {
+    url += `token=${token}&`;
+  }
+
+  window.open(url);
+}
+
+export function getDownloadURL(share, inline = false) {
+  const params = {
+    ...(inline && { inline: "true" }),
+    ...(share.token && { token: share.token }),
+  };
+
+  return createURL("api/public/dl/" + share.hash + share.path, params, false);
+}

frontend/src/api/search.js

@@ -1,31 +1,27 @@
-import { fetchURL, removePrefix } from './utils'
-import url from '../utils/url'
+import { fetchURL, removePrefix } from "./utils";
+import url from "../utils/url";
 
-export default async function search (base, query) {
-  base = removePrefix(base)
-  query = encodeURIComponent(query)
+export default async function search(base, query) {
+  base = removePrefix(base);
+  query = encodeURIComponent(query);
 
-  if (!base.endsWith('/')) {
-    base += '/'
+  if (!base.endsWith("/")) {
+    base += "/";
   }
 
-  let res = await fetchURL(`/api/search${base}?query=${query}`, {})
+  let res = await fetchURL(`/api/search${base}?query=${query}`, {});
 
-  if (res.status === 200) {
-    let data = await res.json()
+  let data = await res.json();
 
-    data = data.map((item) => {
-      item.url = `/files${base}` + url.encodePath(item.path)
+  data = data.map((item) => {
+    item.url = `/files${base}` + url.encodePath(item.path);
 
-      if (item.dir) {
-        item.url += '/'
-      }
+    if (item.dir) {
+      item.url += "/";
+    }
 
-      return item
-    })
+    return item;
+  });
 
-    return data
-  } else {
-    throw Error(res.status)
-  }
-}
+  return data;
+}

frontend/src/api/settings.js

@@ -1,16 +1,12 @@
-import { fetchURL, fetchJSON } from './utils'
+import { fetchURL, fetchJSON } from "./utils";
 
-export function get () {
-  return fetchJSON(`/api/settings`, {})
+export function get() {
+  return fetchJSON(`/api/settings`, {});
 }
 
-export async function update (settings) {
-  const res = await fetchURL(`/api/settings`, {
-    method: 'PUT',
-    body: JSON.stringify(settings)
-  })
-
-  if (res.status !== 200) {
-    throw new Error(res.status)
-  }
+export async function update(settings) {
+  await fetchURL(`/api/settings`, {
+    method: "PUT",
+    body: JSON.stringify(settings),
+  });
 }

frontend/src/api/share.js

@@ -1,42 +1,36 @@
-import { fetchURL, fetchJSON, removePrefix } from './utils'
+import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";
 
 export async function list() {
-  return fetchJSON('/api/shares')
-}
-
-export async function getHash(hash, password = "") {
-  return fetchJSON(`/api/public/share/${hash}`, {
-    headers: {'X-SHARE-PASSWORD': password},
-  })
+  return fetchJSON("/api/shares");
 }
 
 export async function get(url) {
-  url = removePrefix(url)
-  return fetchJSON(`/api/share${url}`)
+  url = removePrefix(url);
+  return fetchJSON(`/api/share${url}`);
 }
 
 export async function remove(hash) {
-  const res = await fetchURL(`/api/share/${hash}`, {
-    method: 'DELETE'
-  })
-
-  if (res.status !== 200) {
-    throw new Error(res.status)
-  }
+  await fetchURL(`/api/share/${hash}`, {
+    method: "DELETE",
+  });
 }
 
-export async function create(url, password = '', expires = '', unit = 'hours') {
-  url = removePrefix(url)
-  url = `/api/share${url}`
-  if (expires !== '') {
-    url += `?expires=${expires}&unit=${unit}`
+export async function create(url, password = "", expires = "", unit = "hours") {
+  url = removePrefix(url);
+  url = `/api/share${url}`;
+  if (expires !== "") {
+    url += `?expires=${expires}&unit=${unit}`;
   }
-  let body = '{}';
-  if (password != '' || expires !== '' || unit !== 'hours') {
-    body = JSON.stringify({password: password, expires: expires, unit: unit})
+  let body = "{}";
+  if (password != "" || expires !== "" || unit !== "hours") {
+    body = JSON.stringify({ password: password, expires: expires, unit: unit });
   }
   return fetchJSON(url, {
-    method: 'POST',
+    method: "POST",
     body: body,
-  })
+  });
+}
+
+export function getShareURL(share) {
+  return createURL("share/" + share.hash, {}, false);
 }

frontend/src/api/tus.js

@@ -0,0 +1,195 @@
+import * as tus from "tus-js-client";
+import { baseURL, tusEndpoint, tusSettings } from "@/utils/constants";
+import store from "@/store";
+import { removePrefix } from "@/api/utils";
+import { fetchURL } from "./utils";
+
+const RETRY_BASE_DELAY = 1000;
+const RETRY_MAX_DELAY = 20000;
+const SPEED_UPDATE_INTERVAL = 1000;
+const ALPHA = 0.2;
+const ONE_MINUS_ALPHA = 1 - ALPHA;
+const RECENT_SPEEDS_LIMIT = 5;
+const MB_DIVISOR = 1024 * 1024;
+const CURRENT_UPLOAD_LIST = {};
+
+export async function upload(
+  filePath,
+  content = "",
+  overwrite = false,
+  onupload
+) {
+  if (!tusSettings) {
+    // Shouldn't happen as we check for tus support before calling this function
+    throw new Error("Tus.io settings are not defined");
+  }
+
+  filePath = removePrefix(filePath);
+  let resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
+
+  await createUpload(resourcePath);
+
+  return new Promise((resolve, reject) => {
+    let upload = new tus.Upload(content, {
+      uploadUrl: `${baseURL}${resourcePath}`,
+      chunkSize: tusSettings.chunkSize,
+      retryDelays: computeRetryDelays(tusSettings),
+      parallelUploads: 1,
+      storeFingerprintForResuming: false,
+      headers: {
+        "X-Auth": store.state.jwt,
+      },
+      onError: function (error) {
+        if (CURRENT_UPLOAD_LIST[filePath].interval) {
+          clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
+        }
+        delete CURRENT_UPLOAD_LIST[filePath];
+        reject("Upload failed: " + error);
+      },
+      onProgress: function (bytesUploaded) {
+        let fileData = CURRENT_UPLOAD_LIST[filePath];
+        fileData.currentBytesUploaded = bytesUploaded;
+
+        if (!fileData.hasStarted) {
+          fileData.hasStarted = true;
+          fileData.lastProgressTimestamp = Date.now();
+
+          fileData.interval = setInterval(() => {
+            calcProgress(filePath);
+          }, SPEED_UPDATE_INTERVAL);
+        }
+        if (typeof onupload === "function") {
+          onupload({ loaded: bytesUploaded });
+        }
+      },
+      onSuccess: function () {
+        if (CURRENT_UPLOAD_LIST[filePath].interval) {
+          clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
+        }
+        delete CURRENT_UPLOAD_LIST[filePath];
+        resolve();
+      },
+    });
+    CURRENT_UPLOAD_LIST[filePath] = {
+      upload: upload,
+      recentSpeeds: [],
+      initialBytesUploaded: 0,
+      currentBytesUploaded: 0,
+      currentAverageSpeed: 0,
+      lastProgressTimestamp: null,
+      sumOfRecentSpeeds: 0,
+      hasStarted: false,
+      interval: null,
+    };
+    upload.start();
+  });
+}
+
+async function createUpload(resourcePath) {
+  let headResp = await fetchURL(resourcePath, {
+    method: "POST",
+  });
+  if (headResp.status !== 201) {
+    throw new Error(
+      `Failed to create an upload: ${headResp.status} ${headResp.statusText}`
+    );
+  }
+}
+
+function computeRetryDelays(tusSettings) {
+  if (!tusSettings.retryCount || tusSettings.retryCount < 1) {
+    // Disable retries altogether
+    return null;
+  }
+  // The tus client expects our retries as an array with computed backoffs
+  // E.g.: [0, 3000, 5000, 10000, 20000]
+  const retryDelays = [];
+  let delay = 0;
+
+  for (let i = 0; i < tusSettings.retryCount; i++) {
+    retryDelays.push(Math.min(delay, RETRY_MAX_DELAY));
+    delay =
+      delay === 0 ? RETRY_BASE_DELAY : Math.min(delay * 2, RETRY_MAX_DELAY);
+  }
+
+  return retryDelays;
+}
+
+export async function useTus(content) {
+  return isTusSupported() && content instanceof Blob;
+}
+
+function isTusSupported() {
+  return tus.isSupported === true;
+}
+
+function computeETA(state) {
+  if (state.speedMbyte === 0) {
+    return Infinity;
+  }
+  const totalSize = state.sizes.reduce((acc, size) => acc + size, 0);
+  const uploadedSize = state.progress.reduce(
+    (acc, progress) => acc + progress,
+    0
+  );
+  const remainingSize = totalSize - uploadedSize;
+  const speedBytesPerSecond = state.speedMbyte * 1024 * 1024;
+  return remainingSize / speedBytesPerSecond;
+}
+
+function computeGlobalSpeedAndETA() {
+  let totalSpeed = 0;
+  let totalCount = 0;
+
+  for (let filePath in CURRENT_UPLOAD_LIST) {
+    totalSpeed += CURRENT_UPLOAD_LIST[filePath].currentAverageSpeed;
+    totalCount++;
+  }
+
+  if (totalCount === 0) return { speed: 0, eta: Infinity };
+
+  const averageSpeed = totalSpeed / totalCount;
+  const averageETA = computeETA(store.state.upload, averageSpeed);
+
+  return { speed: averageSpeed, eta: averageETA };
+}
+
+function calcProgress(filePath) {
+  let fileData = CURRENT_UPLOAD_LIST[filePath];
+
+  let elapsedTime = (Date.now() - fileData.lastProgressTimestamp) / 1000;
+  let bytesSinceLastUpdate =
+    fileData.currentBytesUploaded - fileData.initialBytesUploaded;
+  let currentSpeed = bytesSinceLastUpdate / MB_DIVISOR / elapsedTime;
+
+  if (fileData.recentSpeeds.length >= RECENT_SPEEDS_LIMIT) {
+    fileData.sumOfRecentSpeeds -= fileData.recentSpeeds.shift();
+  }
+
+  fileData.recentSpeeds.push(currentSpeed);
+  fileData.sumOfRecentSpeeds += currentSpeed;
+
+  let avgRecentSpeed =
+    fileData.sumOfRecentSpeeds / fileData.recentSpeeds.length;
+  fileData.currentAverageSpeed =
+    ALPHA * avgRecentSpeed + ONE_MINUS_ALPHA * fileData.currentAverageSpeed;
+
+  const { speed, eta } = computeGlobalSpeedAndETA();
+  store.commit("setUploadSpeed", speed);
+  store.commit("setETA", eta);
+
+  fileData.initialBytesUploaded = fileData.currentBytesUploaded;
+  fileData.lastProgressTimestamp = Date.now();
+}
+
+export function abortAllUploads() {
+  for (let filePath in CURRENT_UPLOAD_LIST) {
+    if (CURRENT_UPLOAD_LIST[filePath].interval) {
+      clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
+    }
+    if (CURRENT_UPLOAD_LIST[filePath].upload) {
+      CURRENT_UPLOAD_LIST[filePath].upload.abort(true);
+    }
+    delete CURRENT_UPLOAD_LIST[filePath];
+  }
+}

frontend/src/api/users.js

@@ -1,52 +1,41 @@
-import { fetchURL, fetchJSON } from './utils'
+import { fetchURL, fetchJSON } from "./utils";
 
-export async function getAll () {
-  return fetchJSON(`/api/users`, {})
+export async function getAll() {
+  return fetchJSON(`/api/users`, {});
 }
 
-export async function get (id) {
-  return fetchJSON(`/api/users/${id}`, {})
+export async function get(id) {
+  return fetchJSON(`/api/users/${id}`, {});
 }
 
-export async function create (user) {
+export async function create(user) {
   const res = await fetchURL(`/api/users`, {
-    method: 'POST',
+    method: "POST",
     body: JSON.stringify({
-      what: 'user',
+      what: "user",
       which: [],
-      data: user
-    })
-  })
+      data: user,
+    }),
+  });
 
   if (res.status === 201) {
-    return res.headers.get('Location')
-  } else {
-    throw new Error(res.status)
+    return res.headers.get("Location");
   }
-
 }
 
-export async function update (user, which = ['all']) {
-  const res = await fetchURL(`/api/users/${user.id}`, {
-    method: 'PUT',
+export async function update(user, which = ["all"]) {
+  await fetchURL(`/api/users/${user.id}`, {
+    method: "PUT",
     body: JSON.stringify({
-      what: 'user',
+      what: "user",
       which: which,
-      data: user
-    })
-  })
-
-  if (res.status !== 200) {
-    throw new Error(res.status)
-  }
+      data: user,
+    }),
+  });
 }
 
-export async function remove (id) {
-  const res = await fetchURL(`/api/users/${id}`, {
-    method: 'DELETE'
-  })
-
-  if (res.status !== 200) {
-    throw new Error(res.status)
-  }
+export async function remove(id) {
+  await fetchURL(`/api/users/${id}`, {
+    method: "DELETE",
+  });
 }

frontend/src/api/utils.js

@@ -1,47 +1,80 @@
-import store from '@/store'
-import { renew } from '@/utils/auth'
-import { baseURL } from '@/utils/constants'
+import store from "@/store";
+import { renew, logout } from "@/utils/auth";
+import { baseURL } from "@/utils/constants";
+import { encodePath } from "@/utils/url";
 
-export async function fetchURL (url, opts) {
-  opts = opts || {}
-  opts.headers = opts.headers || {}
+export async function fetchURL(url, opts, auth = true) {
+  opts = opts || {};
+  opts.headers = opts.headers || {};
 
-  let { headers, ...rest } = opts
+  let { headers, ...rest } = opts;
+  let res;
+  try {
+    res = await fetch(`${baseURL}${url}`, {
+      headers: {
+        "X-Auth": store.state.jwt,
+        ...headers,
+      },
+      ...rest,
+    });
+  } catch {
+    const error = new Error("000 No connection");
+    error.status = 0;
 
-  const res = await fetch(`${baseURL}${url}`, {
-    headers: {
-      'X-Auth': store.state.jwt,
-      ...headers
-    },
-    ...rest
-  })
-
-  if (res.headers.get('X-Renew-Token') === 'true') {
-    await renew(store.state.jwt)
+    throw error;
   }
 
-  return res
+  if (auth && res.headers.get("X-Renew-Token") === "true") {
+    await renew(store.state.jwt);
+  }
+
+  if (res.status < 200 || res.status > 299) {
+    const error = new Error(await res.text());
+    error.status = res.status;
+
+    if (auth && res.status == 401) {
+      logout();
+    }
+
+    throw error;
+  }
+
+  return res;
 }
 
-export async function fetchJSON (url, opts) {
-  const res = await fetchURL(url, opts)
+export async function fetchJSON(url, opts) {
+  const res = await fetchURL(url, opts);
 
   if (res.status === 200) {
-    return res.json()
+    return res.json();
   } else {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-export function removePrefix (url) {
-  if (url.startsWith('/files')) {
-    url = url.slice(6)
-  } else if (store.getters['isSharing']) {
-    url = url.slice(7 + store.state.hash.length)
-  }
+export function removePrefix(url) {
+  url = url.split("/").splice(2).join("/");
 
-  if (url === '') url = '/'
-  if (url[0] !== '/') url = '/' + url
-  return url
+  if (url === "") url = "/";
+  if (url[0] !== "/") url = "/" + url;
+  return url;
 }
 
+export function createURL(endpoint, params = {}, auth = true) {
+  let prefix = baseURL;
+  if (!prefix.endsWith("/")) {
+    prefix = prefix + "/";
+  }
+  const url = new URL(prefix + encodePath(endpoint), origin);
+
+  const searchParams = {
+    ...(auth && { auth: store.state.jwt }),
+    ...params,
+  };
+
+  for (const key in searchParams) {
+    url.searchParams.set(key, searchParams[key]);
+  }
+
+  return url.toString();
+}

frontend/src/components/Breadcrumbs.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="breadcrumbs">
+    <component
+      :is="element"
+      :to="base || ''"
+      :aria-label="$t('files.home')"
+      :title="$t('files.home')"
+    >
+      <i class="material-icons">home</i>
+    </component>
+
+    <span v-for="(link, index) in items" :key="index">
+      <span class="chevron"
+        ><i class="material-icons">keyboard_arrow_right</i></span
+      >
+      <component :is="element" :to="link.url">{{ link.name }}</component>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "breadcrumbs",
+  props: ["base", "noLink"],
+  computed: {
+    items() {
+      const relativePath = this.$route.path.replace(this.base, "");
+      let parts = relativePath.split("/");
+
+      if (parts[0] === "") {
+        parts.shift();
+      }
+
+      if (parts[parts.length - 1] === "") {
+        parts.pop();
+      }
+
+      let breadcrumbs = [];
+
+      for (let i = 0; i < parts.length; i++) {
+        if (i === 0) {
+          breadcrumbs.push({
+            name: decodeURIComponent(parts[i]),
+            url: this.base + "/" + parts[i] + "/",
+          });
+        } else {
+          breadcrumbs.push({
+            name: decodeURIComponent(parts[i]),
+            url: breadcrumbs[i - 1].url + parts[i] + "/",
+          });
+        }
+      }
+
+      if (breadcrumbs.length > 3) {
+        while (breadcrumbs.length !== 4) {
+          breadcrumbs.shift();
+        }
+
+        breadcrumbs[0].name = "...";
+      }
+
+      return breadcrumbs;
+    },
+    element() {
+      if (this.noLink !== undefined) {
+        return "span";
+      }
+
+      return "router-link";
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/Header.vue

@@ -1,185 +0,0 @@
-<template>
-  <header v-if="!isEditor && !isPreview">
-    <div>
-      <button @click="openSidebar" :aria-label="$t('buttons.toggleSidebar')" :title="$t('buttons.toggleSidebar')" class="action">
-        <i class="material-icons">menu</i>
-      </button>
-      <img :src="logoURL" alt="File Browser">
-      <search v-if="isLogged"></search>
-    </div>
-    <div>
-      <template v-if="isLogged || isSharing">
-        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
-          <i class="material-icons">search</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>
-
-        <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
-          <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-          <share-button v-show="showShareButton"></share-button>
-          <rename-button v-show="showRenameButton"></rename-button>
-          <copy-button v-show="showCopyButton"></copy-button>
-          <move-button v-show="showMoveButton"></move-button>
-          <delete-button v-show="showDeleteButton"></delete-button>
-        </div>
-
-        <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div id="dropdown" :class="{ active: showMore }">
-          <div v-if="!isListing || !isMobile">
-            <share-button v-show="showShareButton"></share-button>
-            <rename-button v-show="showRenameButton"></rename-button>
-            <copy-button v-show="showCopyButton"></copy-button>
-            <move-button v-show="showMoveButton"></move-button>
-            <delete-button v-show="showDeleteButton"></delete-button>
-          </div>
-
-          <shell-button v-if="isExecEnabled && !isSharing && user.perm.execute" />
-          <switch-button v-show="isListing"></switch-button>
-          <download-button v-show="showDownloadButton"></download-button>
-          <upload-button v-show="showUpload"></upload-button>
-          <info-button v-show="isFiles"></info-button>
-
-          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
-            <i class="material-icons">check_circle</i>
-            <span>{{ $t('buttons.select') }}</span>
-          </button>
-        </div>
-      </template>
-
-      <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-    </div>
-  </header>
-</template>
-
-<script>
-import Search from './Search'
-import InfoButton from './buttons/Info'
-import DeleteButton from './buttons/Delete'
-import RenameButton from './buttons/Rename'
-import UploadButton from './buttons/Upload'
-import DownloadButton from './buttons/Download'
-import SwitchButton from './buttons/SwitchView'
-import MoveButton from './buttons/Move'
-import CopyButton from './buttons/Copy'
-import ShareButton from './buttons/Share'
-import ShellButton from './buttons/Shell'
-import {mapGetters, mapState} from 'vuex'
-import { logoURL, enableExec } from '@/utils/constants'
-import * as api from '@/api'
-import buttons from '@/utils/buttons'
-
-export default {
-  name: 'header-layout',
-  components: {
-    Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton
-  },
-  data: function () {
-    return {
-      width: window.innerWidth,
-      pluginData: {
-        api,
-        buttons,
-        'store': this.$store,
-        'router': this.$router
-      }
-    }
-  },
-  created () {
-    window.addEventListener('resize', () => {
-      this.width = window.innerWidth
-    })
-  },
-  computed: {
-    ...mapGetters([
-      'selectedCount',
-      'isFiles',
-      'isEditor',
-      'isPreview',
-      'isListing',
-      'isLogged',
-      'isSharing'
-    ]),
-    ...mapState([
-      'req',
-      'user',
-      'loading',
-      'reload',
-      'multiple'
-    ]),
-    logoURL: () => logoURL,
-    isExecEnabled: () => enableExec,
-    isMobile () {
-      return this.width <= 736
-    },
-    showUpload () {
-      return this.isListing && this.user.perm.create
-    },
-    showDownloadButton () {
-      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
-    },
-    showDeleteButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount !== 0 && this.user.perm.delete)
-        : this.user.perm.delete)
-    },
-    showRenameButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showShareButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.share)
-        : this.user.perm.share)
-    },
-    showMoveButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showCopyButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.create)
-        : this.user.perm.create)
-    },
-    showMore () {
-      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
-    },
-    showOverlay () {
-      return this.showMore
-    }
-  },
-  methods: {
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    openSearch () {
-      this.$store.commit('showHover', 'search')
-    },
-    toggleMultipleSelection () {
-      this.$store.commit('multiple', !this.multiple)
-      this.resetPrompts()
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

frontend/src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="search" @click="open" v-bind:class="{ active , ongoing }">
+  <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
       <button
         v-if="active"
@@ -20,7 +20,7 @@
         v-model.trim="value"
         :aria-label="$t('search.search')"
         :placeholder="$t('search.search')"
-      >
+      />
     </div>
 
     <div id="result" ref="result">
@@ -30,25 +30,25 @@
 
           <template v-if="value.length === 0">
             <div class="boxes">
-              <h3>{{ $t('search.types') }}</h3>
+              <h3>{{ $t("search.types") }}</h3>
               <div>
                 <div
                   tabindex="0"
-                  v-for="(v,k) in boxes"
+                  v-for="(v, k) in boxes"
                   :key="k"
                   role="button"
-                  @click="init('type:'+k)"
-                  :aria-label="$t('search.'+v.label)"
+                  @click="init('type:' + k)"
+                  :aria-label="$t('search.' + v.label)"
                 >
-                  <i class="material-icons">{{v.icon}}</i>
-                  <p>{{ $t('search.'+v.label) }}</p>
+                  <i class="material-icons">{{ v.icon }}</i>
+                  <p>{{ $t("search." + v.label) }}</p>
                 </div>
               </div>
             </div>
           </template>
         </template>
         <ul v-show="results.length > 0">
-          <li v-for="(s,k) in filteredResults" :key="k">
+          <li v-for="(s, k) in filteredResults" :key="k">
             <router-link @click.native="close" :to="s.url">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
@@ -65,20 +65,20 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from "vuex"
-import url from "@/utils/url"
-import { search } from "@/api"
+import { mapState, mapGetters, mapMutations } from "vuex";
+import url from "@/utils/url";
+import { search } from "@/api";
 
 var boxes = {
   image: { label: "images", icon: "insert_photo" },
   audio: { label: "music", icon: "volume_up" },
   video: { label: "video", icon: "movie" },
-  pdf: { label: "pdf", icon: "picture_as_pdf" }
-}
+  pdf: { label: "pdf", icon: "picture_as_pdf" },
+};
 
 export default {
   name: "search",
-  data: function() {
+  data: function () {
     return {
       value: "",
       active: false,
@@ -86,111 +86,116 @@ export default {
       results: [],
       reload: false,
       resultsCount: 50,
-      scrollable: null
-    }
+      scrollable: null,
+    };
   },
   watch: {
-    show (val, old) {
-      this.active = val === "search"
+    currentPrompt(val, old) {
+      this.active = val?.prompt === "search";
 
-      if (old === "search" && !this.active) {
+      if (old?.prompt === "search" && !this.active) {
         if (this.reload) {
-          this.setReload(true)
+          this.setReload(true);
         }
 
-        document.body.style.overflow = "auto"
-        this.reset()
-        this.value = ''
-        this.active = false
-        this.$refs.input.blur()
+        document.body.style.overflow = "auto";
+        this.reset();
+        this.value = "";
+        this.active = false;
+        this.$refs.input.blur();
       } else if (this.active) {
-        this.reload = false
-        this.$refs.input.focus()
-        document.body.style.overflow = "hidden"
+        this.reload = false;
+        this.$refs.input.focus();
+        document.body.style.overflow = "hidden";
       }
     },
-    value () {
+    value() {
       if (this.results.length) {
-        this.reset()
+        this.reset();
       }
-    }
+    },
   },
   computed: {
-    ...mapState(["user", "show"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(["user"]),
+    ...mapGetters(["isListing", "currentPrompt"]),
     boxes() {
-      return boxes
+      return boxes;
     },
     isEmpty() {
-      return this.results.length === 0
+      return this.results.length === 0;
     },
     text() {
       if (this.ongoing) {
-        return ""
+        return "";
       }
 
-      return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
+      return this.value === ""
+        ? this.$t("search.typeToSearch")
+        : this.$t("search.pressToSearch");
+    },
+    filteredResults() {
+      return this.results.slice(0, this.resultsCount);
     },
-    filteredResults () {
-      return this.results.slice(0, this.resultsCount)
-    }
   },
   mounted() {
-    this.$refs.result.addEventListener('scroll', event => {
-      if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
-        this.resultsCount += 50
+    this.$refs.result.addEventListener("scroll", (event) => {
+      if (
+        event.target.offsetHeight + event.target.scrollTop >=
+        event.target.scrollHeight - 100
+      ) {
+        this.resultsCount += 50;
       }
-    })
+    });
   },
   methods: {
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
     open() {
-      this.showHover("search")
+      this.showHover("search");
     },
     close(event) {
-      event.stopPropagation()
-      event.preventDefault()
-      this.closeHovers()
+      event.stopPropagation();
+      event.preventDefault();
+      this.closeHovers();
     },
     keyup(event) {
       if (event.keyCode === 27) {
-        this.close(event)
-        return
+        this.close(event);
+        return;
       }
 
-      this.results.length = 0
+      this.results.length = 0;
     },
-    init (string) {
-      this.value = `${string} `
-      this.$refs.input.focus()
+    init(string) {
+      this.value = `${string} `;
+      this.$refs.input.focus();
     },
-    reset () {
-      this.ongoing = false
-      this.resultsCount = 50
-      this.results = []
+    reset() {
+      this.ongoing = false;
+      this.resultsCount = 50;
+      this.results = [];
     },
     async submit(event) {
-      event.preventDefault()
+      event.preventDefault();
 
-      if (this.value === '') {
-        return
+      if (this.value === "") {
+        return;
       }
 
-      let path = this.$route.path
+      let path = this.$route.path;
       if (!this.isListing) {
-        path = url.removeLastDir(path) + "/"
+        path = url.removeLastDir(path) + "/";
       }
 
-      this.ongoing = true
+      this.ongoing = true;
 
       try {
-        this.results = await search(path, this.value)
+        this.results = await search(path, this.value);
       } catch (error) {
-        this.$showError(error)
+        this.$showError(error);
       }
 
-      this.ongoing = false
-    }
-  }
-}
+      this.ongoing = false;
+    },
+  },
+};
 </script>

frontend/src/components/Shell.vue

@@ -1,115 +1,191 @@
 <template>
-  <div @click="focus" class="shell" ref="scrollable" :class="{ ['shell--hidden']: !showShell}">
-    <div v-for="(c, index) in content" :key="index" class="shell__result" >
-      <div class="shell__prompt"><i class="material-icons">chevron_right</i></div>
-      <pre class="shell__text">{{ c.text }}</pre>
-    </div>
+  <div
+    class="shell"
+    :class="{ ['shell--hidden']: !showShell }"
+    :style="{ height: `${this.shellHeight}em` }"
+  >
+    <div
+      @pointerdown="startDrag()"
+      @pointerup="stopDrag()"
+      class="shell__divider"
+      :style="this.shellDrag ? { background: `${checkTheme()}` } : ''"
+    ></div>
+    <div @click="focus" class="shell__content" ref="scrollable">
+      <div v-for="(c, index) in content" :key="index" class="shell__result">
+        <div class="shell__prompt">
+          <i class="material-icons">chevron_right</i>
+        </div>
+        <pre class="shell__text">{{ c.text }}</pre>
+      </div>
 
-    <div class="shell__result" :class="{ 'shell__result--hidden': !canInput }" >
-      <div class="shell__prompt"><i class="material-icons">chevron_right</i></div>
-      <pre
-        tabindex="0"
-        ref="input"
-        class="shell__text"
-        contenteditable="true"
-        @keydown.prevent.38="historyUp"
-        @keydown.prevent.40="historyDown"
-        @keypress.prevent.enter="submit" />
+      <div
+        class="shell__result"
+        :class="{ 'shell__result--hidden': !canInput }"
+      >
+        <div class="shell__prompt">
+          <i class="material-icons">chevron_right</i>
+        </div>
+        <pre
+          tabindex="0"
+          ref="input"
+          class="shell__text"
+          contenteditable="true"
+          @keydown.prevent.38="historyUp"
+          @keydown.prevent.40="historyDown"
+          @keypress.prevent.enter="submit"
+        />
+      </div>
     </div>
+    <div
+      @pointerup="stopDrag()"
+      class="shell__overlay"
+      v-show="this.shellDrag"
+    ></div>
   </div>
 </template>
 
 <script>
-import { mapMutations, mapState, mapGetters } from 'vuex'
-import { commands } from '@/api'
+import { mapMutations, mapState, mapGetters } from "vuex";
+import { commands } from "@/api";
+import { throttle } from "lodash";
+import { theme } from "@/utils/constants";
 
 export default {
-  name: 'shell',
+  name: "shell",
   computed: {
-    ...mapState([ 'user', 'showShell' ]),
-    ...mapGetters([ 'isFiles', 'isLogged' ]),
+    ...mapState(["user", "showShell"]),
+    ...mapGetters(["isFiles", "isLogged"]),
     path: function () {
       if (this.isFiles) {
-        return this.$route.path
+        return this.$route.path;
       }
 
-      return ''
-    }
+      return "";
+    },
   },
   data: () => ({
     content: [],
     history: [],
     historyPos: 0,
-    canInput: true
+    canInput: true,
+    shellDrag: false,
+    shellHeight: 25,
+    fontsize: parseFloat(getComputedStyle(document.documentElement).fontSize),
   }),
+  mounted() {
+    window.addEventListener("resize", this.resize);
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.resize);
+  },
   methods: {
-    ...mapMutations([ 'toggleShell' ]),
+    ...mapMutations(["toggleShell"]),
+    checkTheme() {
+      if (theme == "dark") {
+        return "rgba(255, 255, 255, 0.4)";
+      }
+      return "rgba(127, 127, 127, 0.4)";
+    },
+    startDrag() {
+      document.addEventListener("pointermove", this.handleDrag);
+      this.shellDrag = true;
+    },
+    stopDrag() {
+      document.removeEventListener("pointermove", this.handleDrag);
+      this.shellDrag = false;
+    },
+    handleDrag: throttle(function (event) {
+      const top = window.innerHeight / this.fontsize - 4;
+      const userPos = (window.innerHeight - event.clientY) / this.fontsize;
+      const bottom =
+        2.25 +
+        document.querySelector(".shell__divider").offsetHeight / this.fontsize;
+
+      if (userPos <= top && userPos >= bottom) {
+        this.shellHeight = userPos.toFixed(2);
+      }
+    }, 32),
+    resize: throttle(function () {
+      const top = window.innerHeight / this.fontsize - 4;
+      const bottom =
+        2.25 +
+        document.querySelector(".shell__divider").offsetHeight / this.fontsize;
+
+      if (this.shellHeight > top) {
+        this.shellHeight = top;
+      } else if (this.shellHeight < bottom) {
+        this.shellHeight = bottom;
+      }
+    }, 32),
     scroll: function () {
-      this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight
+      this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight;
     },
     focus: function () {
-      this.$refs.input.focus()
+      this.$refs.input.focus();
     },
-    historyUp () {
+    historyUp() {
       if (this.historyPos > 0) {
-        this.$refs.input.innerText = this.history[--this.historyPos]
-        this.focus()
+        this.$refs.input.innerText = this.history[--this.historyPos];
+        this.focus();
       }
     },
-    historyDown () {
+    historyDown() {
       if (this.historyPos >= 0 && this.historyPos < this.history.length - 1) {
-        this.$refs.input.innerText = this.history[++this.historyPos]
-        this.focus()
+        this.$refs.input.innerText = this.history[++this.historyPos];
+        this.focus();
       } else {
-        this.historyPos = this.history.length
-        this.$refs.input.innerText = ''
+        this.historyPos = this.history.length;
+        this.$refs.input.innerText = "";
       }
     },
     submit: function (event) {
-      const cmd = event.target.innerText.trim()
+      const cmd = event.target.innerText.trim();
 
-      if (cmd === '') {
-        return
+      if (cmd === "") {
+        return;
       }
 
-      if (cmd === 'clear') {
-        this.content = []
-        event.target.innerHTML = ''
-        return
+      if (cmd === "clear") {
+        this.content = [];
+        event.target.innerHTML = "";
+        return;
       }
 
-      if (cmd === 'exit') {
-        event.target.innerHTML = ''
-        this.toggleShell()
-        return
+      if (cmd === "exit") {
+        event.target.innerHTML = "";
+        this.toggleShell();
+        return;
       }
 
-      this.canInput = false
-      event.target.innerHTML = ''
+      this.canInput = false;
+      event.target.innerHTML = "";
 
       let results = {
-        text: `${cmd}\n\n`
-      }
-      
-      this.history.push(cmd)
-      this.historyPos = this.history.length
-      this.content.push(results)
+        text: `${cmd}\n\n`,
+      };
+
+      this.history.push(cmd);
+      this.historyPos = this.history.length;
+      this.content.push(results);
 
       commands(
         this.path,
         cmd,
-        event => {
-          results.text += `${event.data}\n`
-          this.scroll()
+        (event) => {
+          results.text += `${event.data}\n`;
+          this.scroll();
         },
         () => {
-          results.text = results.text.trimEnd()
-          this.canInput = true
-          this.$refs.input.focus()
-          this.scroll()
+          results.text = results.text
+            // eslint-disable-next-line no-control-regex
+            .replace(/\u001b\[[0-9;]+m/g, "") // Filter ANSI color for now
+            .trimEnd();
+          this.canInput = true;
+          this.$refs.input.focus();
+          this.scroll();
         }
-      )
-    }
-  }
-}
+      );
+    },
+  },
+};
 </script>

frontend/src/components/Sidebar.vue

@@ -1,82 +1,189 @@
 <template>
-  <nav :class="{active}">
+  <nav :class="{ active }">
     <template v-if="isLogged">
-      <router-link class="action" to="/files/" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
+      <button
+        class="action"
+        @click="toRoot"
+        :aria-label="$t('sidebar.myFiles')"
+        :title="$t('sidebar.myFiles')"
+      >
         <i class="material-icons">folder</i>
-        <span>{{ $t('sidebar.myFiles') }}</span>
-      </router-link>
+        <span>{{ $t("sidebar.myFiles") }}</span>
+      </button>
 
       <div v-if="user.perm.create">
-        <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')" :title="$t('sidebar.newFolder')">
+        <button
+          @click="$store.commit('showHover', 'newDir')"
+          class="action"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+        >
           <i class="material-icons">create_new_folder</i>
-          <span>{{ $t('sidebar.newFolder') }}</span>
+          <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
 
-        <button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')" :title="$t('sidebar.newFile')">
+        <button
+          @click="$store.commit('showHover', 'newFile')"
+          class="action"
+          :aria-label="$t('sidebar.newFile')"
+          :title="$t('sidebar.newFile')"
+        >
           <i class="material-icons">note_add</i>
-          <span>{{ $t('sidebar.newFile') }}</span>
+          <span>{{ $t("sidebar.newFile") }}</span>
         </button>
       </div>
 
       <div>
-        <router-link class="action" to="/settings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
+        <button
+          class="action"
+          @click="toSettings"
+          :aria-label="$t('sidebar.settings')"
+          :title="$t('sidebar.settings')"
+        >
           <i class="material-icons">settings_applications</i>
-          <span>{{ $t('sidebar.settings') }}</span>
-        </router-link>
+          <span>{{ $t("sidebar.settings") }}</span>
+        </button>
 
-        <button v-if="authMethod == 'json'" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')" :title="$t('sidebar.logout')">
+        <button
+          v-if="canLogout"
+          @click="logout"
+          class="action"
+          id="logout"
+          :aria-label="$t('sidebar.logout')"
+          :title="$t('sidebar.logout')"
+        >
           <i class="material-icons">exit_to_app</i>
-          <span>{{ $t('sidebar.logout') }}</span>
+          <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
     </template>
     <template v-else>
-      <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
+      <router-link
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.login')"
+        :title="$t('sidebar.login')"
+      >
         <i class="material-icons">exit_to_app</i>
-        <span>{{ $t('sidebar.login') }}</span>
+        <span>{{ $t("sidebar.login") }}</span>
       </router-link>
 
-      <router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')" :title="$t('sidebar.signup')">
+      <router-link
+        v-if="signup"
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.signup')"
+        :title="$t('sidebar.signup')"
+      >
         <i class="material-icons">person_add</i>
-        <span>{{ $t('sidebar.signup') }}</span>
+        <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
     </template>
 
+    <div
+      class="credits"
+      v-if="
+        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
+      "
+      style="width: 90%; margin: 2em 2.5em 3em 2.5em"
+    >
+      <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
+      <br />
+      {{ usage.used }} of {{ usage.total }} used
+    </div>
+
     <p class="credits">
       <span>
         <span v-if="disableExternal">File Browser</span>
-        <a v-else rel="noopener noreferrer" target="_blank" href="https://github.com/filebrowser/filebrowser">File Browser</a>
+        <a
+          v-else
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://github.com/filebrowser/filebrowser"
+          >File Browser</a
+        >
         <span> {{ version }}</span>
       </span>
-      <span><a @click="help">{{ $t('sidebar.help') }}</a></span>
+      <span>
+        <a @click="help">{{ $t("sidebar.help") }}</a>
+      </span>
     </p>
   </nav>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import * as auth from '@/utils/auth'
-import { version, signup, disableExternal, noAuth, authMethod } from '@/utils/constants'
+import { mapState, mapGetters } from "vuex";
+import * as auth from "@/utils/auth";
+import {
+  version,
+  signup,
+  disableExternal,
+  disableUsedPercentage,
+  noAuth,
+  loginPage,
+} from "@/utils/constants";
+import { files as api } from "@/api";
+import ProgressBar from "vue-simple-progress";
+import prettyBytes from "pretty-bytes";
 
 export default {
-  name: 'sidebar',
+  name: "sidebar",
+  components: {
+    ProgressBar,
+  },
   computed: {
-    ...mapState([ 'user' ]),
-    ...mapGetters([ 'isLogged' ]),
-    active () {
-      return this.$store.state.show === 'sidebar'
+    ...mapState(["user"]),
+    ...mapGetters(["isLogged", "currentPrompt"]),
+    active() {
+      return this.currentPrompt?.prompt === "sidebar";
     },
     signup: () => signup,
     version: () => version,
     disableExternal: () => disableExternal,
-    noAuth: () => noAuth,
-    authMethod: () => authMethod
+    disableUsedPercentage: () => disableUsedPercentage,
+    canLogout: () => !noAuth && loginPage,
+  },
+  asyncComputed: {
+    usage: {
+      async get() {
+        let path = this.$route.path.endsWith("/")
+          ? this.$route.path
+          : this.$route.path + "/";
+        let usageStats = { used: 0, total: 0, usedPercentage: 0 };
+        if (this.disableUsedPercentage) {
+          return usageStats;
+        }
+        try {
+          let usage = await api.usage(path);
+          usageStats = {
+            used: prettyBytes(usage.used, { binary: true }),
+            total: prettyBytes(usage.total, { binary: true }),
+            usedPercentage: Math.round((usage.used / usage.total) * 100),
+          };
+        } catch (error) {
+          this.$showError(error);
+        }
+        return usageStats;
+      },
+      default: { used: "0 B", total: "0 B", usedPercentage: 0 },
+      shouldUpdate() {
+        return this.$router.currentRoute.path.includes("/files/");
+      },
+    },
   },
   methods: {
-    help () {
-      this.$store.commit('showHover', 'help')
+    toRoot() {
+      this.$router.push({ path: "/files/" }, () => {});
+      this.$store.commit("closeHovers");
     },
-    logout: auth.logout
-  }
-}
+    toSettings() {
+      this.$router.push({ path: "/settings" }, () => {});
+      this.$store.commit("closeHovers");
+    },
+    help() {
+      this.$store.commit("showHover", "help");
+    },
+    logout: auth.logout,
+  },
+};
 </script>

frontend/src/components/buttons/Copy.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.copy')" :title="$t('buttons.copy')" class="action" id="copy-button">
-    <i class="material-icons">content_copy</i>
-    <span>{{ $t('buttons.copyFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'copy-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'copy')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Delete.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')" class="action" id="delete-button">
-    <i class="material-icons">delete</i>
-    <span>{{ $t('buttons.delete') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'delete-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'delete')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Download.vue

@@ -1,35 +0,0 @@
-<template>
-  <button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
-    <i class="material-icons">file_download</i>
-    <span>{{ $t('buttons.download') }}</span>
-    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
-  </button>
-</template>
-
-<script>
-import {mapGetters, mapState} from 'vuex'
-import { files as api } from '@/api'
-
-export default {
-  name: 'download-button',
-  computed: {
-    ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount', 'isSharing'])
-  },
-  methods: {
-    download: function () {
-      if (!this.isListing && !this.isSharing) {
-        api.download(null, this.$route.path)
-        return
-      }
-
-      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
-        api.download(null, this.req.items[this.selected[0]].url)
-        return
-      }
-
-      this.$store.commit('showHover', 'download')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Info.vue

@@ -1,17 +0,0 @@
-<template>
-  <button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="show">
-    <i class="material-icons">info</i>
-    <span>{{ $t('buttons.info') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'info-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'info')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Move.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.move')" :title="$t('buttons.move')" class="action" id="move-button">
-    <i class="material-icons">forward</i>
-    <span>{{ $t('buttons.moveFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'move-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'move')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/PreviewSize.vue

@@ -1,22 +0,0 @@
-<template>
-  <button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="$emit('change-size')">
-    <i class="material-icons">{{ this.icon }}</i>
-    <span>{{ $t('buttons.info') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'preview-size-button',
-  props: [ 'size' ],
-  computed: {
-    icon () {
-      if (this.size) {
-        return 'photo_size_select_large'
-      }
-
-      return 'hd'
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Rename.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.rename')" :title="$t('buttons.rename')" class="action" id="rename-button">
-    <i class="material-icons">mode_edit</i>
-    <span>{{ $t('buttons.rename') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'rename-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'rename')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Share.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.share')" :title="$t('buttons.share')" class="action">
-    <i class="material-icons">share</i>
-    <span>{{ $t('buttons.share') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'share-button',
-  methods: {
-    show () {
-      this.$store.commit('showHover', 'share')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Shell.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.shell')" :title="$t('buttons.shell')" class="action">
-    <i class="material-icons">code</i>
-    <span>{{ $t('buttons.shell') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'shell-button',
-  methods: {
-    show: function () {
-      this.$store.commit('toggleShell')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/SwitchView.vue

@@ -1,40 +0,0 @@
-<template>
-  <button @click="change" :aria-label="$t('buttons.switchView')" :title="$t('buttons.switchView')" class="action" id="switch-view-button">
-    <i class="material-icons">{{ icon }}</i>
-    <span>{{ $t('buttons.switchView') }}</span>
-  </button>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import { users as api } from '@/api'
-
-export default {
-  name: 'switch-button',
-  computed: {
-    ...mapState(['user']),
-    icon: function () {
-      if (this.user.viewMode === 'mosaic') return 'view_list'
-      return 'view_module'
-    }
-  },
-  methods: {
-    ...mapMutations([ 'updateUser', 'closeHovers' ]),
-    change: async function () {
-      this.closeHovers()
-
-      const data = {
-        id: this.user.id,
-        viewMode: (this.icon === 'view_list') ? 'list' : 'mosaic'
-      }
-
-      try {
-        await api.update(data, ['viewMode'])
-        this.updateUser(data)
-      } catch (e) {
-        this.$showError(e)
-      }
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Upload.vue

@@ -1,21 +0,0 @@
-<template>
-  <button @click="upload" :aria-label="$t('buttons.upload')" :title="$t('buttons.upload')" class="action" id="upload-button">
-    <i class="material-icons">file_upload</i>
-    <span>{{ $t('buttons.upload') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'upload-button',
-  methods: {
-    upload: function () {
-      if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
-        this.$store.commit('showHover', 'upload')
-      } else {
-        document.getElementById('upload-input').click();
-      }
-    }
-  }
-}
-</script>

frontend/src/components/files/Editor.vue

@@ -1,132 +0,0 @@
-<template>
-  <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'
-import 'ace-builds/webpack-resolver'
-import { theme } from '@/utils/constants'
-
-export default {
-  name: 'editor',
-  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)
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.keyEvent)
-    this.editor.destroy();
-  },
-  mounted: function () {    
-    const fileContent = this.req.content || '';
-
-    this.editor = ace.edit('editor', {
-      value: fileContent,
-      showPrintMargin: false,
-      readOnly: this.req.type === 'textImmutable',
-      theme: 'ace/theme/chrome',
-      mode: modelist.getModeForPath(this.req.name).mode,
-      wrap: true
-    })
-
-    if (theme == 'dark') {
-      this.editor.setTheme("ace/theme/twilight");
-    }
-  },
-  methods: {
-    back () {
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
-    keyEvent (event) {
-      if (!event.ctrlKey && !event.metaKey) {
-        return
-      }
-
-      if (String.fromCharCode(event.which).toLowerCase() !== 's') {
-        return
-      }
-
-      event.preventDefault()
-      this.save()
-    },
-    async save () {
-      const button = 'save'
-      buttons.loading('save')
-
-      try {
-        await api.put(this.$route.path, this.editor.getValue())
-        buttons.success(button)
-      } catch (e) {
-        buttons.done(button)
-        this.$showError(e)
-      }
-    }
-  }
-}
-</script>

frontend/src/components/files/ExtendedImage.vue

@@ -10,40 +10,28 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img src="" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
+    <img class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad" />
   </div>
 </template>
 <script>
-import throttle from 'lodash.throttle'
-import UTIF from 'utif'
+import throttle from "lodash.throttle";
+import UTIF from "utif";
 
 export default {
   props: {
     src: String,
     moveDisabledTime: {
       type: Number,
-      default: () => 200
-    },
-    maxScale: {
-      type: Number,
-      default: () => 4
-    },
-    minScale: {
-      type: Number,
-      default: () => 0.25
+      default: () => 200,
     },
     classList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     zoomStep: {
       type: Number,
-      default: () => 0.25
+      default: () => 0.25,
     },
-    autofill: {
-      type: Boolean,
-      default: () => false
-    }
   },
   data() {
     return {
@@ -51,210 +39,236 @@ export default {
       lastX: null,
       lastY: null,
       inDrag: false,
+      touches: 0,
       lastTouchDistance: 0,
       moveDisabled: false,
       disabledTimer: null,
       imageLoaded: false,
       position: {
         center: { x: 0, y: 0 },
-        relative: { x: 0, y: 0 }
-      }
-    }
+        relative: { x: 0, y: 0 },
+      },
+      maxScale: 4,
+      minScale: 0.25,
+    };
   },
   mounted() {
     if (!this.decodeUTIF()) {
-      this.$refs.imgex.src = this.src
+      this.$refs.imgex.src = this.src;
     }
-    let container = this.$refs.container
-    this.classList.forEach(className => container.classList.add(className))
+    let container = this.$refs.container;
+    this.classList.forEach((className) => container.classList.add(className));
     // set width and height if they are zero
     if (getComputedStyle(container).width === "0px") {
-      container.style.width = "100%"
+      container.style.width = "100%";
     }
     if (getComputedStyle(container).height === "0px") {
-      container.style.height = "100%"
+      container.style.height = "100%";
     }
 
-    window.addEventListener('resize', this.onResize)
+    window.addEventListener("resize", this.onResize);
   },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.onResize)
-    document.removeEventListener('mouseup', this.onMouseUp)
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+    document.removeEventListener("mouseup", this.onMouseUp);
   },
   watch: {
     src: function () {
-      this.scale = 1
-      this.setZoom()
-      this.setCenter()
-    }
+      if (!this.decodeUTIF()) {
+        this.$refs.imgex.src = this.src;
+      }
+
+      this.scale = 1;
+      this.setZoom();
+      this.setCenter();
+    },
   },
   methods: {
     // Modified from UTIF.replaceIMG
     decodeUTIF() {
-      const sufs = ["tif", "tiff", "dng", "cr2", "nef"]
-      let suff = document.location.pathname.split(".").pop().toLowerCase()
-      if (sufs.indexOf(suff) == -1) return false
-      let xhr = new XMLHttpRequest()
-      UTIF._xhrs.push(xhr)
-      UTIF._imgs.push(this.$refs.imgex)
-      xhr.open("GET", this.src)
-      xhr.responseType = "arraybuffer"
-      xhr.onload = UTIF._imgLoaded
-      xhr.send()
-      return true
+      const sufs = ["tif", "tiff", "dng", "cr2", "nef"];
+      let suff = document.location.pathname.split(".").pop().toLowerCase();
+      if (sufs.indexOf(suff) == -1) return false;
+      let xhr = new XMLHttpRequest();
+      UTIF._xhrs.push(xhr);
+      UTIF._imgs.push(this.$refs.imgex);
+      xhr.open("GET", this.src);
+      xhr.responseType = "arraybuffer";
+      xhr.onload = UTIF._imgLoaded;
+      xhr.send();
+      return true;
     },
     onLoad() {
-      let img = this.$refs.imgex
+      let img = this.$refs.imgex;
 
-      this.imageLoaded = true
+      this.imageLoaded = true;
 
       if (img === undefined) {
-        return
+        return;
       }
 
-      img.classList.remove('image-ex-img-center')
-      this.setCenter()
-      img.classList.add('image-ex-img-ready')
+      img.classList.remove("image-ex-img-center");
+      this.setCenter();
+      img.classList.add("image-ex-img-ready");
 
-      document.addEventListener('mouseup', this.onMouseUp)
+      document.addEventListener("mouseup", this.onMouseUp);
+
+      let realSize = img.naturalWidth;
+      let displaySize = img.offsetWidth;
+
+      // Image is in portrait orientation
+      if (img.naturalHeight > img.naturalWidth) {
+        realSize = img.naturalHeight;
+        displaySize = img.offsetHeight;
+      }
+
+      // Scale needed to display the image on full size
+      const fullScale = realSize / displaySize;
+
+      // Full size plus additional zoom
+      this.maxScale = fullScale + 4;
     },
     onMouseUp() {
-      this.inDrag = false
+      this.inDrag = false;
     },
-    onResize: throttle(function() {
+    onResize: throttle(function () {
       if (this.imageLoaded) {
-        this.setCenter()
-        this.doMove(this.position.relative.x, this.position.relative.y)
+        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 container = this.$refs.container;
+      let img = this.$refs.imgex;
 
-      this.position.center.x = Math.floor((container.clientWidth - img.clientWidth) / 2)
-      this.position.center.y = Math.floor((container.clientHeight - img.clientHeight) / 2)
+      this.position.center.x = Math.floor(
+        (container.clientWidth - img.clientWidth) / 2
+      );
+      this.position.center.y = Math.floor(
+        (container.clientHeight - img.clientHeight) / 2
+      );
 
-      img.style.left = this.position.center.x + 'px'
-      img.style.top = this.position.center.y + 'px'
+      img.style.left = this.position.center.x + "px";
+      img.style.top = this.position.center.y + "px";
     },
     mousedownStart(event) {
-      this.lastX = null
-      this.lastY = null
-      this.inDrag = true
-      event.preventDefault()
+      this.lastX = null;
+      this.lastY = null;
+      this.inDrag = true;
+      event.preventDefault();
     },
     mouseMove(event) {
-      if (!this.inDrag) return
-      this.doMove(event.movementX, event.movementY)
-      event.preventDefault()
+      if (!this.inDrag) return;
+      this.doMove(event.movementX, event.movementY);
+      event.preventDefault();
     },
     mouseUp(event) {
-      this.inDrag = false
-      event.preventDefault()
+      this.inDrag = false;
+      event.preventDefault();
     },
     touchStart(event) {
-      this.lastX = null
-      this.lastY = null
-      this.lastTouchDistance = null
+      this.lastX = null;
+      this.lastY = null;
+      this.lastTouchDistance = null;
       if (event.targetTouches.length < 2) {
         setTimeout(() => {
-          this.touches = 0
-        }, 300)
-        this.touches++
+          this.touches = 0;
+        }, 300);
+        this.touches++;
         if (this.touches > 1) {
-          this.zoomAuto(event)
+          this.zoomAuto(event);
         }
-      }    
-      event.preventDefault()
+      }
+      event.preventDefault();
     },
     zoomAuto(event) {
       switch (this.scale) {
         case 1:
-          this.scale = 2
-          break
+          this.scale = 2;
+          break;
         case 2:
-          this.scale = 4
-          break
+          this.scale = 4;
+          break;
         default:
         case 4:
-          this.scale = 1
-          this.setCenter()
-          break
+          this.scale = 1;
+          this.setCenter();
+          break;
       }
-      this.setZoom()
-      event.preventDefault()
+      this.setZoom();
+      event.preventDefault();
     },
     touchMove(event) {
-      event.preventDefault()
+      event.preventDefault();
       if (this.lastX === null) {
-        this.lastX = event.targetTouches[0].pageX
-        this.lastY = event.targetTouches[0].pageY
-        return
+        this.lastX = event.targetTouches[0].pageX;
+        this.lastY = event.targetTouches[0].pageY;
+        return;
       }
-      let step = this.$refs.imgex.width / 5
+      let step = this.$refs.imgex.width / 5;
       if (event.targetTouches.length === 2) {
-        this.moveDisabled = true
-        clearTimeout(this.disabledTimer)
+        this.moveDisabled = true;
+        clearTimeout(this.disabledTimer);
         this.disabledTimer = setTimeout(
           () => (this.moveDisabled = false),
           this.moveDisabledTime
-        )
+        );
 
-        let p1 = event.targetTouches[0]
-        let p2 = event.targetTouches[1]
+        let p1 = event.targetTouches[0];
+        let p2 = event.targetTouches[1];
         let touchDistance = Math.sqrt(
           Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)
-        )
+        );
         if (!this.lastTouchDistance) {
-          this.lastTouchDistance = touchDistance
-          return
+          this.lastTouchDistance = touchDistance;
+          return;
         }
-        this.scale += (touchDistance - this.lastTouchDistance) / step
-        this.lastTouchDistance = touchDistance
-        this.setZoom()
+        this.scale += (touchDistance - this.lastTouchDistance) / step;
+        this.lastTouchDistance = touchDistance;
+        this.setZoom();
       } else if (event.targetTouches.length === 1) {
-        if (this.moveDisabled) return
-        let x = event.targetTouches[0].pageX - this.lastX
-        let y = event.targetTouches[0].pageY - this.lastY
-        if (Math.abs(x) >= step && Math.abs(y) >= step) return
-        this.lastX = event.targetTouches[0].pageX
-        this.lastY = event.targetTouches[0].pageY
-        this.doMove(x, y)
+        if (this.moveDisabled) return;
+        let x = event.targetTouches[0].pageX - this.lastX;
+        let y = event.targetTouches[0].pageY - this.lastY;
+        if (Math.abs(x) >= step && Math.abs(y) >= step) return;
+        this.lastX = event.targetTouches[0].pageX;
+        this.lastY = event.targetTouches[0].pageY;
+        this.doMove(x, y);
       }
     },
     doMove(x, y) {
-      let style = this.$refs.imgex.style
-      let posX = this.pxStringToNumber(style.left) + x
-      let posY = this.pxStringToNumber(style.top) + y
+      let style = this.$refs.imgex.style;
+      let posX = this.pxStringToNumber(style.left) + x;
+      let posY = this.pxStringToNumber(style.top) + y;
 
-      style.left = posX + 'px'
-      style.top = posY + 'px'
+      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)
+      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
+        this.position.relative.x = this.position.relative.x * -1;
       }
 
       if (posY < this.position.center.y) {
-        this.position.relative.y = this.position.relative.y * -1
+        this.position.relative.y = this.position.relative.y * -1;
       }
     },
     wheelMove(event) {
-      this.scale += (event.wheelDeltaY / 100) * this.zoomStep
-      this.setZoom()
+      this.scale += -Math.sign(event.deltaY) * this.zoomStep;
+      this.setZoom();
     },
     setZoom() {
-      this.scale = this.scale < this.minScale ? this.minScale : this.scale
-      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale
-      this.$refs.imgex.style.transform = `scale(${this.scale})`
+      this.scale = this.scale < this.minScale ? this.minScale : this.scale;
+      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale;
+      this.$refs.imgex.style.transform = `scale(${this.scale})`;
     },
     pxStringToNumber(style) {
-      return +style.replace("px", "")
-    }
-  }
-}
+      return +style.replace("px", "");
+    },
+  },
+};
 </script>
 <style>
 .image-ex-container {

frontend/src/components/files/Listing.vue

@@ -1,464 +0,0 @@
-<template>
-  <div v-if="(req.numDirs + req.numFiles) == 0">
-    <h2 class="message">
-      <i class="material-icons">sentiment_dissatisfied</i>
-      <span>{{ $t('files.lonely') }}</span>
-    </h2>
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-  </div>
-  <div v-else id="listing"
-    :class="user.viewMode">
-    <div>
-      <div class="item header">
-        <div></div>
-        <div>
-          <p :class="{ active: nameSorted }" class="name"
-            role="button"
-            tabindex="0"
-            @click="sort('name')"
-            :title="$t('files.sortByName')"
-            :aria-label="$t('files.sortByName')">
-            <span>{{ $t('files.name') }}</span>
-            <i class="material-icons">{{ nameIcon }}</i>
-          </p>
-
-          <p :class="{ active: sizeSorted }" class="size"
-            role="button"
-            tabindex="0"
-            @click="sort('size')"
-            :title="$t('files.sortBySize')"
-            :aria-label="$t('files.sortBySize')">
-            <span>{{ $t('files.size') }}</span>
-            <i class="material-icons">{{ sizeIcon }}</i>
-          </p>
-          <p :class="{ active: modifiedSorted }" class="modified"
-            role="button"
-            tabindex="0"
-            @click="sort('modified')"
-            :title="$t('files.sortByLastModified')"
-            :aria-label="$t('files.sortByLastModified')">
-            <span>{{ $t('files.lastModified') }}</span>
-            <i class="material-icons">{{ modifiedIcon }}</i>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
-    <div v-if="req.numDirs > 0">
-      <item v-for="(item) in dirs"
-        :key="base64(item.name)"
-        v-bind:index="item.index"
-        v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
-        v-bind:modified="item.modified"
-        v-bind:type="item.type"
-        v-bind:size="item.size">
-      </item>
-    </div>
-
-    <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
-    <div v-if="req.numFiles > 0">
-      <item v-for="(item) in files"
-        :key="base64(item.name)"
-        v-bind:index="item.index"
-        v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
-        v-bind:modified="item.modified"
-        v-bind:type="item.type"
-        v-bind:size="item.size">
-      </item>
-    </div>
-
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-
-    <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-    <p>{{ $t('files.multipleSelectionEnabled') }}</p>
-      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
-        <i class="material-icons">clear</i>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import Item from './ListingItem'
-import css from '@/utils/css'
-import { users, files as api } from '@/api'
-import * as upload  from '@/utils/upload'
-
-export default {
-  name: 'listing',
-  components: { Item },
-  data: function () {
-    return {
-      showLimit: 50,
-      dragCounter: 0
-    }
-  },
-  computed: {
-    ...mapState(['req', 'selected', 'user', 'show']),
-    nameSorted () {
-      return (this.req.sorting.by === 'name')
-    },
-    sizeSorted () {
-      return (this.req.sorting.by === 'size')
-    },
-    modifiedSorted () {
-      return (this.req.sorting.by === 'modified')
-    },
-    ascOrdered () {
-      return this.req.sorting.asc
-    },
-    items () {
-      const dirs = []
-      const files = []
-
-      this.req.items.forEach((item) => {
-        if (item.isDir) {
-          dirs.push(item)
-        } else {
-          files.push(item)
-        }
-      })
-
-      return { dirs, files }
-    },
-    dirs () {
-      return this.items.dirs.slice(0, this.showLimit)
-    },
-    files () {
-      let showLimit = this.showLimit - this.items.dirs.length
-
-      if (showLimit < 0) showLimit = 0
-
-      return this.items.files.slice(0, showLimit)
-    },
-    nameIcon () {
-      if (this.nameSorted && !this.ascOrdered) {
-        return 'arrow_upward'
-      }
-
-      return 'arrow_downward'
-    },
-    sizeIcon () {
-      if (this.sizeSorted && this.ascOrdered) {
-        return 'arrow_downward'
-      }
-
-      return 'arrow_upward'
-    },
-    modifiedIcon () {
-      if (this.modifiedSorted && this.ascOrdered) {
-        return 'arrow_downward'
-      }
-
-      return 'arrow_upward'
-    }
-  },
-  mounted: function () {
-    // Check the columns size for the first time.
-    this.resizeEvent()
-
-    // Add the needed event listeners to the window and document.
-    window.addEventListener('keydown', this.keyEvent)
-    window.addEventListener('resize', this.resizeEvent)
-    window.addEventListener('scroll', this.scrollEvent)
-    document.addEventListener('dragover', this.preventDefault)
-    document.addEventListener('dragenter', this.dragEnter)
-    document.addEventListener('dragleave', this.dragLeave)
-    document.addEventListener('drop', this.drop)
-  },
-  beforeDestroy () {
-    // Remove event listeners before destroying this page.
-    window.removeEventListener('keydown', this.keyEvent)
-    window.removeEventListener('resize', this.resizeEvent)
-    window.removeEventListener('scroll', this.scrollEvent)
-    document.removeEventListener('dragover', this.preventDefault)
-    document.removeEventListener('dragenter', this.dragEnter)
-    document.removeEventListener('dragleave', this.dragLeave)
-    document.removeEventListener('drop', this.drop)
-  },
-  methods: {
-    ...mapMutations([ 'updateUser', 'addSelected' ]),
-    base64: function (name) {
-      return window.btoa(unescape(encodeURIComponent(name)))
-    },
-    keyEvent (event) {
-      if (this.show !== null) {
-        return
-      }
-
-      if (!event.ctrlKey && !event.metaKey) {
-        return
-      }
-
-      let key = String.fromCharCode(event.which).toLowerCase()
-
-      switch (key) {
-        case 'f':
-          event.preventDefault()
-          this.$store.commit('showHover', 'search')
-          break
-        case 'c':
-        case 'x':
-          this.copyCut(event, key)
-          break
-        case 'v':
-          this.paste(event)
-          break
-        case 'a':
-          event.preventDefault()
-          for (let file of this.items.files) {
-            if (this.$store.state.selected.indexOf(file.index) === -1) {
-              this.addSelected(file.index)
-            }
-          }
-          for (let dir of this.items.dirs) {
-            if (this.$store.state.selected.indexOf(dir.index) === -1) {
-              this.addSelected(dir.index)
-            }
-          }
-          break
-      }
-    },
-    preventDefault (event) {
-      // Wrapper around prevent default.
-      event.preventDefault()
-    },
-    copyCut (event, key) {
-      if (event.target.tagName.toLowerCase() === 'input') {
-        return
-      }
-
-      let items = []
-
-      for (let i of this.selected) {
-        items.push({
-          from: this.req.items[i].url,
-          name: encodeURIComponent(this.req.items[i].name)
-        })
-      }
-
-      if (items.length == 0) {
-        return
-      }
-
-      this.$store.commit('updateClipboard', {
-        key: key,
-        items: items,
-        path: this.$route.path
-      })
-    },
-    paste (event) {
-      if (event.target.tagName.toLowerCase() === 'input') {
-        return
-      }
-
-      let items = []
-
-      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, name: item.name })
-      }
-
-      if (items.length === 0) {
-        return
-      }
-
-      let action = (overwrite, rename) => {
-        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
-      }
-
-      let conflict = upload.checkConflict(items, this.req.items)
-
-      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.
-      let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
-      let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
-      if (columns === 0) columns = 1
-      items.style.width = `calc(${100 / columns}% - 1em)`
-    },
-    scrollEvent () {
-      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
-        this.showLimit += 50
-      }
-    },
-    dragEnter () {
-      this.dragCounter++
-
-      // When the user starts dragging an item, put every
-      // file on the listing with 50% opacity.
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 0.5
-      })
-    },
-    dragLeave () {
-      this.dragCounter--
-
-      if (this.dragCounter == 0) {
-        this.resetOpacity()
-      }
-    },
-    drop: async function (event) {
-      event.preventDefault()
-      this.dragCounter = 0
-      this.resetOpacity()
-
-      let dt = event.dataTransfer
-      let el = event.target
-
-      if (dt.files.length <= 0) return
-
-      for (let i = 0; i < 5; i++) {
-        if (el !== null && !el.classList.contains('item')) {
-          el = el.parentElement
-        }
-      }
-
-      let base = ''
-      if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
-        base = el.querySelector('.name').innerHTML + '/'
-      }
-
-      let files = await upload.scanFiles(dt)
-      let path = this.$route.path.endsWith('/') ? this.$route.path + base : this.$route.path + '/' + base
-      let items = this.req.items
-
-      if (base !== '') {
-        try {
-          items = (await api.fetch(path)).items
-        } catch (error) {
-          this.$showError(error)
-        }
-      }
-
-      let conflict = upload.checkConflict(files, items)
-
-      if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace',
-          confirm: (event) => {
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            upload.handleFiles(files, path, true)
-          }
-        })
-
-        return
-      }
-
-      upload.handleFiles(files, path)
-    },
-    uploadInput (event) {
-      this.$store.commit('closeHovers')
-
-      let files = event.currentTarget.files
-      let folder_upload = files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== ''
-
-      if (folder_upload) {
-        for (let i = 0; i < files.length; i++) {
-          let file = files[i]
-          files[i].fullPath = file.webkitRelativePath
-        }
-      }
-
-      let path = this.$route.path.endsWith('/') ? this.$route.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')
-            upload.handleFiles(files, path, true)
-          }
-        })
-
-        return
-      }
-
-      upload.handleFiles(files, path)
-    },
-    resetOpacity () {
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 1
-      })
-    },
-    async sort (by) {
-      let asc = false
-
-      if (by === 'name') {
-        if (this.nameIcon === 'arrow_upward') {
-          asc = true
-        }
-      } else if (by === 'size') {
-        if (this.sizeIcon === 'arrow_upward') {
-          asc = true
-        }
-      } else if (by === 'modified') {
-        if (this.modifiedIcon === 'arrow_upward') {
-          asc = true
-        }
-      }
-
-      try {
-        await users.update({ id: this.user.id, sorting: { by, asc } }, ['sorting'])
-      } catch (e) {
-        this.$showError(e)
-      }
-
-      this.$store.commit('setReload', true)
-    }
-  }
-}
-</script>

frontend/src/components/files/ListingItem.vue

@@ -1,20 +1,24 @@
 <template>
-  <div class="item"
-  role="button"
-  tabindex="0"
-  :draggable="isDraggable"
-  @dragstart="dragStart"
-  @dragover="dragOver"
-  @drop="drop"
-  @click="itemClick"
-  @dblclick="dblclick"
-  @touchstart="touchstart"
-  :data-dir="isDir"
-  :aria-label="name"
-  :aria-selected="isSelected">
+  <div
+    class="item"
+    role="button"
+    tabindex="0"
+    :draggable="isDraggable"
+    @dragstart="dragStart"
+    @dragover="dragOver"
+    @drop="drop"
+    @click="itemClick"
+    :data-dir="isDir"
+    :data-type="type"
+    :aria-label="name"
+    :aria-selected="isSelected"
+  >
     <div>
-      <img v-if="type==='image' && isThumbsEnabled && !isSharing" v-lazy="thumbnailUrl">
-      <i v-else class="material-icons">{{ icon }}</i>
+      <img
+        v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
+        v-lazy="thumbnailUrl"
+      />
+      <i v-else class="material-icons"></i>
     </div>
 
     <div>
@@ -31,200 +35,215 @@
 </template>
 
 <script>
-import { baseURL, enableThumbs } 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'
+import { enableThumbs } from "@/utils/constants";
+import { mapMutations, mapGetters, mapState } from "vuex";
+import { filesize } from "@/utils";
+import moment from "moment";
+import { files as api } from "@/api";
+import * as upload from "@/utils/upload";
 
 export default {
-  name: 'item',
+  name: "item",
   data: function () {
     return {
-      touches: 0
-    }
+      touches: 0,
+    };
   },
-  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
+  props: [
+    "name",
+    "isDir",
+    "url",
+    "type",
+    "size",
+    "modified",
+    "index",
+    "readOnly",
+    "path",
+  ],
   computed: {
-    ...mapState(['user', 'selected', 'req', 'jwt']),
-    ...mapGetters(['selectedCount', 'isSharing']),
-    singleClick () {
-      if (this.isSharing) return false
-      return this.user.singleClick
+    ...mapState(["user", "selected", "req", "jwt"]),
+    ...mapGetters(["selectedCount"]),
+    singleClick() {
+      return this.readOnly == undefined && this.user.singleClick;
     },
-    isSelected () {
-      return (this.selected.indexOf(this.index) !== -1)
+    isSelected() {
+      return this.selected.indexOf(this.index) !== -1;
     },
-    icon () {
-      if (this.isDir) return 'folder'
-      if (this.type === 'image') return 'insert_photo'
-      if (this.type === 'audio') return 'volume_up'
-      if (this.type === 'video') return 'movie'
-      return 'insert_drive_file'
+    isDraggable() {
+      return this.readOnly == undefined && this.user.perm.rename;
     },
-    isDraggable () {
-      return !this.isSharing && this.user.perm.rename
-    },
-    canDrop () {
-      if (!this.isDir || this.isSharing) return false
+    canDrop() {
+      if (!this.isDir || this.readOnly !== undefined) return false;
 
       for (let i of this.selected) {
         if (this.req.items[i].url === this.url) {
-          return false
+          return false;
         }
       }
 
-      return true
+      return true;
     },
-    thumbnailUrl () {
-      const path = this.url.replace(/^\/files\//, '')
-      return `${baseURL}/api/preview/thumb/${path}?auth=${this.jwt}&inline=true`
+    thumbnailUrl() {
+      const file = {
+        path: this.path,
+        modified: this.modified,
+      };
+
+      return api.getPreviewURL(file, "thumb");
+    },
+    isThumbsEnabled() {
+      return enableThumbs;
     },
-    isThumbsEnabled () {
-      return enableThumbs
-    }
   },
   methods: {
-    ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
+    ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),
     humanSize: function () {
-      return filesize(this.size)
+      return this.type == "invalid_link" ? "invalid link" : filesize(this.size);
     },
     humanTime: function () {
-      return moment(this.modified).fromNow()
+      if (this.readOnly == undefined && this.user.dateFormat) {
+        return moment(this.modified).format("L LT");
+      }
+      return moment(this.modified).fromNow();
     },
     dragStart: function () {
       if (this.selectedCount === 0) {
-        this.addSelected(this.index)
-        return
+        this.addSelected(this.index);
+        return;
       }
 
       if (!this.isSelected) {
-        this.resetSelected()
-        this.addSelected(this.index)
+        this.resetSelected();
+        this.addSelected(this.index);
       }
     },
     dragOver: function (event) {
-      if (!this.canDrop) return
+      if (!this.canDrop) return;
 
-      event.preventDefault()
-      let el = event.target
+      event.preventDefault();
+      let el = event.target;
 
       for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains('item')) {
-          el = el.parentElement
+        if (!el.classList.contains("item")) {
+          el = el.parentElement;
         }
       }
 
-      el.style.opacity = 1
+      el.style.opacity = 1;
     },
     drop: async function (event) {
-      if (!this.canDrop) return
-      event.preventDefault()
+      if (!this.canDrop) return;
+      event.preventDefault();
 
-      if (this.selectedCount === 0) return
+      if (this.selectedCount === 0) return;
 
-      let el = event.target
+      let el = event.target;
       for (let i = 0; i < 5; i++) {
-        if (el !== null && !el.classList.contains('item')) {
-          el = el.parentElement
+        if (el !== null && !el.classList.contains("item")) {
+          el = el.parentElement;
         }
       }
 
-      let items = []
+      let items = [];
 
       for (let i of this.selected) {
         items.push({
           from: this.req.items[i].url,
-          to: this.url + this.req.items[i].name,
-          name: this.req.items[i].name
-        })
-      }      
+          to: this.url + encodeURIComponent(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
+      // Get url from ListingItem instance
+      let path = el.__vue__.url;
+      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, overwrite, rename)
+          .then(() => {
+            this.$store.commit("setReload", true);
+          })
+          .catch(this.$showError);
+      };
 
-      let conflict = upload.checkConflict(items, baseItems)
+      let conflict = upload.checkConflict(items, baseItems);
 
-      let overwrite = false
-      let rename = false
+      let overwrite = false;
+      let rename = false;
 
       if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
+        this.$store.commit("showHover", {
+          prompt: "replace-rename",
           confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
+            overwrite = option == "overwrite";
+            rename = option == "rename";
 
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            action(overwrite, rename);
+          },
+        });
 
-        return
+        return;
       }
 
-      action(overwrite, rename)
+      action(overwrite, rename);
     },
-    itemClick: function(event) {
-      if (this.singleClick && !this.$store.state.multiple) this.open()
-      else this.click(event)
+    itemClick: function (event) {
+      if (this.singleClick && !this.$store.state.multiple) this.open();
+      else this.click(event);
     },
     click: function (event) {
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault()
+      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
+
+      setTimeout(() => {
+        this.touches = 0;
+      }, 300);
+
+      this.touches++;
+      if (this.touches > 1) {
+        this.open();
+      }
+
       if (this.$store.state.selected.indexOf(this.index) !== -1) {
-        this.removeSelected(this.index)
-        return
+        this.removeSelected(this.index);
+        return;
       }
 
       if (event.shiftKey && this.selected.length > 0) {
-        let fi = 0
-        let la = 0
+        let fi = 0;
+        let la = 0;
 
         if (this.index > this.selected[0]) {
-          fi = this.selected[0] + 1
-          la = this.index
+          fi = this.selected[0] + 1;
+          la = this.index;
         } else {
-          fi = this.index
-          la = this.selected[0] - 1
+          fi = this.index;
+          la = this.selected[0] - 1;
         }
 
         for (; fi <= la; fi++) {
           if (this.$store.state.selected.indexOf(fi) == -1) {
-            this.addSelected(fi)
+            this.addSelected(fi);
           }
         }
 
-        return
+        return;
       }
 
-      if (!this.singleClick && !event.ctrlKey && !event.metaKey && !this.$store.state.multiple) this.resetSelected()
-      this.addSelected(this.index)
-    },
-    dblclick: function () {
-      if (!this.singleClick) this.open()
-    },
-    touchstart () {
-      setTimeout(() => {
-        this.touches = 0
-      }, 300)
-
-      this.touches++
-      if (this.touches > 1) {
-        this.open()
-      }
+      if (
+        !this.singleClick &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !this.$store.state.multiple
+      )
+        this.resetSelected();
+      this.addSelected(this.index);
     },
     open: function () {
-      this.$router.push({path: this.url})
-    }
-  }
-}
-</script>
+      this.$router.push({ path: this.url });
+    },
+  },
+};
+</script>

frontend/src/components/files/Preview.vue

@@ -1,238 +0,0 @@
-<template>
-  <div id="previewer">
-    <div class="bar">
-      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
-        <i class="material-icons">close</i>
-      </button>
-
-      <div class="title">{{ this.name }}</div>
-
-      <preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-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>
-
-      <div id="dropdown" :class="{ active : showMore }">
-        <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>
-
-    <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')">
-      <i class="material-icons">chevron_left</i>
-    </button>
-    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
-      <i class="material-icons">chevron_right</i>
-    </button>
-
-    <template v-if="!loading">
-      <div class="preview">
-        <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
-        <audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
-        <video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
-          <track
-            kind="captions"
-            v-for="(sub, index) in subtitles"
-            :key="index"
-            :src="sub"
-            :label="'Subtitle ' + index" :default="index === 0">
-          Sorry, your browser doesn't support embedded videos,
-          but don't worry, you can <a :href="download">download it</a>
-          and watch it with your favorite video player!
-        </video>
-        <object v-else-if="req.extension.toLowerCase() == '.pdf'" class="pdf" :data="raw"></object>
-        <a v-else-if="req.type == 'blob'" :href="download">
-          <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
-        </a>
-      </div>
-    </template>
-
-    <div v-show="showMore" @click="resetPrompts" class="overlay"></div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { baseURL, resizePreview } from '@/utils/constants'
-import { files as api } from '@/api'
-import PreviewSizeButton from '@/components/buttons/PreviewSize'
-import InfoButton from '@/components/buttons/Info'
-import DeleteButton from '@/components/buttons/Delete'
-import RenameButton from '@/components/buttons/Rename'
-import DownloadButton from '@/components/buttons/Download'
-import ExtendedImage from './ExtendedImage'
-
-const mediaTypes = [
-  "image",
-  "video",
-  "audio",
-  "blob"
-]
-
-export default {
-  name: 'preview',
-  components: {
-    PreviewSizeButton,
-    InfoButton,
-    DeleteButton,
-    RenameButton,
-    DownloadButton,
-    ExtendedImage
-  },
-  data: function () {
-    return {
-      previousLink: '',
-      nextLink: '',
-      listing: null,
-      name: '',
-      subtitles: [],
-      fullSize: false
-    }
-  },
-  computed: {
-    ...mapState(['req', 'user', 'oldReq', 'jwt', 'loading', 'show']),
-    hasPrevious () {
-      return (this.previousLink !== '')
-    },
-    hasNext () {
-      return (this.nextLink !== '')
-    },
-    download () {
-      return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
-    },
-    previewUrl () {
-      if (this.req.type === 'image' && !this.fullSize) {
-        return `${baseURL}/api/preview/big${url.encodePath(this.req.path)}?auth=${this.jwt}`
-      }
-      return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
-    },
-    raw () {
-      return `${this.previewUrl}&inline=true`
-    },
-    showMore () {
-      return this.$store.state.show === 'more'
-    },
-    isResizeEnabled () {
-      return resizePreview
-    }
-  },
-  watch: {
-    $route: function () {
-      this.updatePreview()
-    }
-  },
-  async mounted () {
-    window.addEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', true)
-    this.listing = this.oldReq.items
-    this.$root.$on('preview-deleted', this.deleted)
-    this.updatePreview()
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', false)
-    this.$root.$off('preview-deleted', this.deleted)
-  },
-  methods: {
-    deleted () {
-      this.listing = this.listing.filter(item => item.name !== this.name)
-
-      if (this.hasNext) {
-        this.next()
-      } else if (!this.hasPrevious && !this.hasNext) {
-        this.back()
-      } else {
-        this.prev()
-      }
-    },
-    back () {
-      this.$store.commit('setPreviewMode', false)
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
-    prev () {
-      this.$router.push({ path: this.previousLink })
-    },
-    next () {
-      this.$router.push({ path: this.nextLink })
-    },
-    key (event) {
-
-      if (this.show !== null) {
-        return
-      }
-
-      if (event.which === 13 || event.which === 39) { // right arrow
-        if (this.hasNext) this.next()
-      } else if (event.which === 37) { // left arrow
-        if (this.hasPrevious) this.prev()
-      } else if (event.which === 27) { // esc
-        this.back()
-      }
-    },
-    async updatePreview () {
-      if (this.req.subtitles) {
-        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(this.listing[j].type)) {
-            this.previousLink = this.listing[j].url
-            break
-          }
-        }
-
-        for (let j = i + 1; j < this.listing.length; j++) {
-          if (mediaTypes.includes(this.listing[j].type)) {
-            this.nextLink = this.listing[j].url
-            break
-          }
-        }
-
-        return
-      }
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    },
-    toggleSize () {
-      this.fullSize = !this.fullSize
-    }
-  }
-}
-</script>

frontend/src/components/header/Action.vue

@@ -0,0 +1,25 @@
+<template>
+  <button @click="action" :aria-label="label" :title="label" class="action">
+    <i class="material-icons">{{ icon }}</i>
+    <span>{{ label }}</span>
+    <span v-if="counter > 0" class="counter">{{ counter }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "action",
+  props: ["icon", "label", "counter", "show"],
+  methods: {
+    action: function () {
+      if (this.show) {
+        this.$store.commit("showHover", this.show);
+      }
+
+      this.$emit("action");
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -0,0 +1,62 @@
+<template>
+  <header>
+    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <action
+      v-if="showMenu !== undefined"
+      class="menu-button"
+      icon="menu"
+      :label="$t('buttons.toggleSidebar')"
+      @action="openSidebar()"
+    />
+
+    <slot />
+
+    <div id="dropdown" :class="{ active: this.currentPromptName === 'more' }">
+      <slot name="actions" />
+    </div>
+
+    <action
+      v-if="this.$slots.actions"
+      id="more"
+      icon="more_vert"
+      :label="$t('buttons.more')"
+      @action="$store.commit('showHover', 'more')"
+    />
+
+    <div
+      class="overlay"
+      v-show="this.currentPromptName == 'more'"
+      @click="$store.commit('closeHovers')"
+    />
+  </header>
+</template>
+
+<script>
+import { logoURL } from "@/utils/constants";
+
+import Action from "@/components/header/Action.vue";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "header-bar",
+  props: ["showLogo", "showMenu"],
+  components: {
+    Action,
+  },
+  data: function () {
+    return {
+      logoURL,
+    };
+  },
+  methods: {
+    openSidebar() {
+      this.$store.commit("showHover", "sidebar");
+    },
+  },
+  computed: {
+    ...mapGetters(["currentPromptName"]),
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/prompts/Copy.vue

@@ -1,108 +1,136 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.copy') }}</h2>
+      <h2>{{ $t("prompts.copy") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.copyMessage') }}</p>
-      <file-list @update:selected="val => dest = val"></file-list>
+      <p>{{ $t("prompts.copyMessage") }}</p>
+      <file-list ref="fileList" @update:selected="(val) => (dest = val)">
+      </file-list>
     </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"
-        @click="copy"
-        :aria-label="$t('buttons.copy')"
-        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
+    <div
+      class="card-action"
+      style="display: flex; align-items: center; justify-content: space-between;"
+    >
+      <template v-if="user.perm.create">
+        <button
+          class="button button--flat"
+          @click="$refs.fileList.createDir()"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+          style="justify-self: left;"
+        >
+          <span>{{ $t("sidebar.newFolder") }}</span>
+        </button>
+      </template>
+      <div>
+        <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"
+          @click="copy"
+          :aria-label="$t('buttons.copy')"
+          :title="$t('buttons.copy')"
+        >
+          {{ $t("buttons.copy") }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-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'
+import { mapState } from "vuex";
+import FileList from "./FileList.vue";
+import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
+import * as upload from "@/utils/upload";
 
 export default {
-  name: 'copy',
+  name: "copy",
   components: { FileList },
   data: function () {
     return {
       current: window.location.pathname,
-      dest: null
-    }
+      dest: null,
+    };
   },
-  computed: mapState(['req', 'selected']),
+  computed: mapState(["req", "selected", "user"]),
   methods: {
     copy: async function (event) {
-      event.preventDefault()
-      let items = []
+      event.preventDefault();
+      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),
-          name: this.req.items[item].name
-        })
+          name: this.req.items[item].name,
+        });
       }
 
       let action = async (overwrite, rename) => {
-        buttons.loading('copy')
+        buttons.loading("copy");
 
-        await api.copy(items, overwrite, rename).then(() => {
-          buttons.success('copy')
+        await api
+          .copy(items, overwrite, rename)
+          .then(() => {
+            buttons.success("copy");
 
-          if (this.$route.path === this.dest) {
-            this.$store.commit('setReload', true)
+            if (this.$route.path === this.dest) {
+              this.$store.commit("setReload", true);
 
-            return
-          }
+              return;
+            }
 
-          this.$router.push({ path: this.dest })
-        }).catch((e) => {
-          buttons.done('copy')
-          this.$showError(e)
-        })
-      }
+            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)
+        this.$store.commit("closeHovers");
+        action(false, true);
 
-        return
+        return;
       }
 
-      let dstItems = (await api.fetch(this.dest)).items
-      let conflict = upload.checkConflict(items, dstItems)
+      let dstItems = (await api.fetch(this.dest)).items;
+      let conflict = upload.checkConflict(items, dstItems);
 
-      let overwrite = false
-      let rename = false
+      let overwrite = false;
+      let rename = false;
 
       if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
+        this.$store.commit("showHover", {
+          prompt: "replace-rename",
           confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
+            overwrite = option == "overwrite";
+            rename = option == "rename";
 
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            action(overwrite, rename);
+          },
+        });
 
-        return
+        return;
       }
 
-      action(overwrite, rename)
-    }
-  }
-}
+      action(overwrite, rename);
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Delete.vue

@@ -1,68 +1,80 @@
 <template>
   <div class="card floating">
     <div class="card-content">
-      <p v-if="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
-      <p v-else>{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
+      <p v-if="selectedCount === 1">
+        {{ $t("prompts.deleteMessageSingle") }}
+      </p>
+      <p v-else>
+        {{ $t("prompts.deleteMessageMultiple", { count: selectedCount }) }}
+      </p>
     </div>
     <div class="card-action">
-      <button @click="$store.commit('closeHovers')"
+      <button
+        @click="$store.commit('closeHovers')"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button @click="submit"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
         class="button button--flat button--red"
         :aria-label="$t('buttons.delete')"
-        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        :title="$t('buttons.delete')"
+      >
+        {{ $t("buttons.delete") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapGetters, mapMutations, mapState} from 'vuex'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
+import { mapGetters, mapMutations, mapState } from "vuex";
+import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
 
 export default {
-  name: 'delete',
+  name: "delete",
   computed: {
-    ...mapGetters(['isListing', 'selectedCount']),
-    ...mapState(['req', 'selected'])
+    ...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
+    ...mapState(["req", "selected"]),
   },
   methods: {
-    ...mapMutations(['closeHovers']),
+    ...mapMutations(["closeHovers"]),
     submit: async function () {
-      buttons.loading('delete')
+      buttons.loading("delete");
 
       try {
         if (!this.isListing) {
-          await api.remove(this.$route.path)
-          buttons.success('delete')
+          await api.remove(this.$route.path);
+          buttons.success("delete");
 
-          this.$root.$emit('preview-deleted')
-          this.closeHovers()
-          return
+          this.currentPrompt?.confirm();
+          this.closeHovers();
+          return;
         }
 
-        this.closeHovers()
+        this.closeHovers();
 
         if (this.selectedCount === 0) {
-          return
+          return;
         }
 
-        let promises = []
+        let promises = [];
         for (let index of this.selected) {
-          promises.push(api.remove(this.req.items[index].url))
+          promises.push(api.remove(this.req.items[index].url));
         }
 
-        await Promise.all(promises)
-        buttons.success('delete')
-        this.$store.commit('setReload', true)
+        await Promise.all(promises);
+        buttons.success("delete");
+        this.$store.commit("setReload", true);
       } catch (e) {
-        buttons.done('delete')
-        this.$showError(e)
-        if (this.isListing) this.$store.commit('setReload', true)
+        buttons.done("delete");
+        this.$showError(e);
+        if (this.isListing) this.$store.commit("setReload", true);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Download.vue

@@ -1,49 +1,45 @@
 <template>
   <div class="card floating" id="download">
     <div class="card-title">
-      <h2>{{ $t('prompts.download') }}</h2>
+      <h2>{{ $t("prompts.download") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.downloadMessage') }}</p>
+      <p>{{ $t("prompts.downloadMessage") }}</p>
 
-      <button class="button button--block" @click="download('zip')" v-focus>zip</button>
-      <button class="button button--block" @click="download('tar')" v-focus>tar</button>
-      <button class="button button--block" @click="download('targz')" v-focus>tar.gz</button>
-      <button class="button button--block" @click="download('tarbz2')" v-focus>tar.bz2</button>
-      <button class="button button--block" @click="download('tarxz')" v-focus>tar.xz</button>
-      <button class="button button--block" @click="download('tarlz4')" v-focus>tar.lz4</button>
-      <button class="button button--block" @click="download('tarsz')" v-focus>tar.sz</button>
+      <button
+        v-for="(ext, format) in formats"
+        :key="format"
+        class="button button--block"
+        @click="currentPrompt.confirm(format)"
+        v-focus
+      >
+        {{ ext }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapGetters, mapState} from 'vuex'
-import { files as api } from '@/api'
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'download',
-  computed: {
-    ...mapState(['selected', 'req']),
-    ...mapGetters(['selectedCount'])
+  name: "download",
+  data: function () {
+    return {
+      formats: {
+        zip: "zip",
+        tar: "tar",
+        targz: "tar.gz",
+        tarbz2: "tar.bz2",
+        tarxz: "tar.xz",
+        tarlz4: "tar.lz4",
+        tarsz: "tar.sz",
+      },
+    };
   },
-  methods: {
-    download: function (format) {
-      if (this.selectedCount === 0) {
-        api.download(format, this.$route.path)
-      } else {
-        let files = []
-
-        for (let i of this.selected) {
-          files.push(this.req.items[i].url)
-        }
-
-        api.download(format, ...files)
-      }
-
-      this.$store.commit('closeHovers')
-    }
-  }
-}
+  computed: {
+    ...mapGetters(["currentPrompt"]),
+  },
+};
 </script>

frontend/src/components/prompts/FileList.vue

@@ -1,132 +1,149 @@
 <template>
   <div>
     <ul class="file-list">
-      <li @click="itemClick"
+      <li
+        @click="itemClick"
         @touchstart="touchstart"
         @dblclick="next"
         role="button"
         tabindex="0"
         :aria-label="item.name"
         :aria-selected="selected == item.url"
-        :key="item.name" v-for="item in items"
-        :data-url="item.url">{{ item.name }}</li>
+        :key="item.name"
+        v-for="item in items"
+        :data-url="item.url"
+      >
+        {{ item.name }}
+      </li>
     </ul>
 
-    <p>{{ $t('prompts.currentlyNavigating') }} <code>{{ nav }}</code>.</p>
+    <p>
+      {{ $t("prompts.currentlyNavigating") }} <code>{{ nav }}</code
+      >.
+    </p>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { files } from '@/api'
+import { mapState } from "vuex";
+import url from "@/utils/url";
+import { files } from "@/api";
 
 export default {
-  name: 'file-list',
+  name: "file-list",
   data: function () {
     return {
       items: [],
       touches: {
-        id: '',
-        count: 0
+        id: "",
+        count: 0,
       },
       selected: null,
-      current: window.location.pathname
-    }
+      current: window.location.pathname,
+    };
   },
   computed: {
-    ...mapState([ 'req', 'user' ]),
-    nav () {
-      return decodeURIComponent(this.current)
-    }
+    ...mapState(["req", "user"]),
+    nav() {
+      return decodeURIComponent(this.current);
+    },
   },
-  mounted () {
-    this.fillOptions(this.req)
+  mounted() {
+    this.fillOptions(this.req);
   },
   methods: {
-    fillOptions (req) {
+    fillOptions(req) {
       // Sets the current path and resets
       // the current items.
-      this.current = req.url
-      this.items = []
+      this.current = req.url;
+      this.items = [];
 
-      this.$emit('update:selected', this.current)
+      this.$emit("update:selected", this.current);
 
       // If the path isn't the root path,
       // show a button to navigate to the previous
       // directory.
-      if (req.url !== '/files/') {
+      if (req.url !== "/files/") {
         this.items.push({
-          name: '..',
-          url: url.removeLastDir(req.url) + '/'
-        })
+          name: "..",
+          url: url.removeLastDir(req.url) + "/",
+        });
       }
 
       // If this folder is empty, finish here.
-      if (req.items === null) return
+      if (req.items === null) return;
 
       // Otherwise we add every directory to the
       // move options.
       for (let item of req.items) {
-        if (!item.isDir) continue
+        if (!item.isDir) continue;
 
         this.items.push({
           name: item.name,
-          url: item.url
-        })
+          url: item.url,
+        });
       }
     },
     next: function (event) {
       // Retrieves the URL of the directory the user
       // just clicked in and fill the options with its
       // content.
-      let uri = event.currentTarget.dataset.url
+      let uri = event.currentTarget.dataset.url;
 
-      files.fetch(uri)
-        .then(this.fillOptions)
-        .catch(this.$showError)
+      files.fetch(uri).then(this.fillOptions).catch(this.$showError);
     },
-    touchstart (event) {
-      let url = event.currentTarget.dataset.url
+    touchstart(event) {
+      let url = event.currentTarget.dataset.url;
 
       // In 300 milliseconds, we shall reset the count.
       setTimeout(() => {
-        this.touches.count = 0
-      }, 300)
+        this.touches.count = 0;
+      }, 300);
 
       // If the element the user is touching
       // is different from the last one he touched,
       // reset the count.
       if (this.touches.id !== url) {
-        this.touches.id = url
-        this.touches.count = 1
-        return
+        this.touches.id = url;
+        this.touches.count = 1;
+        return;
       }
 
-      this.touches.count++
+      this.touches.count++;
 
       // If there is more than one touch already,
       // open the next screen.
       if (this.touches.count > 1) {
-        this.next(event)
+        this.next(event);
       }
     },
     itemClick: function (event) {
-      if (this.user.singleClick) this.next(event)
-      else this.select(event)
+      if (this.user.singleClick) this.next(event);
+      else this.select(event);
     },
     select: function (event) {
       // If the element is already selected, unselect it.
       if (this.selected === event.currentTarget.dataset.url) {
-        this.selected = null
-        this.$emit('update:selected', this.current)
-        return
+        this.selected = null;
+        this.$emit("update:selected", this.current);
+        return;
       }
 
       // Otherwise select the element.
-      this.selected = event.currentTarget.dataset.url
-      this.$emit('update:selected', this.selected)
-    }
-  }
-}
+      this.selected = event.currentTarget.dataset.url;
+      this.$emit("update:selected", this.selected);
+    },
+    createDir: async function () {
+      this.$store.commit("showHover", {
+        prompt: "newDir",
+        action: null,
+        confirm: null,
+        props: {
+          redirect: false,
+          base: this.current === this.$route.path ? null : this.current,
+        },
+      });
+    },
+  },
+};
 </script>