Improve download feature

Force the browser to download with Content-Disposition header Also, set the name of the file to the title of the media
AgustinSRG · Aug 14, 2024 · 864c2a9 · 864c2a9
1 parent 39ffb9c
commit 864c2a9
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 1 deletion.
diff --git a/backend/api_media_assets.go b/backend/api_media_assets.go
@@ -5,6 +5,7 @@ package main
 import (
 	"fmt"
 	"net/http"
+	"net/url"
 	"regexp"
 	"strconv"
 	"strings"
@@ -187,6 +188,21 @@ func api_handleAssetGet(response http.ResponseWriter, request *http.Request) {
 	response.Header().Set("Content-Length", fmt.Sprint(contentLength))
 	response.Header().Set("Cache-Control", "max-age=31536000")
 
+	if request.URL.Query().Get("download") == "force" {
+		fileName := request.URL.Query().Get("filename")
+		extPart := ext
+
+		if len(extPart) > 0 {
+			extPart = "." + extPart
+		}
+
+		if len(fileName) > 0 {
+			response.Header().Set("Content-Disposition", "attachment; filename=\""+url.PathEscape(fileName)+extPart+"\"")
+		} else {
+			response.Header().Set("Content-Disposition", "attachment")
+		}
+	}
+
 	if hasRange {
 		response.Header().Set("Content-Range", "bytes "+fmt.Sprint(fileSeek)+"-"+fmt.Sprint(fileEnding)+"/"+fmt.Sprint(s.FileSize()))
 		response.WriteHeader(206)

diff --git a/frontend/src/components/player/AudioPlayer.vue b/frontend/src/components/player/AudioPlayer.vue
@@ -416,6 +416,7 @@
             v-model:loop="loop"
             @update:loop="() => $emit('force-loop', loop)"
             :url="audioURL"
+            :title="title"
             :canWrite="canWrite"
             :hasExtendedDescription="hasExtendedDescription"
             @stats="openStats"

diff --git a/frontend/src/components/player/ImagePlayer.vue b/frontend/src/components/player/ImagePlayer.vue
@@ -263,6 +263,7 @@
             v-model:fit="fit"
             @update:fit="onUserFitUpdated"
             :url="imageURL"
+            :title="title"
             v-model:controls="showControlsState"
             :canWrite="canWrite"
             :hasExtendedDescription="hasExtendedDescription"
@@ -386,6 +387,8 @@ export default defineComponent({
         return {
             loading: true,
 
+            title: "",
+
             imageURL: "",
             imagePending: false,
             imagePendingTask: 0,
@@ -1000,10 +1003,13 @@ export default defineComponent({
 
             if (!this.metadata) {
                 this.imageURL = "";
+                this.title = "";
                 this.loading = false;
                 return;
             }
 
+            this.title = this.metadata.title;
+
             if (this.currentResolution < 0) {
                 if (this.metadata.encoded) {
                     this.imageURL = getAssetURL(this.metadata.url);

diff --git a/frontend/src/components/player/PlayerContextMenu.vue b/frontend/src/components/player/PlayerContextMenu.vue
@@ -174,6 +174,7 @@ export default defineComponent({
         y: Number,
 
         url: String,
+        title: String,
 
         loop: Boolean,
         fit: Boolean,
@@ -279,7 +280,15 @@ export default defineComponent({
             const link = document.createElement("a");
             link.target = "_blank";
             link.rel = "noopener noreferrer";
-            link.href = this.url;
+
+            const titlePart = this.title ? ("&filename=" + encodeURIComponent(this.title)) : "";
+
+            if ((this.url + "").includes("?")) {
+                link.href = this.url + "&download=force" + titlePart;
+            } else {
+                link.href = this.url + "?download=force" + titlePart;
+            }
+
             link.click();
             this.$emit("close");
         },

diff --git a/frontend/src/components/player/VideoPlayer.vue b/frontend/src/components/player/VideoPlayer.vue
@@ -433,6 +433,7 @@
             v-model:loop="loop"
             @update:loop="() => $emit('force-loop', loop)"
             :url="videoURL"
+            :title="title"
             :canWrite="canWrite"
             :hasExtendedDescription="hasExtendedDescription"
             @stats="openStats"
@@ -582,6 +583,8 @@ export default defineComponent({
             playing: false,
             loading: true,
 
+            title: "",
+
             autoPlayApplied: false,
 
             videoURL: "",
@@ -1656,12 +1659,15 @@ export default defineComponent({
             this.mediaErrorMessage = "";
             if (!this.metadata) {
                 this.videoURL = "";
+                this.title = "";
                 this.onClearURL();
                 this.duration = 0;
                 this.loading = false;
                 return;
             }
 
+            this.title = this.metadata.title;
+
             if (this.currentResolution < 0) {
                 if (this.metadata.encoded) {
                     this.videoURL = getAssetURL(this.metadata.url);