feat: open file original in a new tab via authenticated direct link

The file viewer's preview is now a real link (target=_blank) to the original,
instead of fetching it into a blob. A navigation can't send the auth header, so
the access token rides in the query — the auth middleware accepts ?access_token=
as a fallback, but only for GET, so a crafted link can't drive a mutation.

GetContent gains an ?inline=1 toggle (Content-Disposition: inline) so the tab
views the original instead of downloading it; download stays the default.

Documented in openapi.yaml; TestMediaQueryTokenAuth covers GET-with-query-token
(200), missing token (401) and query-token rejected on a non-GET (401).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

backend/internal/handler/file_handler.go

@@ -402,9 +402,14 @@ func (h *FileHandler) GetContent(c *gin.Context) {
 
 	c.Header("Content-Type", res.MIMEType)
 	c.Header("Cache-Control", "private, max-age=3600")
+	// Default to attachment (download); ?inline=1 serves it for in-tab viewing.
+	disposition := "attachment"
+	if c.Query("inline") == "1" {
+		disposition = "inline"
+	}
 	if res.OriginalName != nil {
 		c.Header("Content-Disposition",
-			fmt.Sprintf("attachment; filename=%q", *res.OriginalName))
+			fmt.Sprintf("%s; filename=%q", disposition, *res.OriginalName))
 	}
 	c.Status(http.StatusOK)
 	io.Copy(c.Writer, res.Body) //nolint:errcheck

backend/internal/handler/middleware.go

@@ -24,8 +24,8 @@ func NewAuthMiddleware(authSvc *service.AuthService) *AuthMiddleware {
 // On success it calls c.Next(); on failure it aborts with 401 JSON.
 func (m *AuthMiddleware) Handle() gin.HandlerFunc {
 	return func(c *gin.Context) {
-		raw := c.GetHeader("Authorization")
+		token := bearerToken(c)
-		if !strings.HasPrefix(raw, "Bearer ") {
+		if token == "" {
 			c.JSON(http.StatusUnauthorized, errorBody{
 				Code:    domain.ErrUnauthorized.Code(),
 				Message: "authorization header missing or malformed",
@@ -33,7 +33,6 @@ func (m *AuthMiddleware) Handle() gin.HandlerFunc {
 			c.Abort()
 			return
 		}
-		token := strings.TrimPrefix(raw, "Bearer ")
 
 		claims, err := m.authSvc.ValidateAccessToken(c.Request.Context(), token)
 		if err != nil {
@@ -50,3 +49,18 @@ func (m *AuthMiddleware) Handle() gin.HandlerFunc {
 		c.Next()
 	}
 }
+
+// bearerToken extracts the access token from the Authorization header. As a
+// fallback it accepts an ?access_token= query parameter, but only for GET
+// requests — this lets the browser open media (e.g. /files/{id}/content) via a
+// plain link/new tab, where it can't send the header, without allowing a crafted
+// link to drive a state-changing request.
+func bearerToken(c *gin.Context) string {
+	if raw := c.GetHeader("Authorization"); strings.HasPrefix(raw, "Bearer ") {
+		return strings.TrimPrefix(raw, "Bearer ")
+	}
+	if c.Request.Method == http.MethodGet {
+		return c.Query("access_token")
+	}
+	return ""
+}

backend/internal/integration/server_test.go

@@ -762,6 +762,32 @@ func TestBulkTagAutoRule(t *testing.T) {
 	assert.ElementsMatch(t, []string{"outdoor", "nature"}, names)
 }
 
+// TestMediaQueryTokenAuth verifies the ?access_token= fallback: it authenticates
+// a GET (so media can be opened via a plain link/new tab) but is rejected for a
+// non-GET, and a missing token is still 401.
+func TestMediaQueryTokenAuth(t *testing.T) {
+	if testing.Short() {
+		t.Skip("skipping integration test in short mode")
+	}
+
+	h := setupSuite(t)
+	token := h.login("admin", "admin")
+	file := h.uploadJPEG(token, "q.jpg")
+	fileID := file["id"].(string)
+
+	// GET with token in the query, no Authorization header → 200.
+	resp := h.do("GET", "/files/"+fileID+"/content?access_token="+token, nil, "", "")
+	require.Equal(t, http.StatusOK, resp.StatusCode, resp.String())
+
+	// No token anywhere → 401.
+	resp = h.do("GET", "/files/"+fileID+"/content", nil, "", "")
+	require.Equal(t, http.StatusUnauthorized, resp.StatusCode)
+
+	// Query token must NOT authorize a state-changing (non-GET) request → 401.
+	resp = h.do("DELETE", "/files/"+fileID+"?access_token="+token, nil, "", "")
+	require.Equal(t, http.StatusUnauthorized, resp.StatusCode, resp.String())
+}
+
 // ---------------------------------------------------------------------------
 // Security regression tests
 // ---------------------------------------------------------------------------

frontend/src/lib/components/file/FileViewer.svelte

@@ -101,6 +101,16 @@
 		}
 	}
 
+	// Direct link to the full-resolution original, opened in a new tab. A
+	// navigation can't send the auth header, so the token rides in the query —
+	// the server accepts ?access_token= for GET media. Reactive on the token so a
+	// silent refresh keeps the link valid.
+	let originalUrl = $derived(
+		fileId
+			? `/api/v1/files/${fileId}/content?inline=1&access_token=${encodeURIComponent($authStore.accessToken ?? '')}`
+			: '#'
+	);
+
 	// ---- Tags (lazy) ----
 	// Fetch the current file's tags the first time the Tags section is visible.
 	// Re-runs when fileId changes while the section is still on-screen.
@@ -222,7 +232,15 @@
 	<!-- Preview -->
 	<div class="preview-wrap">
 		{#if previewSrc}
+			<a
+				class="preview-link"
+				href={originalUrl}
+				target="_blank"
+				rel="noopener"
+				title="Open original in a new tab"
+			>
 				<img src={previewSrc} alt={file?.original_name ?? ''} class="preview-img" />
+			</a>
 		{:else if loading}
 			<div class="preview-placeholder shimmer"></div>
 		{:else}
@@ -414,6 +432,17 @@
 		overflow: hidden;
 	}
 
+	/* Whole preview area is a link: click opens the original in a new tab. */
+	.preview-link {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: zoom-in;
+		text-decoration: none;
+	}
+
 	.preview-img {
 		max-width: 100%;
 		max-height: 100%;

openapi.yaml

@@ -330,8 +330,27 @@ paths:
     get:
       tags: [Files]
       summary: Download file content
+      description: >
+        Returns the original file bytes. Served as an attachment (download) by
+        default; pass inline=1 to serve it for in-tab viewing
+        (Content-Disposition: inline). For browser navigation/new-tab opens that
+        can't send the Authorization header, the access token may be supplied as
+        the access_token query parameter (GET only).
       parameters:
         - $ref: '#/components/parameters/file_id'
+        - name: inline
+          in: query
+          required: false
+          schema:
+            type: string
+            enum: ['1']
+          description: When '1', serve inline (view) instead of as a download.
+        - name: access_token
+          in: query
+          required: false
+          schema:
+            type: string
+          description: Access token, as an alternative to the Authorization header (GET only).
       responses:
         '200':
           description: File binary