refactor(upload): use IncomingFile interface instead of multipart headers

Refactors the upload handler to use the `services.IncomingFile` interface instead of concrete `*multipart.FileHeader` pointers. This decouples the core upload logic from the HTTP multipart implementation, allowing for more flexible file sources. Changes include: - Introducing `namedMultipartFile` to adapt multipart headers to the new interface. - Updating `createOrAppendBox`, `checkUploadPolicy`, and `totalUploadBytes` to accept `IncomingFile`. - Renaming service calls to `CreateBoxFromIncoming` and `AppendIncomingFiles`.
feat: support folder uploads and sanitize upload paths
2026-06-10 18:19:45 +03:00 · 2026-06-10 18:14:29 +03:00 · 2026-06-10 12:56:22 +03:00 · 2026-06-08 13:34:05 +03:00 · 2026-06-08 12:08:51 +03:00 · 2026-06-08 12:02:30 +03:00
32 changed files with 2399 additions and 98 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -16,4 +16,5 @@ backend/static/uploads/*
 scripts/env/dev.env
 docker-compose.yml

-.claude
+.claude
+docs/possible_new_features
--- a/README.md
+++ b/README.md
@@ -357,3 +357,9 @@ bbolt database and JSON logs always remain local under `./data/db` and `./data/l

 The static handler sets long-lived immutable caching for images, video, audio, and fonts, shorter
 caching for CSS/JS, and gzip compression for compressible responses.
+
+## AI Usage
+
+I have used AI to accelerate development, all of the code has been reviewed by humans. I have mostly used self-hosted models as well as big models from big companies for a monthly subscription fee. 
+
+I have nothing against AI as long as you can tell me what every single line of your code does. That's how I personally view things.
--- a/backend/libs/handlers/app.go
+++ b/backend/libs/handlers/app.go
@@ -54,6 +54,8 @@ func (a *App) renderPage(w http.ResponseWriter, r *http.Request, status int, pag
 func (a *App) RegisterRoutes(mux *http.ServeMux) {
 	mux.HandleFunc("GET /", a.Home)
 	mux.HandleFunc("GET /api", a.APIDocs)
+	mux.HandleFunc("GET /service-worker.js", a.ServiceWorker)
+	mux.HandleFunc("POST /share-target", a.ShareTargetFallback)
 	mux.HandleFunc("GET /register", a.Register)
 	mux.HandleFunc("POST /register", a.RegisterPost)
 	mux.HandleFunc("GET /login", a.Login)
--- a/backend/libs/handlers/download.go
+++ b/backend/libs/handlers/download.go
@@ -59,6 +59,8 @@ type fileView struct {
 	ReactionMore int
 	Reacted      bool
 	Processing   bool
+	Failed       bool
+	Error        string
 }

 type reactionView struct {
@@ -139,7 +141,7 @@ func (a *App) DownloadPage(w http.ResponseWriter, r *http.Request) {

 	expiresLabel := boxExpiryLabel(box.ExpiresAt, "Jan 2, 2006 15:04 MST")
 	title := "Shared files on Warpbox"
-	description := fmt.Sprintf("%d file%s shared via Warpbox · expires %s", len(box.Files), plural(len(box.Files)), expiresLabel)
+	description := fmt.Sprintf("%d file%s shared via Warpbox | Expires %s.", len(box.Files), plural(len(box.Files)), expiresLabel)
 	ogImage := absoluteURL(r, fmt.Sprintf("/d/%s/og-image.jpg", box.ID))
 	imageAlt := fmt.Sprintf("%d shared file%s on Warp Box", len(box.Files), plural(len(box.Files)))
 	imageType := "image/jpeg"
@@ -201,7 +203,7 @@ func fileShareDescription(size, contentType string, expiresAt time.Time) string
 	if strings.TrimSpace(contentType) == "" {
 		contentType = "file"
 	}
-	return fmt.Sprintf("%s · %s · click to preview or download · expires %s", size, contentType, boxExpiryLabel(expiresAt, "Jan 2, 2006"))
+	return fmt.Sprintf("%s %s. Open to preview or download. Expires %s.", size, contentType, boxExpiryLabel(expiresAt, "Jan 2, 2006"))
 }

 func socialImageURL(r *http.Request, box services.Box, file services.File, view fileView) string {
@@ -242,12 +244,32 @@ func (a *App) DownloadFile(w http.ResponseWriter, r *http.Request) {
 			http.Error(w, "file is still processing", http.StatusAccepted)
 			return
 		}
+		if file.ProcessingError != "" {
+			a.logger.Warn("failed file preview blocked for social bot", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4241, "box_id", box.ID, "file_id", file.ID, "error", file.ProcessingError)...)
+			http.Error(w, "file processing failed: "+file.ProcessingError, http.StatusFailedDependency)
+			return
+		}
+		if services.BoxHasTrouble(box) {
+			a.logger.Warn("failed box preview blocked for social bot", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4245, "box_id", box.ID, "file_id", file.ID, "error", services.BoxTroubleReason(box))...)
+			http.Error(w, "box processing failed: "+services.BoxTroubleReason(box), http.StatusFailedDependency)
+			return
+		}
 		if shouldServeRawSocialMedia(file) {
 			a.serveFileContent(w, r, box, file, false)
 			a.logger.Info("media file served inline for social preview", withRequestLogAttrs(r, "source", "download", "severity", "user_activity", "code", 2009, "box_id", box.ID, "file_id", file.ID)...)
 			return
 		}
 	}
+	if file.ProcessingError != "" && !locked {
+		a.logger.Warn("failed file preview blocked", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4242, "box_id", box.ID, "file_id", file.ID, "error", file.ProcessingError)...)
+		http.Error(w, "file processing failed: "+file.ProcessingError, http.StatusFailedDependency)
+		return
+	}
+	if services.BoxHasTrouble(box) && !locked {
+		a.logger.Warn("failed box preview blocked", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4246, "box_id", box.ID, "file_id", file.ID, "error", services.BoxTroubleReason(box))...)
+		http.Error(w, "box processing failed: "+services.BoxTroubleReason(box), http.StatusFailedDependency)
+		return
+	}
 	view := a.fileView(box, file)
 	fileSize := helpers.FormatBytes(file.Size)
 	title := file.Name
@@ -306,6 +328,16 @@ func (a *App) DownloadFileContent(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "file is still processing", http.StatusAccepted)
 		return
 	}
+	if file.ProcessingError != "" {
+		a.logger.Warn("failed file download blocked", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4243, "box_id", box.ID, "file_id", file.ID, "error", file.ProcessingError)...)
+		http.Error(w, "file processing failed: "+file.ProcessingError, http.StatusFailedDependency)
+		return
+	}
+	if services.BoxHasTrouble(box) {
+		a.logger.Warn("failed box download blocked", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4247, "box_id", box.ID, "file_id", file.ID, "error", services.BoxTroubleReason(box))...)
+		http.Error(w, "box processing failed: "+services.BoxTroubleReason(box), http.StatusFailedDependency)
+		return
+	}

 	a.serveFileContent(w, r, box, file, r.URL.Query().Get("inline") != "1")
 	a.logger.Info("file content served", withRequestLogAttrs(r, "source", "download", "severity", "user_activity", "code", 2005, "box_id", box.ID, "file_id", file.ID, "attachment", r.URL.Query().Get("inline") != "1")...)
@@ -321,6 +353,11 @@ func (a *App) Thumbnail(w http.ResponseWriter, r *http.Request) {
 		a.servePlaceholderThumbnail(w, r)
 		return
 	}
+	if services.BoxHasTrouble(box) || services.FileHasTrouble(file) {
+		a.logger.Warn("thumbnail request skipped trouble file", withRequestLogAttrs(r, "source", "thumbnail", "severity", "warn", "code", 4110, "box_id", box.ID, "file_id", file.ID, "error", troubleReasonForLog(box, file))...)
+		a.servePlaceholderThumbnail(w, r)
+		return
+	}

 	object, err := a.uploadService.OpenThumbnailObject(r.Context(), box, file)
 	if err != nil {
@@ -363,6 +400,11 @@ func (a *App) VideoScenesPreview(w http.ResponseWriter, r *http.Request) {
 		a.servePlaceholderThumbnail(w, r)
 		return
 	}
+	if services.BoxHasTrouble(box) || services.FileHasTrouble(file) {
+		a.logger.Warn("video scenes preview request skipped trouble file", withRequestLogAttrs(r, "source", "thumbnail", "severity", "warn", "code", 4111, "box_id", box.ID, "file_id", file.ID, "error", troubleReasonForLog(box, file))...)
+		a.servePlaceholderThumbnail(w, r)
+		return
+	}

 	object, err := a.uploadService.OpenSceneThumbnailObject(r.Context(), box, file)
 	if err != nil {
@@ -400,6 +442,11 @@ func (a *App) ArchiveListing(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "password required", http.StatusUnauthorized)
 		return
 	}
+	if services.BoxHasTrouble(box) || services.FileHasTrouble(file) {
+		a.logger.Warn("archive listing request skipped trouble file", withRequestLogAttrs(r, "source", "thumbnail", "severity", "warn", "code", 4112, "box_id", box.ID, "file_id", file.ID, "error", troubleReasonForLog(box, file))...)
+		http.Error(w, "archive preview unavailable: file processing failed", http.StatusFailedDependency)
+		return
+	}

 	if strings.ToLower(filepath.Ext(file.ArchiveListing)) != ".json" {
 		if listing := a.generateMissingArchiveListingForRequest(r, box, file); listing != "" {
@@ -432,7 +479,7 @@ func (a *App) ArchiveListing(w http.ResponseWriter, r *http.Request) {
 }

 func (a *App) generateMissingThumbnailForRequest(r *http.Request, box services.Box, file services.File) string {
-	if file.Thumbnail != "" || !jobs.NeedsThumbnail(file) {
+	if file.Thumbnail != "" || !jobs.NeedsThumbnail(file) || services.BoxHasTrouble(box) || services.FileHasTrouble(file) || file.Processing {
 		return ""
 	}
 	thumbnail, err := jobs.GenerateThumbnailForFile(a.uploadService, box, file)
@@ -456,7 +503,7 @@ func (a *App) generateMissingThumbnailForRequest(r *http.Request, box services.B
 }

 func (a *App) generateMissingVideoScenesForRequest(r *http.Request, box services.Box, file services.File) string {
-	if file.SceneThumbnail != "" || !jobs.NeedsVideoScenes(file) {
+	if file.SceneThumbnail != "" || !jobs.NeedsVideoScenes(file) || services.BoxHasTrouble(box) || services.FileHasTrouble(file) || file.Processing {
 		return ""
 	}
 	scene, err := jobs.GenerateVideoScenesForFile(a.uploadService, box, file)
@@ -480,7 +527,7 @@ func (a *App) generateMissingVideoScenesForRequest(r *http.Request, box services
 }

 func (a *App) generateMissingArchiveListingForRequest(r *http.Request, box services.Box, file services.File) string {
-	if strings.ToLower(filepath.Ext(file.ArchiveListing)) == ".json" || !jobs.NeedsArchiveListing(file) {
+	if strings.ToLower(filepath.Ext(file.ArchiveListing)) == ".json" || !jobs.NeedsArchiveListing(file) || services.BoxHasTrouble(box) || services.FileHasTrouble(file) || file.Processing {
 		return ""
 	}
 	listing, err := jobs.GenerateArchiveListingForFile(a.uploadService, box, file)
@@ -504,6 +551,13 @@ func (a *App) generateMissingArchiveListingForRequest(r *http.Request, box servi
 	return listing
 }

+func troubleReasonForLog(box services.Box, file services.File) string {
+	if services.FileHasTrouble(file) {
+		return file.ProcessingError
+	}
+	return services.BoxTroubleReason(box)
+}
+
 // servePlaceholderThumbnail serves the fallback image with no-store so the
 // browser re-requests on the next load and picks up the real thumbnail as soon
 // as it has been generated.
@@ -572,9 +626,11 @@ func (a *App) serveFileContent(w http.ResponseWriter, r *http.Request, box servi
 	defer object.Body.Close()

 	w.Header().Set("Content-Type", file.ContentType)
+	disposition := "inline"
 	if attachment {
-		w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%q", file.Name))
+		disposition = "attachment"
 	}
+	w.Header().Set("Content-Disposition", contentDisposition(disposition, file.Name))
 	if seeker, ok := object.Body.(io.ReadSeeker); ok {
 		http.ServeContent(w, r, file.Name, object.ModTime, seeker)
 	} else {
@@ -590,6 +646,39 @@ func (a *App) serveFileContent(w http.ResponseWriter, r *http.Request, box servi
 	}
 }

+func contentDisposition(disposition, name string) string {
+	filename := cleanDownloadFilename(name)
+	return fmt.Sprintf(`%s; filename="%s"; filename*=UTF-8''%s`, disposition, asciiFilenameFallback(filename), url.PathEscape(filename))
+}
+
+func cleanDownloadFilename(name string) string {
+	clean := strings.TrimSpace(strings.ReplaceAll(name, "\\", "/"))
+	clean = filepath.Base(clean)
+	if clean == "" || clean == "." || clean == "/" {
+		return "download"
+	}
+	return clean
+}
+
+func asciiFilenameFallback(name string) string {
+	var fallback strings.Builder
+	for _, char := range name {
+		switch {
+		case char < 0x20 || char == 0x7f || char == '"' || char == '\\' || char == '/' || char == ';':
+			fallback.WriteByte('_')
+		case char <= 0x7e:
+			fallback.WriteRune(char)
+		default:
+			fallback.WriteByte('_')
+		}
+	}
+	clean := strings.TrimSpace(fallback.String())
+	if clean == "" {
+		return "download"
+	}
+	return clean
+}
+
 func readSeekCloser(source io.ReadCloser) io.ReadSeeker {
 	data, err := io.ReadAll(source)
 	if err != nil {
@@ -616,9 +705,25 @@ func (a *App) DownloadZip(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "password required", http.StatusUnauthorized)
 		return
 	}
+	for _, file := range box.Files {
+		if file.Processing {
+			http.Error(w, "file is still processing", http.StatusAccepted)
+			return
+		}
+		if file.ProcessingError != "" {
+			a.logger.Warn("zip download blocked by failed file", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4244, "box_id", box.ID, "file_id", file.ID, "error", file.ProcessingError)...)
+			http.Error(w, "file processing failed: "+file.ProcessingError, http.StatusFailedDependency)
+			return
+		}
+	}
+	if services.BoxHasTrouble(box) {
+		a.logger.Warn("zip download blocked by failed box", withRequestLogAttrs(r, "source", "download", "severity", "warn", "code", 4248, "box_id", box.ID, "error", services.BoxTroubleReason(box))...)
+		http.Error(w, "box processing failed: "+services.BoxTroubleReason(box), http.StatusFailedDependency)
+		return
+	}

 	w.Header().Set("Content-Type", "application/zip")
-	w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%q", "warpbox-"+box.ID+".zip"))
+	w.Header().Set("Content-Disposition", contentDisposition("attachment", "warpbox-"+box.ID+".zip"))
 	w.Header().Set("Last-Modified", time.Now().UTC().Format(http.TimeFormat))

 	if err := a.uploadService.WriteZip(w, box); err != nil {
@@ -650,9 +755,9 @@ func (a *App) fileViewWithReactions(box services.Box, file services.File, reacti
 		ThumbnailURL: fmt.Sprintf("/d/%s/thumb/%s", box.ID, file.ID),
 		SceneURL:     fmt.Sprintf("/d/%s/scene/%s", box.ID, file.ID),
 		ArchiveURL:   fmt.Sprintf("/d/%s/archive/%s", box.ID, file.ID),
-		HasThumbnail: file.Thumbnail != "" || jobs.NeedsThumbnail(file),
-		HasScene:     file.SceneThumbnail != "" || jobs.NeedsVideoScenes(file),
-		HasArchive:   file.ArchiveListing != "" || jobs.NeedsArchiveListing(file),
+		HasThumbnail: !services.BoxHasTrouble(box) && !services.FileHasTrouble(file) && (file.Thumbnail != "" || jobs.NeedsThumbnail(file)),
+		HasScene:     !services.BoxHasTrouble(box) && !services.FileHasTrouble(file) && (file.SceneThumbnail != "" || jobs.NeedsVideoScenes(file)),
+		HasArchive:   !services.BoxHasTrouble(box) && !services.FileHasTrouble(file) && (file.ArchiveListing != "" || jobs.NeedsArchiveListing(file)),
 		IconURL:      fileIconURL("standard", icon.Standard),
 		IconRetroURL: fileIconURL("retro", icon.Retro),
 		ReactURL:     fmt.Sprintf("/d/%s/f/%s/react", box.ID, file.ID),
@@ -660,6 +765,8 @@ func (a *App) fileViewWithReactions(box services.Box, file services.File, reacti
 		ReactionMore: reactionOverflowCount(reactionViews),
 		Reacted:      reacted,
 		Processing:   file.Processing,
+		Failed:       services.BoxHasTrouble(box) || services.FileHasTrouble(file),
+		Error:        troubleReasonForLog(box, file),
 	}
 }

--- a/backend/libs/handlers/pages.go
+++ b/backend/libs/handlers/pages.go
@@ -10,6 +10,7 @@ import (

 type homeData struct {
 	MaxUploadSize        string
+	MaxUploadBytes       int64
 	LimitSummary         string
 	Collections          []collectionView
 	IsAdmin              bool
@@ -57,17 +58,18 @@ func (a *App) Home(w http.ResponseWriter, r *http.Request) {
 		"actor", actor,
 		"user_id", user.ID,
 	)...)
-	maxUploadSize, limitSummary := a.homeUploadPolicyLabels(settings, user, loggedIn, isAdmin)
+	maxUploadSize, maxUploadBytes, limitSummary := a.homeUploadPolicyLabels(settings, user, loggedIn, isAdmin)
 	expiryOptions, defaultExpiry := a.homeExpiryOptions(settings, user, loggedIn, isAdmin)
 	a.renderPage(w, r, http.StatusOK, "home.html", web.PageData{
 		Title:        "Upload your files",
-		Description:  "Upload and share files fast. Drop a file, get a link — private, temporary transfers that expire on your terms.",
+		Description:  "Upload and share files quickly. Drop a file, get a link.",
 		CanonicalURL: absoluteURL(r, "/"),
 		ImageURL:     absoluteURL(r, "/static/og-default.png"),
-		ImageAlt:     "Warp Box — simple file sharing and fast downloads",
+		ImageAlt:     "Warp Box | simple file sharing  and fast downloads",
 		CurrentUser:  currentUser,
 		Data: homeData{
 			MaxUploadSize:        maxUploadSize,
+			MaxUploadBytes:       maxUploadBytes,
 			LimitSummary:         limitSummary,
 			Collections:          collections,
 			IsAdmin:              isAdmin,
@@ -155,22 +157,25 @@ func expiryLabel(minutes int) string {
 	}
 }

-func (a *App) homeUploadPolicyLabels(settings services.UploadPolicySettings, user services.User, loggedIn, isAdmin bool) (string, string) {
+func (a *App) homeUploadPolicyLabels(settings services.UploadPolicySettings, user services.User, loggedIn, isAdmin bool) (string, int64, string) {
 	if isAdmin {
-		return "No file size limit", "Admin uploads bypass storage and daily caps."
+		return "No file size limit", -1, "Admin uploads bypass storage and daily caps."
 	}
 	if !loggedIn {
 		if !settings.AnonymousUploadsEnabled {
-			return "Anonymous uploads disabled", "Sign in to upload files."
+			return "Anonymous uploads disabled", 0, "Sign in to upload files."
 		}
-		return services.FormatMegabytesLabel(settings.AnonymousMaxUploadMB), "Daily anonymous cap: " + services.FormatMegabytesLabel(settings.AnonymousDailyUploadMB) + " per IP · " + strconv.Itoa(settings.AnonymousMaxDays) + " day max."
+		return services.FormatMegabytesLabel(settings.AnonymousMaxUploadMB), services.MegabytesToBytes(settings.AnonymousMaxUploadMB), "Daily anonymous cap: " + services.FormatMegabytesLabel(settings.AnonymousDailyUploadMB) + " per IP · " + strconv.Itoa(settings.AnonymousMaxDays) + " day max."
 	}
 	policy := a.settingsService.EffectivePolicyForUser(settings, user)
 	maxUpload := a.uploadService.MaxUploadSizeLabel()
+	maxUploadBytes := a.uploadService.MaxUploadSize()
 	if policy.MaxUploadMB < 0 {
 		maxUpload = "unlimited"
+		maxUploadBytes = -1
 	} else if policy.MaxUploadMB > 0 {
 		maxUpload = services.FormatMegabytesLabel(policy.MaxUploadMB)
+		maxUploadBytes = services.MegabytesToBytes(policy.MaxUploadMB)
 	}
 	quota := "unlimited"
 	if policy.StorageQuotaSet {
@@ -180,5 +185,5 @@ func (a *App) homeUploadPolicyLabels(settings services.UploadPolicySettings, use
 	if policy.MaxDays < 0 {
 		expiryLimit = "no expiry limit."
 	}
-	return maxUpload, "Daily cap: " + services.FormatMegabytesLabel(policy.DailyUploadMB) + " · Storage quota: " + quota + " · " + expiryLimit
+	return maxUpload, maxUploadBytes, "Daily cap: " + services.FormatMegabytesLabel(policy.DailyUploadMB) + " · Storage quota: " + quota + " · " + expiryLimit
 }
--- a/backend/libs/handlers/resumable.go
+++ b/backend/libs/handlers/resumable.go
@@ -180,7 +180,7 @@ func (a *App) CompleteResumableUpload(w http.ResponseWriter, r *http.Request) {
 	if !ok {
 		return
 	}
-	if session.Status == services.ResumableStatusCompleted || session.Status == services.ResumableStatusProcessing {
+	if session.Status == services.ResumableStatusCompleted {
 		result, completed, err := a.uploadService.CompleteResumableSession(r.Context(), session.ID)
 		if err != nil {
 			a.logger.Warn("resumable upload completion replay failed", withRequestLogAttrs(r, "source", "user-upload", "severity", "warn", "code", 4004, "session_id", session.ID, "error", err.Error())...)
@@ -191,6 +191,17 @@ func (a *App) CompleteResumableUpload(w http.ResponseWriter, r *http.Request) {
 		helpers.WriteJSON(w, http.StatusOK, result)
 		return
 	}
+	if session.Status == services.ResumableStatusProcessing {
+		result, err := a.uploadService.FinalizeProcessingResumableSession(r.Context(), session.ID)
+		if err != nil {
+			a.logger.Warn("resumable upload completion replay failed", withRequestLogAttrs(r, "source", "user-upload", "severity", "warn", "code", 4004, "session_id", session.ID, "error", err.Error())...)
+			helpers.WriteJSONError(w, http.StatusBadRequest, err.Error())
+			return
+		}
+		a.logger.Info("resumable upload completion replayed", withRequestLogAttrs(r, "source", "user-upload", "severity", "user_activity", "code", 2004, "session_id", session.ID, "box_id", result.BoxID, "files", len(result.Files))...)
+		helpers.WriteJSON(w, http.StatusOK, result)
+		return
+	}
 	user, loggedIn, _ := a.currentUserWithAuthError(r)
 	isAdminUpload := loggedIn && user.Role == services.UserRoleAdmin
 	settings, policy, ok := a.loadUploadPolicyForAPI(w, r, user, loggedIn)
--- a/backend/libs/handlers/static.go
+++ b/backend/libs/handlers/static.go
@@ -34,6 +34,17 @@ func (a *App) EmojiAsset(w http.ResponseWriter, r *http.Request) {
 	http.ServeFile(w, r, path)
 }

+func (a *App) ServiceWorker(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/javascript; charset=utf-8")
+	w.Header().Set("Cache-Control", "public, max-age=86400")
+	w.Header().Set("Service-Worker-Allowed", "/")
+	http.ServeFile(w, r, filepath.Join(a.cfg.StaticDir, "js", "service-worker.js"))
+}
+
+func (a *App) ShareTargetFallback(w http.ResponseWriter, r *http.Request) {
+	http.Redirect(w, r, "/?share-target=unsupported", http.StatusSeeOther)
+}
+
 func setStaticCacheHeaders(w http.ResponseWriter, path string) {
 	ext := strings.ToLower(filepath.Ext(path))

--- a/backend/libs/handlers/static_test.go
+++ b/backend/libs/handlers/static_test.go
@@ -1,7 +1,11 @@
 package handlers

 import (
+	"encoding/json"
+	"net/http"
 	"net/http/httptest"
+	"os"
+	"path/filepath"
 	"testing"
 )

@@ -24,3 +28,76 @@ func TestSetStaticCacheHeaders(t *testing.T) {
 		}
 	}
 }
+
+func TestWebManifestIncludesShareTarget(t *testing.T) {
+	data, err := os.ReadFile(filepath.Join("..", "..", "static", "site.webmanifest"))
+	if err != nil {
+		t.Fatalf("ReadFile returned error: %v", err)
+	}
+	var manifest struct {
+		ShareTarget struct {
+			Action  string `json:"action"`
+			Method  string `json:"method"`
+			EncType string `json:"enctype"`
+			Params  struct {
+				Title string `json:"title"`
+				Text  string `json:"text"`
+				URL   string `json:"url"`
+				Files []struct {
+					Name   string   `json:"name"`
+					Accept []string `json:"accept"`
+				} `json:"files"`
+			} `json:"params"`
+		} `json:"share_target"`
+	}
+	if err := json.Unmarshal(data, &manifest); err != nil {
+		t.Fatalf("json.Unmarshal returned error: %v", err)
+	}
+	if manifest.ShareTarget.Action != "/share-target" || manifest.ShareTarget.Method != "POST" || manifest.ShareTarget.EncType != "multipart/form-data" {
+		t.Fatalf("unexpected share_target config: %+v", manifest.ShareTarget)
+	}
+	if manifest.ShareTarget.Params.Title != "title" || manifest.ShareTarget.Params.Text != "text" || manifest.ShareTarget.Params.URL != "url" {
+		t.Fatalf("unexpected share_target params: %+v", manifest.ShareTarget.Params)
+	}
+	if len(manifest.ShareTarget.Params.Files) != 1 || manifest.ShareTarget.Params.Files[0].Name != "files" || len(manifest.ShareTarget.Params.Files[0].Accept) != 1 || manifest.ShareTarget.Params.Files[0].Accept[0] != "*/*" {
+		t.Fatalf("unexpected share_target files: %+v", manifest.ShareTarget.Params.Files)
+	}
+}
+
+func TestServiceWorkerServedFromRootScope(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+
+	request := httptest.NewRequest(http.MethodGet, "/service-worker.js", nil)
+	response := httptest.NewRecorder()
+	app.ServiceWorker(response, request)
+
+	if response.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", response.Code, response.Body.String())
+	}
+	if got := response.Header().Get("Service-Worker-Allowed"); got != "/" {
+		t.Fatalf("Service-Worker-Allowed = %q, want /", got)
+	}
+	if got := response.Header().Get("Content-Type"); got != "text/javascript; charset=utf-8" {
+		t.Fatalf("Content-Type = %q", got)
+	}
+	if response.Body.Len() == 0 {
+		t.Fatalf("service worker body missing")
+	}
+}
+
+func TestShareTargetFallbackRedirectsHome(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+
+	request := httptest.NewRequest(http.MethodPost, "/share-target", nil)
+	response := httptest.NewRecorder()
+	app.ShareTargetFallback(response, request)
+
+	if response.Code != http.StatusSeeOther {
+		t.Fatalf("status = %d, want %d", response.Code, http.StatusSeeOther)
+	}
+	if got := response.Header().Get("Location"); got != "/?share-target=unsupported" {
+		t.Fatalf("Location = %q", got)
+	}
+}
--- a/backend/libs/handlers/upload.go
+++ b/backend/libs/handlers/upload.go
@@ -4,6 +4,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
+	"io"
 	"mime/multipart"
 	"net/http"
 	"strconv"
@@ -53,11 +54,16 @@ func (a *App) Upload(w http.ResponseWriter, r *http.Request) {
 	}
 	if err := r.ParseMultipartForm(parseLimit); err != nil {
 		a.logger.Warn("upload form parse failed", withRequestLogAttrs(r, "source", "user-upload", "severity", "warn", "code", 4000, "user_id", user.ID, "error", err.Error())...)
+		var maxBytesErr *http.MaxBytesError
+		if errors.As(err, &maxBytesErr) {
+			helpers.WriteJSONError(w, http.StatusRequestEntityTooLarge, "upload exceeds the configured upload limit")
+			return
+		}
 		helpers.WriteJSONError(w, http.StatusBadRequest, "upload form could not be read")
 		return
 	}

-	files := uploadFiles(r)
+	files := uploadIncomingFiles(r)
 	totalBytes := totalUploadBytes(files)
 	var ownerID string
 	var collectionID string
@@ -159,7 +165,7 @@ func (a *App) Upload(w http.ResponseWriter, r *http.Request) {
 // uploadGroupWindow are folded into one box. Without the header the behaviour is
 // identical to creating a fresh box every time. Returns the result and how many
 // boxes were created (1 for a new box, 0 for an append) for usage accounting.
-func (a *App) createOrAppendBox(r *http.Request, user services.User, loggedIn bool, policy services.EffectiveUploadPolicy, files []*multipart.FileHeader, opts services.UploadOptions, enforceBoxLimits bool) (services.UploadResult, int, int, string, error) {
+func (a *App) createOrAppendBox(r *http.Request, user services.User, loggedIn bool, policy services.EffectiveUploadPolicy, files []services.IncomingFile, opts services.UploadOptions, enforceBoxLimits bool) (services.UploadResult, int, int, string, error) {
 	batch := strings.TrimSpace(r.Header.Get(uploadBatchHeader))
 	if batch == "" {
 		if enforceBoxLimits {
@@ -167,7 +173,7 @@ func (a *App) createOrAppendBox(r *http.Request, user services.User, loggedIn bo
 				return services.UploadResult{}, 0, status, message, nil
 			}
 		}
-		result, err := a.uploadService.CreateBox(files, opts)
+		result, err := a.uploadService.CreateBoxFromIncoming(files, opts)
 		if err != nil {
 			return services.UploadResult{}, 0, 0, "", err
 		}
@@ -188,7 +194,7 @@ func (a *App) createOrAppendBox(r *http.Request, user services.User, loggedIn bo

 	if entry.boxID != "" && time.Since(entry.at) < uploadGroupWindow {
 		if box, err := a.uploadService.GetBox(entry.boxID); err == nil && a.batchBoxMatches(box, user, loggedIn, r) && a.uploadService.CanDownload(box) == nil {
-			if result, err := a.uploadService.AppendFiles(entry.boxID, files, opts); err == nil {
+			if result, err := a.uploadService.AppendIncomingFiles(entry.boxID, files, opts); err == nil {
 				// Re-attach the manage/delete URLs from the box's creation so every
 				// upload in the batch returns a working deletion URL.
 				result.ManageURL = entry.manageURL
@@ -204,7 +210,7 @@ func (a *App) createOrAppendBox(r *http.Request, user services.User, loggedIn bo
 			return services.UploadResult{}, 0, status, message, nil
 		}
 	}
-	result, err := a.uploadService.CreateBox(files, opts)
+	result, err := a.uploadService.CreateBoxFromIncoming(files, opts)
 	if err != nil {
 		return services.UploadResult{}, 0, 0, "", err
 	}
@@ -224,13 +230,13 @@ func (a *App) batchBoxMatches(box services.Box, user services.User, loggedIn boo
 	return box.OwnerID == "" && box.CreatorIP == uploadClientIP(r)
 }

-func (a *App) checkUploadPolicy(r *http.Request, user services.User, loggedIn bool, settings services.UploadPolicySettings, policy services.EffectiveUploadPolicy, files []*multipart.FileHeader, totalBytes int64) (int, string) {
+func (a *App) checkUploadPolicy(r *http.Request, user services.User, loggedIn bool, settings services.UploadPolicySettings, policy services.EffectiveUploadPolicy, files []services.IncomingFile, totalBytes int64) (int, string) {
 	if len(files) == 0 {
 		return 0, ""
 	}
 	sizes := make([]int64, 0, len(files))
 	for _, file := range files {
-		sizes = append(sizes, file.Size)
+		sizes = append(sizes, file.Size())
 	}
 	return a.checkUploadPolicyForSizes(r, user, loggedIn, settings, policy, sizes, totalBytes)
 }
@@ -244,7 +250,7 @@ func (a *App) checkUploadPolicyForSizes(r *http.Request, user services.User, log
 		maxBytes := services.MegabytesToBytes(policy.MaxUploadMB)
 		for _, fileSize := range fileSizes {
 			if fileSize > maxBytes {
-				return http.StatusRequestEntityTooLarge, "file exceeds upload size limit"
+				return http.StatusRequestEntityTooLarge, "file exceeds upload size limit of " + services.FormatMegabytesLabel(policy.MaxUploadMB)
 			}
 		}
 	}
@@ -378,10 +384,10 @@ func uploadRateKey(r *http.Request, user services.User, loggedIn bool) string {
 	return "ip:" + uploadClientIP(r)
 }

-func totalUploadBytes(files []*multipart.FileHeader) int64 {
+func totalUploadBytes(files []services.IncomingFile) int64 {
 	var total int64
 	for _, file := range files {
-		total += file.Size
+		total += file.Size()
 	}
 	return total
 }
@@ -404,13 +410,48 @@ func statusForDownloadError(err error) int {
 	return http.StatusForbidden
 }

-func uploadFiles(r *http.Request) []*multipart.FileHeader {
+type namedMultipartFile struct {
+	header *multipart.FileHeader
+	name   string
+}
+
+func (f namedMultipartFile) Name() string {
+	if strings.TrimSpace(f.name) != "" {
+		return f.name
+	}
+	return f.header.Filename
+}
+
+func (f namedMultipartFile) Size() int64 {
+	return f.header.Size
+}
+
+func (f namedMultipartFile) ContentType() string {
+	return f.header.Header.Get("Content-Type")
+}
+
+func (f namedMultipartFile) Open() (io.ReadCloser, error) {
+	return f.header.Open()
+}
+
+func uploadIncomingFiles(r *http.Request) []services.IncomingFile {
 	if r.MultipartForm == nil {
 		return nil
 	}
-	files := make([]*multipart.FileHeader, 0)
-	files = append(files, r.MultipartForm.File["file"]...)
-	files = append(files, r.MultipartForm.File["sharex"]...)
+	fileHeaders := r.MultipartForm.File["file"]
+	shareXHeaders := r.MultipartForm.File["sharex"]
+	paths := r.MultipartForm.Value["file_path"]
+	files := make([]services.IncomingFile, 0, len(fileHeaders)+len(shareXHeaders))
+	for index, header := range fileHeaders {
+		name := ""
+		if index < len(paths) {
+			name = paths[index]
+		}
+		files = append(files, namedMultipartFile{header: header, name: name})
+	}
+	for _, header := range shareXHeaders {
+		files = append(files, namedMultipartFile{header: header})
+	}
 	return files
 }

--- a/backend/libs/handlers/upload_stage3_test.go
+++ b/backend/libs/handlers/upload_stage3_test.go
@@ -17,6 +17,7 @@ import (
 	"time"

 	"warpbox.dev/backend/libs/config"
+	"warpbox.dev/backend/libs/jobs"
 	"warpbox.dev/backend/libs/services"
 	"warpbox.dev/backend/libs/web"
 )
@@ -127,7 +128,7 @@ func TestSocialPreviewBotGetsCardForSingleNonMediaBox(t *testing.T) {
 	if !strings.Contains(body, `class="file-thumb" src="/d/`+payload.BoxID+`/thumb/`+payload.Files[0].ID+`"`) {
 		t.Fatalf("download page did not render text thumbnail image: %s", body)
 	}
-	if !strings.Contains(body, "Click to preview or download") && !strings.Contains(body, "click to preview or download") {
+	if !strings.Contains(body, "Open to preview or download") {
 		t.Fatalf("social preview body missing preview/download description: %s", body)
 	}
 }
@@ -218,6 +219,99 @@ func TestFilePreviewPageIncludesPreviewMetadata(t *testing.T) {
 	}
 }

+func TestDownloadPageShowsProcessingFailure(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+	payload := uploadThroughApp(t, app)
+	box, err := app.uploadService.GetBox(payload.BoxID)
+	if err != nil {
+		t.Fatalf("GetBox returned error: %v", err)
+	}
+	box.Files[0].Processing = false
+	box.Files[0].ProcessingError = "Access Denied."
+	if err := app.uploadService.SaveBox(box); err != nil {
+		t.Fatalf("SaveBox returned error: %v", err)
+	}
+
+	request := httptest.NewRequest(http.MethodGet, "/d/"+payload.BoxID, nil)
+	request.SetPathValue("boxID", payload.BoxID)
+	response := httptest.NewRecorder()
+	app.DownloadPage(response, request)
+
+	if response.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", response.Code, response.Body.String())
+	}
+	body := response.Body.String()
+	for _, want := range []string{
+		"Upload processing failed",
+		"Access Denied.",
+		"is-failed",
+		"Failed",
+	} {
+		if !strings.Contains(body, want) {
+			t.Fatalf("download page missing %q: %s", want, body)
+		}
+	}
+	if strings.Contains(body, `data-download-url="/d/`+payload.BoxID+`/f/`+payload.Files[0].ID+`/download"`) {
+		t.Fatalf("failed file still exposed download context: %s", body)
+	}
+}
+
+func TestFileDownloadUsesOriginalFilename(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+	payload := uploadNamedFileThroughApp(t, app, "report final.txt", "hello")
+
+	request := httptest.NewRequest(http.MethodGet, "/d/"+payload.BoxID+"/f/"+payload.Files[0].ID+"/download", nil)
+	request.SetPathValue("boxID", payload.BoxID)
+	request.SetPathValue("fileID", payload.Files[0].ID)
+	response := httptest.NewRecorder()
+	app.DownloadFileContent(response, request)
+
+	if response.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", response.Code, response.Body.String())
+	}
+	disposition := response.Header().Get("Content-Disposition")
+	for _, want := range []string{
+		`attachment;`,
+		`filename="report final.txt"`,
+		`filename*=UTF-8''report%20final.txt`,
+	} {
+		if !strings.Contains(disposition, want) {
+			t.Fatalf("Content-Disposition missing %q: %q", want, disposition)
+		}
+	}
+	if response.Body.String() != "hello" {
+		t.Fatalf("body = %q", response.Body.String())
+	}
+}
+
+func TestInlineFileDownloadKeepsOriginalFilename(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+	payload := uploadNamedFileThroughApp(t, app, "résumé 2026.txt", "hello")
+
+	request := httptest.NewRequest(http.MethodGet, "/d/"+payload.BoxID+"/f/"+payload.Files[0].ID+"/download?inline=1", nil)
+	request.SetPathValue("boxID", payload.BoxID)
+	request.SetPathValue("fileID", payload.Files[0].ID)
+	response := httptest.NewRecorder()
+	app.DownloadFileContent(response, request)
+
+	if response.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", response.Code, response.Body.String())
+	}
+	disposition := response.Header().Get("Content-Disposition")
+	for _, want := range []string{
+		`inline;`,
+		`filename="r_sum_ 2026.txt"`,
+		`filename*=UTF-8''r%C3%A9sum%C3%A9%202026.txt`,
+	} {
+		if !strings.Contains(disposition, want) {
+			t.Fatalf("Content-Disposition missing %q: %q", want, disposition)
+		}
+	}
+}
+
 func TestResumableUploadFlowCreatesNormalBox(t *testing.T) {
 	app, cleanup := newTestApp(t)
 	defer cleanup()
@@ -724,6 +818,7 @@ func newTestApp(t *testing.T) (*App, func()) {
 		t.Fatalf("NewBanService returned error: %v", err)
 	}
 	return NewApp(cfg, logger, renderer, service, authService, settingsService, reactionService, banService), func() {
+		jobs.WaitForThumbnailJobs()
 		if err := service.Close(); err != nil {
 			t.Fatalf("Close returned error: %v", err)
 		}
@@ -731,8 +826,12 @@ func newTestApp(t *testing.T) (*App, func()) {
 }

 func uploadThroughApp(t *testing.T, app *App) services.UploadResult {
+	return uploadNamedFileThroughApp(t, app, "note.txt", "hello")
+}
+
+func uploadNamedFileThroughApp(t *testing.T, app *App, filename, body string) services.UploadResult {
 	t.Helper()
-	request := multipartUploadRequest(t, "/api/v1/upload", "file", "note.txt", "hello")
+	request := multipartUploadRequest(t, "/api/v1/upload", "file", filename, body)
 	request.Header.Set("Accept", "application/json")
 	response := httptest.NewRecorder()
 	app.Upload(response, request)
--- a/backend/libs/jobs/thumbnails.go
+++ b/backend/libs/jobs/thumbnails.go
@@ -22,6 +22,7 @@ import (
 	"sort"
 	"strconv"
 	"strings"
+	"sync"
 	"time"

 	"golang.org/x/image/font"
@@ -38,13 +39,21 @@ type ThumbnailJobResult struct {
 	Failed    int
 }

+var thumbnailJobs sync.WaitGroup
+
 func GenerateThumbnailsForBoxAsync(uploadService *services.UploadService, logger *slog.Logger, boxID string) {
+	thumbnailJobs.Add(1)
 	go func() {
+		defer thumbnailJobs.Done()
 		box, err := uploadService.GetBox(boxID)
 		if err != nil {
 			logger.Warn("thumbnail box lookup failed", "source", "thumbnail", "severity", "warn", "code", 4204, "box_id", boxID, "error", err.Error())
 			return
 		}
+		if services.BoxHasTrouble(box) {
+			logger.Warn("thumbnail one-shot skipped trouble box", "source", "thumbnail", "severity", "warn", "code", 4206, "box_id", boxID, "error", services.BoxTroubleReason(box))
+			return
+		}

 		result, err := generateMissingThumbnailsForBox(uploadService, logger, box)
 		if err != nil {
@@ -57,6 +66,10 @@ func GenerateThumbnailsForBoxAsync(uploadService *services.UploadService, logger
 	}()
 }

+func WaitForThumbnailJobs() {
+	thumbnailJobs.Wait()
+}
+
 func newThumbnailsJob(cfg config.Config, logger *slog.Logger, uploadService *services.UploadService) job {
 	return job{
 		name:     "thumbnail",
@@ -91,6 +104,9 @@ func generateMissingThumbnails(uploadService *services.UploadService, logger *sl
 		if !box.ExpiresAt.After(now) {
 			continue
 		}
+		if services.BoxHasTrouble(box) {
+			continue
+		}

 		boxResult, err := generateMissingThumbnailsForBox(uploadService, logger, box)
 		result.Scanned += boxResult.Scanned
@@ -109,10 +125,16 @@ func generateMissingThumbnailsForBox(uploadService *services.UploadService, logg
 	if !box.ExpiresAt.After(time.Now().UTC()) {
 		return result, nil
 	}
+	if services.BoxHasTrouble(box) {
+		return result, nil
+	}

 	changed := false
 	for i := range box.Files {
 		file := &box.Files[i]
+		if file.Processing || services.FileHasTrouble(*file) {
+			continue
+		}
 		needsPrimary := file.Thumbnail == "" && needsThumbnail(*file)
 		needsScenes := file.SceneThumbnail == "" && needsVideoScenes(*file)
 		needsArchive := !archiveListingCurrent(*file) && needsArchiveListing(*file)
@@ -206,6 +228,15 @@ func GenerateArchiveListingForFile(uploadService *services.UploadService, box se
 }

 func generateThumbnail(uploadService *services.UploadService, box services.Box, file services.File) (string, error) {
+	if services.BoxHasTrouble(box) {
+		return "", fmt.Errorf("box is marked as trouble: %s", services.BoxTroubleReason(box))
+	}
+	if file.Processing {
+		return "", fmt.Errorf("file is still processing")
+	}
+	if services.FileHasTrouble(file) {
+		return "", fmt.Errorf("file processing failed: %s", file.ProcessingError)
+	}
 	thumbnailName := "@thumb@" + file.ID + ".jpg"
 	object, err := uploadService.OpenFileObject(context.Background(), box, file)
 	if err != nil {
@@ -244,6 +275,15 @@ func generateVideoScenesThumbnail(uploadService *services.UploadService, box ser
 	if !needsVideoScenes(file) {
 		return "", nil
 	}
+	if services.BoxHasTrouble(box) {
+		return "", fmt.Errorf("box is marked as trouble: %s", services.BoxTroubleReason(box))
+	}
+	if file.Processing {
+		return "", fmt.Errorf("file is still processing")
+	}
+	if services.FileHasTrouble(file) {
+		return "", fmt.Errorf("file processing failed: %s", file.ProcessingError)
+	}
 	sceneName := "@scene@" + file.ID + ".jpg"
 	object, err := uploadService.OpenFileObject(context.Background(), box, file)
 	if err != nil {
@@ -263,6 +303,15 @@ func generateArchiveListing(uploadService *services.UploadService, box services.
 	if !needsArchiveListing(file) {
 		return "", nil
 	}
+	if services.BoxHasTrouble(box) {
+		return "", fmt.Errorf("box is marked as trouble: %s", services.BoxTroubleReason(box))
+	}
+	if file.Processing {
+		return "", fmt.Errorf("file is still processing")
+	}
+	if services.FileHasTrouble(file) {
+		return "", fmt.Errorf("file processing failed: %s", file.ProcessingError)
+	}
 	listingName := "@archive@" + file.ID + ".json"
 	object, err := uploadService.OpenFileObject(context.Background(), box, file)
 	if err != nil {
--- a/backend/libs/jobs/thumbnails_test.go
+++ b/backend/libs/jobs/thumbnails_test.go
@@ -50,6 +50,36 @@ func TestGenerateMissingThumbnailsForBox(t *testing.T) {
 	}
 }

+func TestGenerateMissingThumbnailsForTroubleBoxSkipsWork(t *testing.T) {
+	service := newThumbnailTestUploadService(t)
+	result := createThumbnailTestBox(t, service)
+	box, err := service.GetBox(result.BoxID)
+	if err != nil {
+		t.Fatalf("GetBox returned error: %v", err)
+	}
+	box.Trouble = true
+	box.TroubleReason = "storage backend failed"
+	if err := service.SaveBox(box); err != nil {
+		t.Fatalf("SaveBox returned error: %v", err)
+	}
+
+	jobResult, err := generateMissingThumbnailsForBox(service, slog.New(slog.NewTextHandler(io.Discard, nil)), box)
+	if err != nil {
+		t.Fatalf("generateMissingThumbnailsForBox returned error: %v", err)
+	}
+	if jobResult != (ThumbnailJobResult{}) {
+		t.Fatalf("job result = %+v, want no work for trouble box", jobResult)
+	}
+
+	updated, err := service.GetBox(result.BoxID)
+	if err != nil {
+		t.Fatalf("GetBox after job returned error: %v", err)
+	}
+	if updated.Files[0].Thumbnail != "" {
+		t.Fatalf("thumbnail was generated for trouble box: %+v", updated.Files[0])
+	}
+}
+
 func TestCreateTextThumbnailRendersMarkdownAsJPEG(t *testing.T) {
 	data, err := createTextThumbnail(services.File{
 		Name:        "notes.md",
--- a/backend/libs/services/resumable.go
+++ b/backend/libs/services/resumable.go
@@ -319,7 +319,7 @@ func (s *UploadService) CreateProcessingBoxFromResumable(sessionID string) (Uplo
 		}
 		box.Files = append(box.Files, File{
 			ID:          fileID,
-			Name:        filepath.Base(incoming.Name),
+			Name:        cleanUploadDisplayName(incoming.Name),
 			StoredName:  storedName,
 			Size:        incoming.Size,
 			ContentType: contentType,
@@ -369,19 +369,20 @@ func (s *UploadService) FinalizeProcessingResumableSession(ctx context.Context,
 	}
 	backend, err := s.storage.Backend(box.StorageBackendID)
 	if err != nil {
+		_ = s.markProcessingBoxFailed(box, err)
 		return UploadResult{}, err
 	}
 	for i, incoming := range staged {
 		source, err := incoming.Open()
 		if err != nil {
+			_ = s.markProcessingBoxFailed(box, err)
 			return UploadResult{}, err
 		}
 		file := box.Files[i]
 		if err := s.writeUploadedObject(ctx, backend, file.ObjectKey, source, incoming.Size(), 0, incoming.ContentType()); err != nil {
 			source.Close()
 			_ = backend.Delete(context.Background(), file.ObjectKey)
-			box.Files[i].ProcessingError = err.Error()
-			_ = s.saveBoxRecord(box)
+			_ = s.markProcessingBoxFailed(box, err)
 			return UploadResult{}, err
 		}
 		source.Close()
@@ -406,6 +407,35 @@ func (s *UploadService) FinalizeProcessingResumableSession(ctx context.Context,
 	return s.resultForBox(box, ""), nil
 }

+func (s *UploadService) markProcessingBoxFailed(box Box, cause error) error {
+	message := "upload processing failed"
+	if cause != nil && strings.TrimSpace(cause.Error()) != "" {
+		message = cause.Error()
+	}
+	s.logger.Warn("resumable upload box marked failed", "source", "user-upload", "severity", "warn", "code", 4021, "box_id", box.ID, "backend_id", s.BoxStorageBackendID(box), "files", len(box.Files), "error", message)
+	now := time.Now().UTC()
+	box.Trouble = true
+	box.TroubleReason = message
+	for i := range box.Files {
+		if box.Files[i].Processing || box.Files[i].ProcessingError == "" {
+			box.Files[i].Processing = false
+			box.Files[i].ProcessingError = message
+			if box.Files[i].UploadedAt.IsZero() {
+				box.Files[i].UploadedAt = now
+			}
+		}
+	}
+	if err := s.saveBoxRecord(box); err != nil {
+		s.logger.Warn("failed to save failed upload box state", "source", "user-upload", "severity", "warn", "code", 4022, "box_id", box.ID, "backend_id", s.BoxStorageBackendID(box), "error", err.Error())
+		return err
+	}
+	if err := s.writeBoxMetadata(box); err != nil {
+		s.logger.Warn("failed to write failed upload box metadata", "source", "user-upload", "severity", "warn", "code", 4023, "box_id", box.ID, "backend_id", s.BoxStorageBackendID(box), "error", err.Error())
+		return err
+	}
+	return nil
+}
+
 func (s *UploadService) CompleteUploadedResumableSession(ctx context.Context, sessionID string) (UploadResult, ResumableSession, error) {
 	session, err := s.GetResumableSession(sessionID)
 	if err != nil {
@@ -527,7 +557,7 @@ func (s *UploadService) saveResumableSession(session ResumableSession) error {
 func (s *UploadService) resumableFilesFromInput(files []ResumableFileInput, opts UploadOptions, chunkSize int64, existing map[string]bool) ([]ResumableFile, error) {
 	sessionFiles := make([]ResumableFile, 0, len(files))
 	for _, file := range files {
-		file.Name = filepath.Base(strings.TrimSpace(file.Name))
+		file.Name = cleanUploadDisplayName(file.Name)
 		if file.Name == "." || file.Name == "" {
 			return nil, fmt.Errorf("file name is required")
 		}
@@ -564,7 +594,7 @@ func (s *UploadService) resumableFilesFromInput(files []ResumableFileInput, opts
 }

 func resumableFileKey(name string, size int64, fingerprint string) string {
-	return strings.TrimSpace(fingerprint) + "|" + filepath.Base(strings.TrimSpace(name)) + "|" + fmt.Sprintf("%d", size)
+	return strings.TrimSpace(fingerprint) + "|" + cleanUploadDisplayName(name) + "|" + fmt.Sprintf("%d", size)
 }

 type resumableIncomingFile struct {
--- a/backend/libs/services/storage_s3.go
+++ b/backend/libs/services/storage_s3.go
@@ -35,26 +35,35 @@ func (b *s3StorageBackend) ID() string   { return b.cfg.ID }
 func (b *s3StorageBackend) Type() string { return StorageBackendS3 }

 func (b *s3StorageBackend) Put(ctx context.Context, key string, body io.Reader, size int64, contentType string) error {
+	cleanKey := cleanObjectKey(key)
 	opts := minio.PutObjectOptions{ContentType: contentType}
-	_, err := b.client.PutObject(ctx, b.cfg.Bucket, cleanObjectKey(key), body, size, opts)
-	return err
+	_, err := b.client.PutObject(ctx, b.cfg.Bucket, cleanKey, body, size, opts)
+	if err != nil {
+		return fmt.Errorf("s3 put object %q in bucket %q failed: %w", cleanKey, b.cfg.Bucket, err)
+	}
+	return nil
 }

 func (b *s3StorageBackend) Get(ctx context.Context, key string) (StorageObject, error) {
-	object, err := b.client.GetObject(ctx, b.cfg.Bucket, cleanObjectKey(key), minio.GetObjectOptions{})
+	cleanKey := cleanObjectKey(key)
+	object, err := b.client.GetObject(ctx, b.cfg.Bucket, cleanKey, minio.GetObjectOptions{})
 	if err != nil {
-		return StorageObject{}, err
+		return StorageObject{}, fmt.Errorf("s3 get object %q from bucket %q failed: %w", cleanKey, b.cfg.Bucket, err)
 	}
 	info, err := object.Stat()
 	if err != nil {
 		object.Close()
-		return StorageObject{}, err
+		return StorageObject{}, fmt.Errorf("s3 stat object %q in bucket %q failed: %w", cleanKey, b.cfg.Bucket, err)
 	}
 	return StorageObject{Key: key, Size: info.Size, ContentType: info.ContentType, ModTime: info.LastModified, Body: object}, nil
 }

 func (b *s3StorageBackend) Delete(ctx context.Context, key string) error {
-	return b.client.RemoveObject(ctx, b.cfg.Bucket, cleanObjectKey(key), minio.RemoveObjectOptions{})
+	cleanKey := cleanObjectKey(key)
+	if err := b.client.RemoveObject(ctx, b.cfg.Bucket, cleanKey, minio.RemoveObjectOptions{}); err != nil {
+		return fmt.Errorf("s3 delete object %q from bucket %q failed: %w", cleanKey, b.cfg.Bucket, err)
+	}
+	return nil
 }

 func (b *s3StorageBackend) DeletePrefix(ctx context.Context, prefix string) error {
@@ -62,7 +71,7 @@ func (b *s3StorageBackend) DeletePrefix(ctx context.Context, prefix string) erro
 	objects := b.client.ListObjects(ctx, b.cfg.Bucket, minio.ListObjectsOptions{Prefix: prefix, Recursive: true})
 	for object := range objects {
 		if object.Err != nil {
-			return object.Err
+			return fmt.Errorf("s3 list prefix %q in bucket %q failed: %w", prefix, b.cfg.Bucket, object.Err)
 		}
 		if err := b.Delete(ctx, object.Key); err != nil {
 			return err
@@ -75,7 +84,7 @@ func (b *s3StorageBackend) Usage(ctx context.Context) (int64, error) {
 	var total int64
 	for object := range b.client.ListObjects(ctx, b.cfg.Bucket, minio.ListObjectsOptions{Recursive: true}) {
 		if object.Err != nil {
-			return 0, object.Err
+			return 0, fmt.Errorf("s3 usage list bucket %q failed: %w", b.cfg.Bucket, object.Err)
 		}
 		total += object.Size
 	}
@@ -85,7 +94,7 @@ func (b *s3StorageBackend) Usage(ctx context.Context) (int64, error) {
 func (b *s3StorageBackend) Test(ctx context.Context) error {
 	exists, err := b.client.BucketExists(ctx, b.cfg.Bucket)
 	if err != nil {
-		return err
+		return fmt.Errorf("s3 bucket check for %q failed: %w", b.cfg.Bucket, err)
 	}
 	if !exists {
 		return fmt.Errorf("bucket %q does not exist", b.cfg.Bucket)
--- a/backend/libs/services/upload.go
+++ b/backend/libs/services/upload.go
@@ -16,6 +16,7 @@ import (
 	"mime/multipart"
 	"net/http"
 	"os"
+	"path"
 	"path/filepath"
 	"sort"
 	"strings"
@@ -117,6 +118,8 @@ type Box struct {
 	Obfuscate        bool      `json:"obfuscate"`
 	CreatorIP        string    `json:"creatorIp,omitempty"`
 	StorageBackendID string    `json:"storageBackendId,omitempty"`
+	Trouble          bool      `json:"trouble,omitempty"`
+	TroubleReason    string    `json:"troubleReason,omitempty"`
 	Files            []File    `json:"files"`
 }

@@ -139,6 +142,37 @@ type File struct {
 	UploadedAt              time.Time `json:"uploadedAt"`
 }

+func BoxHasTrouble(box Box) bool {
+	if box.Trouble || strings.TrimSpace(box.TroubleReason) != "" {
+		return true
+	}
+	for _, file := range box.Files {
+		if FileHasTrouble(file) {
+			return true
+		}
+	}
+	return false
+}
+
+func BoxTroubleReason(box Box) string {
+	if strings.TrimSpace(box.TroubleReason) != "" {
+		return box.TroubleReason
+	}
+	for _, file := range box.Files {
+		if strings.TrimSpace(file.ProcessingError) != "" {
+			return file.ProcessingError
+		}
+	}
+	if box.Trouble {
+		return "box has failed processing"
+	}
+	return ""
+}
+
+func FileHasTrouble(file File) bool {
+	return strings.TrimSpace(file.ProcessingError) != ""
+}
+
 type UploadResult struct {
 	BoxID        string       `json:"boxId"`
 	BoxURL       string       `json:"boxUrl"`
@@ -419,7 +453,7 @@ func (s *UploadService) writeIncomingFilesToBox(ctx context.Context, box *Box, f

 		box.Files = append(box.Files, File{
 			ID:          fileID,
-			Name:        filepath.Base(incoming.Name()),
+			Name:        cleanUploadDisplayName(incoming.Name()),
 			StoredName:  storedName,
 			Size:        incoming.Size(),
 			ContentType: contentType,
@@ -431,6 +465,36 @@ func (s *UploadService) writeIncomingFilesToBox(ctx context.Context, box *Box, f
 	return nil
 }

+func cleanUploadDisplayName(name string) string {
+	clean := strings.TrimSpace(strings.ReplaceAll(name, "\\", "/"))
+	clean = strings.TrimLeft(clean, "/")
+	clean = path.Clean(clean)
+	if clean == "." || clean == "/" || clean == "" {
+		return "download"
+	}
+	parts := strings.Split(clean, "/")
+	safeParts := make([]string, 0, len(parts))
+	for _, part := range parts {
+		part = strings.TrimSpace(part)
+		if part == "" || part == "." || part == ".." {
+			continue
+		}
+		part = strings.Map(func(r rune) rune {
+			if r < 0x20 || r == 0x7f || r == '/' || r == '\\' {
+				return -1
+			}
+			return r
+		}, part)
+		if part != "" {
+			safeParts = append(safeParts, part)
+		}
+	}
+	if len(safeParts) == 0 {
+		return "download"
+	}
+	return strings.Join(safeParts, "/")
+}
+
 func (s *UploadService) GetBox(id string) (Box, error) {
 	var box Box
 	err := s.db.View(func(tx *bbolt.Tx) error {
--- a/backend/libs/services/upload_test.go
+++ b/backend/libs/services/upload_test.go
@@ -230,6 +230,47 @@ func TestResumableCompleteRejectsMissingChunks(t *testing.T) {
 	}
 }

+func TestProcessingResumableFailureMarksBoxFailed(t *testing.T) {
+	service := newTestUploadService(t)
+	session, err := service.CreateResumableSession([]ResumableFileInput{{
+		Name:        "note.txt",
+		Size:        4,
+		ContentType: "text/plain",
+	}}, UploadOptions{MaxDays: 1, StorageBackendID: "missing"}, 4, time.Hour, "")
+	if err != nil {
+		t.Fatalf("CreateResumableSession returned error: %v", err)
+	}
+	if _, err := service.PutResumableChunk(testContext(), session.ID, session.Files[0].ID, 0, strings.NewReader("note")); err != nil {
+		t.Fatalf("PutResumableChunk returned error: %v", err)
+	}
+	result, processing, err := service.CreateProcessingBoxFromResumable(session.ID)
+	if err != nil {
+		t.Fatalf("CreateProcessingBoxFromResumable returned error: %v", err)
+	}
+	if processing.Status != ResumableStatusProcessing {
+		t.Fatalf("session status = %q, want processing", processing.Status)
+	}
+	if _, err := service.FinalizeProcessingResumableSession(testContext(), session.ID); err == nil {
+		t.Fatalf("FinalizeProcessingResumableSession accepted missing backend")
+	}
+	box := getTestBox(t, service, result.BoxID)
+	if len(box.Files) != 1 {
+		t.Fatalf("box files = %+v", box.Files)
+	}
+	if box.Files[0].Processing {
+		t.Fatalf("failed file is still marked processing: %+v", box.Files[0])
+	}
+	if box.Files[0].ProcessingError == "" {
+		t.Fatalf("failed file did not store processing error: %+v", box.Files[0])
+	}
+	if !box.Trouble {
+		t.Fatalf("failed box was not marked as trouble: %+v", box)
+	}
+	if box.TroubleReason == "" {
+		t.Fatalf("failed box did not store trouble reason: %+v", box)
+	}
+}
+
 func TestResumablePartialCompleteKeepsOnlyFinishedFiles(t *testing.T) {
 	service := newTestUploadService(t)
 	session, err := service.CreateResumableSession([]ResumableFileInput{
--- a/backend/static/css/04-dialogs.css
+++ b/backend/static/css/04-dialogs.css
@@ -0,0 +1,263 @@
+.warpbox-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--background) 60%, transparent);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+.warpbox-dialog-overlay.is-visible {
+  opacity: 1;
+}
+
+.warpbox-dialog {
+  position: relative;
+  width: min(28rem, 100%);
+  max-height: min(34rem, 90vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+  color: var(--card-foreground);
+  box-shadow: var(--shadow);
+  opacity: 0;
+  transform: translateY(0.6rem) scale(0.98);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.warpbox-dialog:focus {
+  outline: none;
+}
+
+.warpbox-dialog-overlay.is-visible .warpbox-dialog {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.warpbox-dialog-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: center;
+  padding: 1.1rem 3.25rem 0 1.1rem;
+}
+
+.warpbox-dialog-icon {
+  width: 1.9rem;
+  height: 1.9rem;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 20%, transparent);
+  color: var(--primary);
+  font-weight: 800;
+  line-height: 1;
+}
+
+.warpbox-dialog-warning .warpbox-dialog-icon {
+  background: color-mix(in srgb, var(--primary) 26%, transparent);
+  color: var(--primary-hover);
+}
+
+.warpbox-dialog-error .warpbox-dialog-icon {
+  background: color-mix(in srgb, var(--danger) 18%, transparent);
+  color: var(--danger);
+}
+
+.warpbox-dialog-title {
+  margin: 0;
+  font-size: 1.1rem;
+  line-height: 1.3;
+}
+
+.warpbox-dialog-close {
+  position: absolute;
+  top: 1.1rem;
+  right: 1.1rem;
+  z-index: 2;
+  min-height: 1.9rem;
+  height: 1.9rem;
+  width: 1.9rem;
+  padding: 0;
+  border-color: var(--border);
+  color: var(--muted-foreground);
+  background: var(--surface-1);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.warpbox-dialog-close:hover {
+  color: var(--foreground);
+  background: var(--surface-1-hover);
+}
+
+.warpbox-dialog-body {
+  padding: 0.85rem 1.1rem 1.1rem;
+  overflow: auto;
+}
+
+.warpbox-dialog-message {
+  margin: 0 0 0.75rem;
+  color: var(--muted-foreground);
+  font-size: 0.92rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.warpbox-dialog-message:last-child {
+  margin-bottom: 0;
+}
+
+.warpbox-dialog-field {
+  width: 100%;
+  border: 1px solid var(--input);
+  border-radius: calc(var(--radius) - 0.35rem);
+  background: var(--surface-1);
+  color: var(--foreground);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+}
+
+.warpbox-dialog-field:focus {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+.warpbox-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.55rem;
+  padding: 0 1.1rem 1.1rem;
+}
+
+html.warpbox-dialog-open,
+html.warpbox-dialog-open body {
+  overflow: hidden;
+  touch-action: none;
+}
+
+.dialog-file-list {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  max-height: 14rem;
+  overflow: auto;
+  padding-right: 0.25rem;
+}
+
+.dialog-file-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.35rem);
+  background: var(--surface-1);
+}
+
+.dialog-file-icon {
+  width: 1.35rem;
+  height: 1.35rem;
+  color: var(--muted-foreground);
+}
+
+.dialog-file-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.86rem;
+}
+
+.dialog-file-size {
+  color: var(--muted-foreground);
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+:root[data-theme="retro"] .warpbox-dialog {
+  border: 1px solid #000000;
+  border-radius: 0;
+  background: #c0c0c0;
+  color: #000000;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf, 4px 4px 0 rgba(0, 0, 0, 0.45);
+  font-family: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-head {
+  padding-top: 0.2rem;
+}
+
+:root[data-theme="retro"] .warpbox-dialog::before {
+  content: "Warpbox";
+  display: block;
+  margin: 0.18rem 0.18rem 0;
+  padding: 0.22rem 0.35rem;
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-error::before {
+  content: "Warpbox - Error";
+}
+
+:root[data-theme="retro"] .warpbox-dialog-warning::before {
+  content: "Warpbox - Warning";
+}
+
+:root[data-theme="retro"] .warpbox-dialog-info::before {
+  content: "Warpbox - Info";
+}
+
+:root[data-theme="retro"] .warpbox-dialog-icon {
+  border: 1px solid #000000;
+  background: #ffffff;
+  color: #000078;
+  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-warning .warpbox-dialog-icon {
+  color: #9a5b00;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-error .warpbox-dialog-icon {
+  color: #c00000;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-message {
+  color: #000000;
+}
+
+:root[data-theme="retro"] .warpbox-dialog-close {
+  top: 0.36rem;
+  right: 0.3rem;
+  width: 1.1rem;
+  height: 0.95rem;
+  min-height: 0.95rem;
+  background: #c0c0c0;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+  font-size: 0.6rem;
+  font-weight: 700;
+}
+
+@media (max-width: 640px) {
+  .warpbox-dialog-overlay {
+    padding: 0.75rem;
+  }
+
+  .warpbox-dialog {
+    width: 100%;
+  }
+}
--- a/backend/static/css/16-retro.css
+++ b/backend/static/css/16-retro.css
@@ -655,7 +655,7 @@
  padding: 0;
 }

-:root[data-theme="retro"] .view-toolbar .icon-button svg {
+:root[data-theme="retro"] .view-toolbar .icon-button .svg-icon {
  margin: 0;
  display: block;
 }
--- a/backend/static/css/19-popups.css
+++ b/backend/static/css/19-popups.css
@@ -0,0 +1,173 @@
+.warpbox-popups {
+  position: fixed;
+  z-index: 120;
+  inset-block-start: calc(1rem + env(safe-area-inset-top));
+  inset-inline-end: calc(1rem + env(safe-area-inset-right));
+  width: min(26rem, calc(100vw - 2rem));
+  display: grid;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+.warpbox-popup {
+  pointer-events: auto;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 0.25rem);
+  background: color-mix(in srgb, var(--card) 96%, transparent);
+  color: var(--card-foreground);
+  box-shadow: var(--shadow);
+  opacity: 0;
+  transform: translateY(-0.55rem);
+  transition: opacity 160ms ease, transform 160ms ease;
+  overflow: hidden;
+}
+
+.warpbox-popup.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.warpbox-popup-chrome {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.85rem;
+  align-items: start;
+  padding: 0.95rem;
+}
+
+.warpbox-popup-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 20%, transparent);
+  color: var(--primary);
+  font-weight: 800;
+  line-height: 1;
+}
+
+.warpbox-popup-warning .warpbox-popup-icon {
+  background: color-mix(in srgb, var(--primary) 26%, transparent);
+  color: var(--primary-hover);
+}
+
+.warpbox-popup-error .warpbox-popup-icon {
+  background: color-mix(in srgb, var(--danger) 18%, transparent);
+  color: var(--danger);
+}
+
+.warpbox-popup-title {
+  display: block;
+  margin: 0 0 0.18rem;
+  font-size: 0.92rem;
+  line-height: 1.2;
+}
+
+.warpbox-popup-message {
+  margin: 0;
+  color: var(--muted-foreground);
+  font-size: 0.84rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.warpbox-popup-close {
+  min-height: 1.8rem;
+  width: 1.8rem;
+  padding: 0;
+  border-color: var(--border);
+  color: var(--muted-foreground);
+  background: var(--surface-1);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.warpbox-popup-close:hover {
+  color: var(--foreground);
+  background: var(--surface-1-hover);
+}
+
+.warpbox-popup-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.55rem;
+  padding: 0 0.95rem 0.95rem;
+}
+
+:root[data-theme="retro"] .warpbox-popups {
+  inset-block-start: 2.65rem;
+  font-family: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif;
+}
+
+:root[data-theme="retro"] .warpbox-popup {
+  border: 1px solid #000000;
+  background: #c0c0c0;
+  color: #000000;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf, 3px 3px 0 rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme="retro"] .warpbox-popup::before {
+  content: "Warpbox";
+  display: block;
+  margin: 0.18rem 0.18rem 0;
+  padding: 0.22rem 0.35rem;
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+:root[data-theme="retro"] .warpbox-popup-error::before {
+  content: "Warpbox - Error";
+}
+
+:root[data-theme="retro"] .warpbox-popup-warning::before {
+  content: "Warpbox - Warning";
+}
+
+:root[data-theme="retro"] .warpbox-popup-info::before {
+  content: "Warpbox - Info";
+}
+
+:root[data-theme="retro"] .warpbox-popup-chrome {
+  padding: 0.8rem;
+}
+
+:root[data-theme="retro"] .warpbox-popup-icon {
+  border: 1px solid #000000;
+  background: #ffffff;
+  color: #000078;
+  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .warpbox-popup-warning .warpbox-popup-icon {
+  color: #9a5b00;
+}
+
+:root[data-theme="retro"] .warpbox-popup-error .warpbox-popup-icon {
+  color: #c00000;
+}
+
+:root[data-theme="retro"] .warpbox-popup-message {
+  color: #000000;
+}
+
+:root[data-theme="retro"] .warpbox-popup-close {
+  width: 1.45rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
+  background: #c0c0c0;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+@media (max-width: 640px) {
+  .warpbox-popups {
+    inset-inline: 1rem;
+    width: auto;
+  }
+}
--- a/backend/static/css/20-upload.css
+++ b/backend/static/css/20-upload.css
@@ -56,6 +56,10 @@
  display: none !important;
 }

+.install-pwa-button[hidden] {
+  display: none !important;
+}
+
 .hero-copy {
  text-align: center;
 }
@@ -395,6 +399,10 @@ button {
  text-align: right;
 }

+.upload-file-state-shared {
+  color: var(--primary);
+}
+
 .upload-recovery-overlay {
  position: fixed;
  inset: 0;
--- a/backend/static/css/30-download.css
+++ b/backend/static/css/30-download.css
@@ -678,7 +678,54 @@
  color: var(--muted-foreground);
 }

-.file-emblem svg {
+.svg-icon {
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: currentColor;
+  vertical-align: -0.125em;
+  mask: var(--svg-icon-url) center / contain no-repeat;
+  -webkit-mask: var(--svg-icon-url) center / contain no-repeat;
+}
+
+.svg-icon-document {
+  --svg-icon-url: url("/static/icons/regular/submit-document.svg");
+}
+
+.svg-icon-share {
+  --svg-icon-url: url("/static/icons/regular/share-android.svg");
+}
+
+.svg-icon-download {
+  --svg-icon-url: url("/static/icons/regular/download.svg");
+}
+
+.svg-icon-list {
+  --svg-icon-url: url("/static/icons/regular/list.svg");
+}
+
+.svg-icon-grid {
+  --svg-icon-url: url("/static/icons/regular/view-grid.svg");
+}
+
+.svg-icon-emoji {
+  --svg-icon-url: url("/static/icons/regular/emoji.svg");
+}
+
+.svg-icon-open {
+  --svg-icon-url: url("/static/icons/regular/open-in-browser.svg");
+}
+
+.svg-icon-copy {
+  --svg-icon-url: url("/static/icons/regular/copy.svg");
+}
+
+.svg-icon-eye {
+  --svg-icon-url: url("/static/icons/regular/eye.svg");
+}
+
+.file-emblem .svg-icon {
  width: 1.75rem;
  height: 1.75rem;
 }
@@ -698,6 +745,17 @@
  text-decoration: none;
 }

+.button.is-disabled {
+  opacity: .62;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.download-share-button {
+  margin-top: 1rem;
+  margin-bottom: 0.65rem;
+}
+
 .upload-processing-alert {
  margin: 1rem 0;
  padding: .85rem 1rem;
@@ -707,6 +765,11 @@
  color: var(--foreground);
 }

+.upload-processing-alert-error {
+  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+}
+
 .thumb-link {
  flex: 0 0 4.75rem;
  width: 4.75rem;
@@ -812,7 +875,7 @@
  justify-content: center;
 }

-.view-toolbar svg {
+.view-toolbar .svg-icon {
  width: 0.95rem;
  height: 0.95rem;
 }
@@ -870,6 +933,24 @@
  cursor: wait;
 }

+.file-card.is-failed {
+  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
+  background: color-mix(in srgb, var(--danger) 8%, var(--background));
+}
+
+.file-card.is-failed .file-open {
+  cursor: not-allowed;
+}
+
+.file-error {
+  display: block;
+  max-width: 100%;
+  margin-top: 0.18rem;
+  color: var(--danger);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
 .file-reaction-dock {
  position: static;
  z-index: 2;
@@ -963,14 +1044,9 @@
  pointer-events: auto;
 }

-.reaction-button svg {
+.reaction-button .svg-icon {
  width: 1.15rem;
  height: 1.15rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.9;
-  stroke-linecap: round;
-  stroke-linejoin: round;
 }

 .file-card:hover .reaction-button,
--- a/backend/static/js/02-pwa.js
+++ b/backend/static/js/02-pwa.js
@@ -0,0 +1,43 @@
+(function () {
+  let installPrompt = null;
+
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker.register("/service-worker.js").catch(() => {
+        /* Service workers are progressive enhancement here. */
+      });
+    });
+  }
+
+  window.addEventListener("beforeinstallprompt", (event) => {
+    const button = document.querySelector("[data-install-pwa]");
+    if (!button) {
+      return;
+    }
+    event.preventDefault();
+    installPrompt = event;
+    button.hidden = false;
+    button.addEventListener("click", async () => {
+      if (!installPrompt) {
+        return;
+      }
+      button.disabled = true;
+      try {
+        await installPrompt.prompt();
+        await installPrompt.userChoice;
+      } finally {
+        installPrompt = null;
+        button.hidden = true;
+        button.disabled = false;
+      }
+    }, { once: true });
+  });
+
+  window.addEventListener("appinstalled", () => {
+    const button = document.querySelector("[data-install-pwa]");
+    if (button) {
+      button.hidden = true;
+    }
+    installPrompt = null;
+  });
+})();
--- a/backend/static/js/03-popups.js
+++ b/backend/static/js/03-popups.js
@@ -0,0 +1,174 @@
+(function () {
+  const DEFAULT_DURATION = 6200;
+  const VARIANTS = ["info", "warning", "error"];
+  const GENERIC_ERROR_MESSAGE = "Something went wrong on this page. Please try again in a moment.";
+
+  window.Warpbox = window.Warpbox || {};
+  let lastGlobalErrorAt = 0;
+
+  function ensureRegion() {
+    let region = document.querySelector("[data-warpbox-popups]");
+    if (region) {
+      return region;
+    }
+    region = document.createElement("div");
+    region.className = "warpbox-popups";
+    region.setAttribute("data-warpbox-popups", "");
+    region.setAttribute("aria-live", "polite");
+    region.setAttribute("aria-atomic", "false");
+    document.body.append(region);
+    return region;
+  }
+
+  function normalizeOptions(options, message) {
+    if (typeof options === "string") {
+      options = { message: options };
+    } else {
+      options = options || {};
+    }
+    if (message) {
+      options.message = message;
+    }
+    const variant = VARIANTS.includes(options.variant) ? options.variant : "info";
+    return {
+      variant,
+      title: options.title || defaultTitle(variant),
+      message: options.message || "",
+      duration: Number.isFinite(options.duration) ? options.duration : DEFAULT_DURATION,
+      actions: Array.isArray(options.actions) ? options.actions : [],
+    };
+  }
+
+  function defaultTitle(variant) {
+    if (variant === "error") {
+      return "Error";
+    }
+    if (variant === "warning") {
+      return "Warning";
+    }
+    return "Info";
+  }
+
+  function notify(options, message) {
+    const config = normalizeOptions(options, message);
+    const region = ensureRegion();
+    const popup = document.createElement("section");
+    popup.className = "warpbox-popup warpbox-popup-" + config.variant;
+    popup.setAttribute("role", config.variant === "error" ? "alert" : "status");
+
+    const chrome = document.createElement("div");
+    chrome.className = "warpbox-popup-chrome";
+
+    const icon = document.createElement("span");
+    icon.className = "warpbox-popup-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.textContent = config.variant === "error" ? "!" : config.variant === "warning" ? "?" : "i";
+
+    const body = document.createElement("div");
+    body.className = "warpbox-popup-body";
+
+    const title = document.createElement("strong");
+    title.className = "warpbox-popup-title";
+    title.textContent = config.title;
+
+    const text = document.createElement("p");
+    text.className = "warpbox-popup-message";
+    text.textContent = config.message;
+
+    body.append(title, text);
+
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "warpbox-popup-close";
+    close.setAttribute("aria-label", "Dismiss notification");
+    close.textContent = "x";
+    close.addEventListener("click", () => dismiss(popup));
+
+    chrome.append(icon, body, close);
+    popup.append(chrome);
+
+    if (config.actions.length > 0) {
+      const actions = document.createElement("div");
+      actions.className = "warpbox-popup-actions";
+      config.actions.forEach((action) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "button " + (action.kind === "primary" ? "button-primary" : "button-outline");
+        button.textContent = action.label || "Action";
+        button.addEventListener("click", () => {
+          if (typeof action.onClick === "function") {
+            action.onClick();
+          }
+          if (action.dismiss !== false) {
+            dismiss(popup);
+          }
+        });
+        actions.append(button);
+      });
+      popup.append(actions);
+    }
+
+    region.append(popup);
+    window.requestAnimationFrame(() => popup.classList.add("is-visible"));
+
+    let timer = null;
+    if (config.duration > 0) {
+      timer = window.setTimeout(() => dismiss(popup), config.duration);
+    }
+
+    return {
+      element: popup,
+      close: function closePopup() {
+        if (timer) {
+          window.clearTimeout(timer);
+        }
+        dismiss(popup);
+      },
+    };
+  }
+
+  function dismiss(popup) {
+    if (!popup || popup.dataset.closing === "true") {
+      return;
+    }
+    popup.dataset.closing = "true";
+    popup.classList.remove("is-visible");
+    window.setTimeout(() => popup.remove(), 180);
+  }
+
+  window.Warpbox.notify = notify;
+  window.Warpbox.info = function info(message, options) {
+    return notify({ ...(options || {}), variant: "info", message });
+  };
+  window.Warpbox.warning = function warning(message, options) {
+    return notify({ ...(options || {}), variant: "warning", message });
+  };
+  window.Warpbox.error = function error(message, options) {
+    return notify({ ...(options || {}), variant: "error", message });
+  };
+
+  function showGlobalError() {
+    const now = Date.now();
+    if (now - lastGlobalErrorAt < 2500) {
+      return;
+    }
+    lastGlobalErrorAt = now;
+    notify({
+      variant: "error",
+      title: "Page error",
+      message: GENERIC_ERROR_MESSAGE,
+      duration: 9000,
+    });
+  }
+
+  window.addEventListener("error", function (event) {
+    if (event && event.target && event.target !== window) {
+      return;
+    }
+    showGlobalError();
+  });
+
+  window.addEventListener("unhandledrejection", function () {
+    showGlobalError();
+  });
+})();
--- a/backend/static/js/04-dialogs.js
+++ b/backend/static/js/04-dialogs.js
@@ -0,0 +1,299 @@
+(function () {
+  const VARIANTS = ["info", "warning", "error"];
+  const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  window.Warpbox = window.Warpbox || {};
+  let dialogIdCounter = 0;
+
+  function defaultTitle(variant) {
+    if (variant === "error") {
+      return "Error";
+    }
+    if (variant === "warning") {
+      return "Warning";
+    }
+    return "Info";
+  }
+
+  function normalizeOptions(options, message) {
+    if (typeof options === "string") {
+      options = { message: options };
+    } else {
+      options = options || {};
+    }
+    if (message) {
+      options.message = message;
+    }
+    const variant = VARIANTS.includes(options.variant) ? options.variant : "info";
+    return {
+      variant,
+      title: options.title || defaultTitle(variant),
+      message: options.message || "",
+      body: options.body || null,
+      actions: Array.isArray(options.actions) ? options.actions : [],
+      dismissible: options.dismissible !== false,
+      closable: options.closable !== false,
+      onClose: typeof options.onClose === "function" ? options.onClose : null,
+    };
+  }
+
+  function focusableElements(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetParent !== null);
+  }
+
+  function dialog(options, message) {
+    const config = normalizeOptions(options, message);
+    const previouslyFocused = document.activeElement;
+    dialogIdCounter += 1;
+    const titleId = "warpbox-dialog-title-" + dialogIdCounter;
+
+    const overlay = document.createElement("div");
+    overlay.className = "warpbox-dialog-overlay";
+
+    const card = document.createElement("div");
+    card.className = "warpbox-dialog warpbox-dialog-" + config.variant;
+    card.setAttribute("role", config.variant === "error" ? "alertdialog" : "dialog");
+    card.setAttribute("aria-modal", "true");
+    card.setAttribute("aria-labelledby", titleId);
+    card.setAttribute("tabindex", "-1");
+
+    const head = document.createElement("div");
+    head.className = "warpbox-dialog-head";
+
+    const icon = document.createElement("span");
+    icon.className = "warpbox-dialog-icon";
+    icon.setAttribute("aria-hidden", "true");
+    icon.textContent = config.variant === "error" ? "!" : config.variant === "warning" ? "?" : "i";
+
+    const title = document.createElement("h2");
+    title.id = titleId;
+    title.className = "warpbox-dialog-title";
+    title.textContent = config.title;
+
+    head.append(icon, title);
+
+    if (config.closable) {
+      const close = document.createElement("button");
+      close.type = "button";
+      close.className = "warpbox-dialog-close";
+      close.setAttribute("aria-label", "Close dialog");
+      close.textContent = "x";
+      close.addEventListener("click", () => closeDialog());
+      head.append(close);
+    }
+
+    const body = document.createElement("div");
+    body.className = "warpbox-dialog-body";
+
+    if (config.message) {
+      const text = document.createElement("p");
+      text.className = "warpbox-dialog-message";
+      text.textContent = config.message;
+      body.append(text);
+    }
+
+    if (config.body) {
+      const nodes = Array.isArray(config.body) ? config.body : [config.body];
+      nodes.forEach((node) => {
+        if (node instanceof Node) {
+          body.append(node);
+        }
+      });
+    }
+
+    card.append(head, body);
+
+    let autofocusTarget = null;
+    if (config.actions.length > 0) {
+      const actions = document.createElement("div");
+      actions.className = "warpbox-dialog-actions";
+      config.actions.forEach((action) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "button " + (action.kind === "primary" ? "button-primary" : action.kind === "ghost" ? "button-ghost" : "button-outline");
+        button.textContent = action.label || "OK";
+        button.addEventListener("click", () => {
+          if (typeof action.onClick === "function") {
+            action.onClick();
+          }
+          if (action.dismiss !== false) {
+            closeDialog();
+          }
+        });
+        if (action.autofocus) {
+          autofocusTarget = button;
+        }
+        actions.append(button);
+      });
+      card.append(actions);
+    }
+
+    overlay.append(card);
+    document.body.append(overlay);
+    document.documentElement.classList.add("warpbox-dialog-open");
+    window.requestAnimationFrame(() => {
+      overlay.classList.add("is-visible");
+      (autofocusTarget || card).focus();
+    });
+
+    function handleKeydown(event) {
+      if (event.key === "Escape") {
+        if (config.dismissible) {
+          event.preventDefault();
+          closeDialog();
+        }
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const focusable = focusableElements(card);
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    function handleOverlayClick(event) {
+      if (config.dismissible && event.target === overlay) {
+        closeDialog();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeydown, true);
+    overlay.addEventListener("click", handleOverlayClick);
+
+    let closed = false;
+    function closeDialog() {
+      if (closed) {
+        return;
+      }
+      closed = true;
+      document.removeEventListener("keydown", handleKeydown, true);
+      overlay.removeEventListener("click", handleOverlayClick);
+      overlay.classList.remove("is-visible");
+      document.documentElement.classList.remove("warpbox-dialog-open");
+      window.setTimeout(() => overlay.remove(), 180);
+      if (previouslyFocused && typeof previouslyFocused.focus === "function") {
+        previouslyFocused.focus();
+      }
+      if (config.onClose) {
+        config.onClose();
+      }
+    }
+
+    return {
+      element: overlay,
+      close: closeDialog,
+    };
+  }
+
+  window.Warpbox.dialog = dialog;
+
+  window.Warpbox.alertDialog = function alertDialog(message, options) {
+    const config = (typeof options === "object" && options) || {};
+    return new Promise((resolve) => {
+      dialog({
+        ...config,
+        message: typeof message === "string" ? message : config.message,
+        actions: [{ label: config.okLabel || "OK", kind: "primary", autofocus: true }],
+        onClose: () => {
+          if (typeof config.onClose === "function") {
+            config.onClose();
+          }
+          resolve();
+        },
+      });
+    });
+  };
+
+  window.Warpbox.confirmDialog = function confirmDialog(message, options) {
+    const config = (typeof options === "object" && options) || {};
+    return new Promise((resolve) => {
+      let settled = false;
+      function settle(value) {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        resolve(value);
+      }
+      dialog({
+        ...config,
+        message: typeof message === "string" ? message : config.message,
+        actions: [
+          { label: config.cancelLabel || "Cancel", kind: "outline", autofocus: true, onClick: () => settle(false) },
+          { label: config.confirmLabel || "Confirm", kind: "primary", onClick: () => settle(true) },
+        ],
+        onClose: () => {
+          if (typeof config.onClose === "function") {
+            config.onClose();
+          }
+          settle(false);
+        },
+      });
+    });
+  };
+
+  window.Warpbox.promptDialog = function promptDialog(message, options) {
+    const config = (typeof options === "object" && options) || {};
+    return new Promise((resolve) => {
+      let settled = false;
+      function settle(value) {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        resolve(value);
+      }
+
+      const field = document.createElement("input");
+      field.type = config.inputType || "text";
+      field.className = "warpbox-dialog-field";
+      if (config.placeholder) {
+        field.placeholder = config.placeholder;
+      }
+      if (typeof config.value === "string") {
+        field.value = config.value;
+      }
+
+      let controller = null;
+      field.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          settle(field.value);
+          if (controller) {
+            controller.close();
+          }
+        }
+      });
+
+      controller = dialog({
+        ...config,
+        message: typeof message === "string" ? message : config.message,
+        body: field,
+        actions: [
+          { label: config.cancelLabel || "Cancel", kind: "outline", onClick: () => settle(null) },
+          { label: config.okLabel || "OK", kind: "primary", onClick: () => settle(field.value) },
+        ],
+        onClose: () => {
+          if (typeof config.onClose === "function") {
+            config.onClose();
+          }
+          settle(null);
+        },
+      });
+
+      window.requestAnimationFrame(() => field.focus());
+    });
+  };
+})();
--- a/backend/static/js/13-share.js
+++ b/backend/static/js/13-share.js
@@ -0,0 +1,50 @@
+(function () {
+  const shareButtons = document.querySelectorAll("[data-share-box]");
+  if (shareButtons.length === 0) {
+    return;
+  }
+
+  shareButtons.forEach((button) => {
+    const label = button.querySelector("[data-share-box-label]") || button;
+    const shareData = {
+      title: button.dataset.shareTitle || document.title,
+      text: button.dataset.shareText || "",
+      url: window.Warpbox.absoluteURL(button.dataset.shareUrl || window.location.href),
+    };
+    const canShare = typeof navigator.share === "function" && (!navigator.canShare || navigator.canShare(shareData));
+
+    label.textContent = canShare ? "Share" : "Copy Link";
+    button.setAttribute("aria-label", canShare ? "Share this box" : "Copy box link");
+
+    button.addEventListener("click", async () => {
+      if (canShare) {
+        try {
+          await navigator.share(shareData);
+          return;
+        } catch (error) {
+          if (error && error.name === "AbortError") {
+            return;
+          }
+        }
+      }
+      await copyShareURL(button, label, shareData.url, canShare);
+    });
+  });
+
+  async function copyShareURL(button, label, url, shareMode) {
+    try {
+      await window.Warpbox.writeClipboard(url);
+      const previous = label.textContent;
+      label.textContent = "Copied";
+      window.setTimeout(() => {
+        label.textContent = shareMode ? "Share" : "Copy Link";
+      }, 1400);
+    } catch (error) {
+      if (window.Warpbox && typeof window.Warpbox.error === "function") {
+        window.Warpbox.error("The share link could not be copied.", {
+          title: "Copy failed",
+        });
+      }
+    }
+  }
+})();
--- a/backend/static/js/40-upload.js
+++ b/backend/static/js/40-upload.js
@@ -14,7 +14,11 @@
  const openBox = document.querySelector("#open-box");
  const manageLink = document.querySelector("#manage-link");
  const newUpload = document.querySelector("#new-upload");
+  const folderPicker = document.querySelector("[data-folder-picker]");
  const RESUMABLE_SESSIONS_KEY = "warpbox-resumable-sessions";
+  const SHARE_CACHE = "warpbox-share-target-v1";
+  const SHARE_LATEST_KEY = "/__warpbox_share_target__/latest";
+  const CELLULAR_WARNING_THRESHOLD_BYTES = 200 * 1024 * 1024;

  if (!form || !dropZone || !fileInput) {
    return;
@@ -47,6 +51,9 @@
  let uploadLocked = false;
  let recoveredDraft = null;
  let resumeMode = false;
+  let sharedTargetDraft = null;
+  const maxUploadBytes = parseInt(form.dataset.maxUploadBytes || "-1", 10);
+  const maxUploadLabel = form.dataset.maxUploadLabel || (maxUploadBytes > 0 && window.Warpbox.formatBytes ? window.Warpbox.formatBytes(maxUploadBytes) : "the configured limit");

  ["dragenter", "dragover"].forEach((eventName) => {
    dropZone.addEventListener(eventName, (event) => {
@@ -69,18 +76,18 @@
  });

  document.addEventListener("drop", (event) => {
-    if (!event.dataTransfer || !event.dataTransfer.files.length) {
+    if (!hasTransferFiles(event.dataTransfer)) {
      return;
    }
    event.preventDefault();
    if (!dropZone.contains(event.target)) {
-      addSelectedFiles(event.dataTransfer.files);
+      addDroppedFiles(event.dataTransfer);
    }
  });

  dropZone.addEventListener("drop", (event) => {
-    if (event.dataTransfer && event.dataTransfer.files.length > 0) {
-      addSelectedFiles(event.dataTransfer.files);
+    if (hasTransferFiles(event.dataTransfer)) {
+      addDroppedFiles(event.dataTransfer);
    }
  });

@@ -89,15 +96,58 @@
    fileInput.value = "";
  });

+  document.addEventListener("paste", (event) => {
+    if (!event.clipboardData || !event.clipboardData.files || event.clipboardData.files.length === 0) {
+      return;
+    }
+    if (isTextEditingTarget(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    addSelectedFiles(event.clipboardData.files, { source: "pasted" });
+  });
+
+  if (folderPicker && typeof window.showDirectoryPicker === "function") {
+    folderPicker.hidden = false;
+    folderPicker.addEventListener("click", async () => {
+      if (uploadLocked) {
+        return;
+      }
+      try {
+        updateStatus("Reading folder...");
+        const directory = await window.showDirectoryPicker();
+        const files = await filesFromDirectoryHandle(directory, directory.name || "");
+        addSelectedFiles(files, { source: "folder" });
+      } catch (error) {
+        if (!error || error.name !== "AbortError") {
+          updateStatus("Folder could not be read.");
+        }
+      }
+    });
+  }
+
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    if (selectedFiles.length === 0) {
      updateStatus("Choose at least one file first.");
+      notify("warning", "Choose at least one file first.", {
+        title: "No files selected",
+      });
      return;
    }
+    if (!validateSelectedFilesWithinLimit(selectedFiles)) {
+      return;
+    }
+    if (isSlowOrMeteredConnection() && totalSelectedBytes(selectedFiles) >= CELLULAR_WARNING_THRESHOLD_BYTES) {
+      const proceed = await confirmCellularUpload(selectedFiles);
+      if (!proceed) {
+        return;
+      }
+    }

    const submit = form.querySelector("button[type='submit']");
    const formData = uploadFormData();
+    await maybeRequestUploadNotificationPermission(selectedFiles);
    if (resumeMode && recoveredDraft) {
      renderResumeQueue(recoveredDraft.session, selectedFiles);
    } else {
@@ -108,8 +158,11 @@
    try {
      const payload = await uploadResumable(form.action, formData, selectedFiles);
      renderResult(payload);
+      showUploadNotification("Warpbox upload complete", `${payload.files.length} file${payload.files.length === 1 ? "" : "s"} uploaded.`, payload.boxUrl);
+      await clearSharedTargetPayload();
      form.reset();
      selectedFiles = [];
+      sharedTargetDraft = null;
      resumeMode = false;
      recoveredDraft = null;
      fileInput.value = "";
@@ -123,6 +176,8 @@
      }
    } catch (error) {
      updateStatus(error.message || "Upload failed");
+      notifyUploadError(error);
+      showUploadNotification("Warpbox upload failed", error.message || "Upload failed");
    } finally {
      setLoading(false, submit);
    }
@@ -136,26 +191,388 @@

  if (newUpload) {
    newUpload.addEventListener("click", () => {
+      if (sharedTargetDraft) {
+        clearSharedTargetPayload().finally(() => resetFreshUploadState());
+        return;
+      }
      cancelRecoveredDraft().catch((error) => {
        updateStatus(error.message || "Upload draft could not be deleted");
      });
    });
  }

-  recoverResumableSessions();
+  if (isShareTargetLaunch()) {
+    loadSharedTargetFiles();
+  } else {
+    recoverResumableSessions();
+  }

-  function addSelectedFiles(files) {
+  function addSelectedFiles(files, options) {
    if (uploadLocked) {
      return;
    }
+    const rejected = [];
    Array.from(files || []).forEach((file) => {
+      if (fileExceedsUploadLimit(file)) {
+        rejected.push(file);
+        return;
+      }
      if (!selectedFiles.some((existing) => fileIdentity(existing) === fileIdentity(file))) {
        selectedFiles.push(file);
      }
    });
+    if (rejected.length > 0) {
+      notifyRejectedFiles(rejected);
+    }
+    if (options && options.source === "pasted" && files && files.length > 0) {
+      updateStatus(`${files.length} pasted file${files.length === 1 ? "" : "s"} ready.`);
+    }
+    if (options && options.source === "folder" && files && files.length > 0) {
+      updateStatus(`${files.length} folder file${files.length === 1 ? "" : "s"} ready.`);
+    }
    updateSelectedState();
  }

+  async function addDroppedFiles(dataTransfer) {
+    if (uploadLocked) {
+      return;
+    }
+    const files = await filesFromDataTransfer(dataTransfer);
+    addSelectedFiles(files, { source: hasDirectoryItems(dataTransfer) ? "folder" : "dropped" });
+  }
+
+  async function filesFromDataTransfer(dataTransfer) {
+    const items = Array.from(dataTransfer.items || []);
+    const entries = items
+      .map((item) => typeof item.webkitGetAsEntry === "function" ? item.webkitGetAsEntry() : null)
+      .filter(Boolean);
+    if (entries.length === 0) {
+      return Array.from(dataTransfer.files || []);
+    }
+    const nested = await Promise.all(entries.map((entry) => filesFromEntry(entry, "")));
+    return nested.flat();
+  }
+
+  function hasDirectoryItems(dataTransfer) {
+    return Array.from(dataTransfer.items || []).some((item) => {
+      const entry = typeof item.webkitGetAsEntry === "function" ? item.webkitGetAsEntry() : null;
+      return entry && entry.isDirectory;
+    });
+  }
+
+  function hasTransferFiles(dataTransfer) {
+    if (!dataTransfer) {
+      return false;
+    }
+    if (dataTransfer.files && dataTransfer.files.length > 0) {
+      return true;
+    }
+    return Array.from(dataTransfer.items || []).some((item) => item.kind === "file");
+  }
+
+  function filesFromEntry(entry, parentPath) {
+    if (!entry) {
+      return Promise.resolve([]);
+    }
+    const relativePath = parentPath ? `${parentPath}/${entry.name}` : entry.name;
+    if (entry.isFile) {
+      return new Promise((resolve) => {
+        entry.file((file) => resolve([withRelativePath(file, relativePath)]), () => resolve([]));
+      });
+    }
+    if (!entry.isDirectory) {
+      return Promise.resolve([]);
+    }
+    const reader = entry.createReader();
+    const children = [];
+    return new Promise((resolve) => {
+      const readBatch = () => {
+        reader.readEntries(async (entries) => {
+          if (!entries.length) {
+            const nested = await Promise.all(children.map((child) => filesFromEntry(child, relativePath)));
+            resolve(nested.flat());
+            return;
+          }
+          children.push(...entries);
+          readBatch();
+        }, () => resolve([]));
+      };
+      readBatch();
+    });
+  }
+
+  async function filesFromDirectoryHandle(directory, parentPath) {
+    const files = [];
+    for await (const [name, handle] of directory.entries()) {
+      const relativePath = parentPath ? `${parentPath}/${name}` : name;
+      if (handle.kind === "file") {
+        const file = await handle.getFile();
+        files.push(withRelativePath(file, relativePath));
+      } else if (handle.kind === "directory") {
+        files.push(...await filesFromDirectoryHandle(handle, relativePath));
+      }
+    }
+    return files;
+  }
+
+  function withRelativePath(file, relativePath) {
+    if (!file || !relativePath) {
+      return file;
+    }
+    try {
+      Object.defineProperty(file, "warpboxRelativePath", {
+        value: normalizeRelativePath(relativePath),
+        configurable: true,
+      });
+    } catch (error) {
+      file.warpboxRelativePath = normalizeRelativePath(relativePath);
+    }
+    return file;
+  }
+
+  function normalizeRelativePath(value) {
+    return String(value || "")
+      .replace(/\\/g, "/")
+      .split("/")
+      .filter((part) => part && part !== "." && part !== "..")
+      .join("/");
+  }
+
+  function uploadName(file) {
+    return normalizeRelativePath(file && (file.warpboxRelativePath || file.webkitRelativePath || file.name)) || (file && file.name) || "file";
+  }
+
+  function isTextEditingTarget(target) {
+    if (!target) {
+      return false;
+    }
+    const tag = (target.tagName || "").toLowerCase();
+    return tag === "input" || tag === "textarea" || target.isContentEditable;
+  }
+
+  function fileExceedsUploadLimit(file) {
+    return Number.isFinite(maxUploadBytes) && maxUploadBytes > 0 && file && file.size > maxUploadBytes;
+  }
+
+  function validateSelectedFilesWithinLimit(files) {
+    const rejected = Array.from(files || []).filter(fileExceedsUploadLimit);
+    if (rejected.length === 0) {
+      return true;
+    }
+    selectedFiles = selectedFiles.filter((file) => !fileExceedsUploadLimit(file));
+    notifyRejectedFiles(rejected);
+    updateSelectedState();
+    return false;
+  }
+
+  function notifyRejectedFiles(files) {
+    const names = files.slice(0, 3).map((file) => `"${file.name}" (${window.Warpbox.formatBytes(file.size)})`).join(", ");
+    const extra = files.length > 3 ? `, and ${files.length - 3} more` : "";
+    const message = `${names}${extra} ${files.length === 1 ? "is" : "are"} over the ${maxUploadLabel} upload limit.`;
+    updateStatus(message);
+    notify("error", message, {
+      title: "Upload limit exceeded",
+      duration: 9000,
+    });
+  }
+
+  function notifyUploadError(error) {
+    const message = error && error.message ? error.message : "Upload failed";
+    const lower = message.toLowerCase();
+    const isLimit = lower.includes("limit") || lower.includes("quota") || lower.includes("too large") || lower.includes("exceeds");
+    notify("error", message, {
+      title: isLimit ? "Upload limit reached" : "Upload failed",
+      duration: isLimit ? 9000 : 7200,
+    });
+  }
+
+  async function maybeRequestUploadNotificationPermission(files) {
+    if (!("Notification" in window) || Notification.permission !== "default" || totalSelectedBytes(files) < CELLULAR_WARNING_THRESHOLD_BYTES) {
+      return;
+    }
+    try {
+      await Notification.requestPermission();
+    } catch (error) {
+      /* notification permission is optional */
+    }
+  }
+
+  async function showUploadNotification(title, body, url) {
+    if (!("Notification" in window) || Notification.permission !== "granted") {
+      return;
+    }
+    if (document.visibilityState === "visible") {
+      return;
+    }
+    const options = {
+      body,
+      icon: "/static/android-chrome-192x192.png",
+      badge: "/static/favicon-32x32.png",
+      data: { url: window.Warpbox.absoluteURL(url || "/") },
+    };
+    try {
+      const registration = navigator.serviceWorker ? await navigator.serviceWorker.ready : null;
+      if (registration && registration.showNotification) {
+        await registration.showNotification(title, options);
+        return;
+      }
+    } catch (error) {
+      /* fall through to page notification */
+    }
+    try {
+      const notification = new Notification(title, options);
+      notification.onclick = () => {
+        window.focus();
+        if (url) {
+          window.location.href = window.Warpbox.absoluteURL(url);
+        }
+        notification.close();
+      };
+    } catch (error) {
+      /* notifications are best-effort */
+    }
+  }
+
+  function notify(variant, message, options) {
+    if (window.Warpbox && typeof window.Warpbox.notify === "function") {
+      window.Warpbox.notify({ ...(options || {}), variant, message });
+    }
+  }
+
+  function isSlowOrMeteredConnection() {
+    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+    if (!connection) {
+      return false;
+    }
+    if (connection.saveData === true) {
+      return true;
+    }
+    return ["slow-2g", "2g", "3g"].includes(connection.effectiveType);
+  }
+
+  function totalSelectedBytes(files) {
+    return files.reduce((sum, file) => sum + file.size, 0);
+  }
+
+  function confirmCellularUpload(files) {
+    const list = document.createElement("div");
+    list.className = "dialog-file-list";
+    files.forEach((file) => {
+      const icon = document.createElement("span");
+      icon.className = "svg-icon svg-icon-document dialog-file-icon";
+      icon.setAttribute("aria-hidden", "true");
+
+      const name = document.createElement("span");
+      name.className = "dialog-file-name";
+      name.textContent = file.name;
+      name.title = file.name;
+
+      const size = document.createElement("span");
+      size.className = "dialog-file-size";
+      size.textContent = window.Warpbox.formatBytes(file.size);
+
+      const row = document.createElement("div");
+      row.className = "dialog-file-row";
+      row.append(icon, name, size);
+      list.append(row);
+    });
+
+    const totalLabel = window.Warpbox.formatBytes(totalSelectedBytes(files));
+    const message = `You're on a slow or metered connection. You're about to upload ${files.length} file${files.length === 1 ? "" : "s"} (${totalLabel} total) — this could take a while or use up your data plan.`;
+
+    return window.Warpbox.confirmDialog(message, {
+      title: "Slow connection detected",
+      variant: "warning",
+      body: list,
+      confirmLabel: "Upload anyway",
+      cancelLabel: "Cancel",
+    });
+  }
+
+  function isShareTargetLaunch() {
+    const params = new URLSearchParams(window.location.search || "");
+    return params.has("share-target");
+  }
+
+  async function loadSharedTargetFiles() {
+    if (!("caches" in window) || typeof File === "undefined") {
+      updateStatus("Shared files could not be loaded in this browser.");
+      recoverResumableSessions();
+      return;
+    }
+    updateStatus("Loading shared files...");
+    try {
+      const cache = await caches.open(SHARE_CACHE);
+      const metadataResponse = await cache.match(SHARE_LATEST_KEY);
+      if (!metadataResponse) {
+        updateStatus(new URLSearchParams(window.location.search).get("share-target") === "unsupported"
+          ? "Install Warpbox as an app to share files into it from your device."
+          : "No shared files were found.");
+        recoverResumableSessions();
+        return;
+      }
+      const metadata = await metadataResponse.json();
+      if (metadata.error) {
+        updateStatus(metadata.error);
+        recoverResumableSessions();
+        return;
+      }
+      const files = [];
+      for (const item of metadata.files || []) {
+        if (!item.key) {
+          continue;
+        }
+        const response = await cache.match(item.key);
+        if (!response) {
+          continue;
+        }
+        const blob = await response.blob();
+        files.push(new File([blob], item.name || "shared-file", {
+          type: item.type || blob.type || "application/octet-stream",
+          lastModified: item.lastModified || Date.now(),
+        }));
+      }
+      sharedTargetDraft = metadata;
+      selectedFiles = files;
+      resumeMode = false;
+      recoveredDraft = null;
+      validateSelectedFilesWithinLimit(selectedFiles);
+      if (selectedFiles.length > 0) {
+        renderQueue(selectedFiles, "queued", { shared: true });
+        updateStatus("Shared files ready.");
+      } else {
+        updateStatus("No files were included in this share.");
+      }
+      updateSelectedState();
+    } catch (error) {
+      updateStatus(error.message || "Shared files could not be loaded.");
+      recoverResumableSessions();
+    }
+  }
+
+  async function clearSharedTargetPayload() {
+    const draft = sharedTargetDraft;
+    sharedTargetDraft = null;
+    if (!draft || !("caches" in window)) {
+      sharedTargetDraft = null;
+      return;
+    }
+    try {
+      const cache = await caches.open(SHARE_CACHE);
+      for (const item of draft.files || []) {
+        if (item.key) {
+          await cache.delete(item.key);
+        }
+      }
+      if (draft.id) {
+        await cache.delete("/__warpbox_share_target__/meta/" + encodeURIComponent(draft.id));
+      }
+      await cache.delete(SHARE_LATEST_KEY);
+    } catch (error) {
+      /* ignore cache cleanup failures */
+    }
+  }
+
  function removeSelectedFile(index) {
    if (uploadLocked) {
      return;
@@ -175,12 +592,18 @@
        fileSummary.textContent = count === 0
          ? "Reselect missing files to resume, or add extra files to this upload."
          : `${count} local file${count === 1 ? "" : "s"} ready for the recovered upload.`;
+      } else if (sharedTargetDraft) {
+        fileSummary.textContent = count === 0
+          ? "No shared files were received."
+          : `${count} shared file${count === 1 ? "" : "s"} ready. Review options, then upload.`;
      } else {
        fileSummary.textContent = count === 0 ? "Choose one or more files to begin." : `${count} file${count === 1 ? "" : "s"} ready.`;
      }
    }
    if (resumeMode && recoveredDraft) {
      renderResumeQueue(recoveredDraft.session, selectedFiles);
+    } else if (sharedTargetDraft && count > 0) {
+      renderQueue(selectedFiles, "queued", { shared: true });
    } else if (count > 0) {
      renderQueue(selectedFiles, "queued");
    } else if (uploadQueue) {
@@ -194,7 +617,7 @@
    if (!newUpload) {
      return;
    }
-    const visible = Boolean(resumeMode && recoveredDraft);
+    const visible = Boolean((resumeMode && recoveredDraft) || sharedTargetDraft);
    newUpload.hidden = !visible;
    newUpload.style.display = visible ? "" : "none";
  }
@@ -336,7 +759,7 @@
    const fingerprints = await Promise.all(files.map((file) => fileFingerprint(file)));
    const createPayload = {
      files: files.map((file, index) => ({
-        name: file.name,
+        name: uploadName(file),
        size: file.size,
        contentType: file.type || "application/octet-stream",
        fingerprint: fingerprints[index],
@@ -803,6 +1226,7 @@
    selectedFiles = [];
    resumeMode = false;
    recoveredDraft = null;
+    sharedTargetDraft = null;
    fileInput.value = "";
    result.hidden = true;
    if (resultList) {
@@ -862,7 +1286,7 @@
    const rows = [];
    const localByNameSize = new Map();
    (localFiles || []).forEach((file, index) => {
-      localByNameSize.set(`${file.name}:${file.size}`, { file, index });
+      localByNameSize.set(`${uploadName(file)}:${file.size}`, { file, index });
    });
    const usedLocalIndexes = new Set();
    (session.files || []).forEach((file) => {
@@ -873,7 +1297,7 @@
        usedLocalIndexes.add(localMatch.index);
      }
      rows.push({
-        name: file.name,
+        name: uploadName(file),
        size: file.size,
        uploadedBytes,
        meta: complete
@@ -893,7 +1317,7 @@
        return;
      }
      rows.push({
-        name: file.name,
+        name: uploadName(file),
        meta: `${window.Warpbox.formatBytes(file.size)} · new file`,
        progress: 0,
        status: "queued",
@@ -913,20 +1337,22 @@
    return Math.max(0, Math.min(100, Math.round((bytes / total) * 100)));
  }

-  function renderQueue(files, status) {
+  function renderQueue(files, status, options) {
    if (!uploadQueue) {
      return;
    }
+    const shared = Boolean(options && options.shared);
    uploadQueue.hidden = files.length === 0;
    uploadQueue.replaceChildren();
    files.forEach((file, index) => {
      uploadQueue.append(createFileRow({
-        name: file.name,
-        meta: window.Warpbox.formatBytes(file.size),
+        name: uploadName(file),
+        meta: shared ? `${window.Warpbox.formatBytes(file.size)} · Shared from device` : window.Warpbox.formatBytes(file.size),
        progress: status === "queued" ? 0 : 100,
        status,
        index,
        removable: status === "queued",
+        shared,
      }));
    });
  }
@@ -965,6 +1391,12 @@
      badge.textContent = "Needs local file";
      side.append(badge);
    }
+    if (file.shared) {
+      const badge = document.createElement("small");
+      badge.className = "upload-file-state upload-file-state-shared";
+      badge.textContent = "Shared from device";
+      side.append(badge);
+    }
    if (file.removable) {
      const remove = document.createElement("button");
      remove.className = "upload-file-remove";
@@ -982,14 +1414,16 @@
  function uploadFormData() {
    const formData = new FormData(form);
    formData.delete("file");
+    formData.delete("file_path");
    selectedFiles.forEach((file) => {
-      formData.append("file", file, file.name);
+      formData.append("file", file, uploadName(file));
+      formData.append("file_path", uploadName(file));
    });
    return formData;
  }

  function fileIdentity(file) {
-    return [file.name, file.size, file.lastModified || 0].join(":");
+    return [uploadName(file), file.size, file.lastModified || 0].join(":");
  }

  async function fileFingerprint(file) {
@@ -998,7 +1432,7 @@
    }
    const sampleSize = Math.min(file.size, 1024 * 1024);
    const sample = await file.slice(0, sampleSize).arrayBuffer();
-    const metadata = new TextEncoder().encode([file.name, file.size, file.lastModified || 0, sampleSize].join(":"));
+    const metadata = new TextEncoder().encode([uploadName(file), file.size, file.lastModified || 0, sampleSize].join(":"));
    const combined = new Uint8Array(metadata.byteLength + sample.byteLength);
    combined.set(metadata, 0);
    combined.set(new Uint8Array(sample), metadata.byteLength);
--- a/backend/static/js/45-preview.js
+++ b/backend/static/js/45-preview.js
@@ -66,6 +66,7 @@
  bindLargeGate();
  bindThemeChanges();
  bindRenderFullscreen();
+  configureMediaSession();
  renderTabs();
  selectMode(state.defaultMode);

@@ -301,6 +302,32 @@
    document.addEventListener("fullscreenchange", updateRenderFullscreenButton);
  }

+  function configureMediaSession() {
+    if (!("mediaSession" in navigator) || typeof window.MediaMetadata !== "function") {
+      return;
+    }
+    if (!fileType.isAudio && !fileType.isVideo) {
+      return;
+    }
+    var artworkURL = "";
+    if (fileType.isVideo && els.videoPane) {
+      artworkURL = els.videoPane.getAttribute("poster") || state.iconURL || "";
+    } else {
+      artworkURL = state.iconURL || "";
+    }
+    var metadata = {
+      title: state.fileName || "Warpbox media",
+      artist: "Warpbox",
+      album: state.sizeLabel || state.contentType || ""
+    };
+    if (artworkURL) {
+      metadata.artwork = [
+        { src: window.Warpbox.absoluteURL(artworkURL), sizes: "512x512", type: "image/png" }
+      ];
+    }
+    navigator.mediaSession.metadata = new MediaMetadata(metadata);
+  }
+
  function ensureTextLoaded() {
    if (state.textLoaded) {
      return Promise.resolve(state.textSource);
--- a/backend/static/js/service-worker.js
+++ b/backend/static/js/service-worker.js
@@ -0,0 +1,130 @@
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  if (event.request.method === "POST" && url.origin === self.location.origin && url.pathname === "/share-target") {
+    event.respondWith(handleShareTarget(event.request));
+  }
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const url = event.notification.data && event.notification.data.url ? event.notification.data.url : "/";
+  event.waitUntil((async () => {
+    const windows = await clients.matchAll({ type: "window", includeUncontrolled: true });
+    for (const client of windows) {
+      if ("focus" in client) {
+        await client.focus();
+        if ("navigate" in client) {
+          await client.navigate(url);
+        }
+        return;
+      }
+    }
+    if (clients.openWindow) {
+      await clients.openWindow(url);
+    }
+  })());
+});
+
+const SHARE_CACHE = "warpbox-share-target-v1";
+const SHARE_PREFIX = "/__warpbox_share_target__/";
+const LATEST_KEY = SHARE_PREFIX + "latest";
+
+async function handleShareTarget(request) {
+  const id = Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
+  try {
+    const formData = await request.formData();
+    const files = collectSharedFiles(formData);
+    const cache = await caches.open(SHARE_CACHE);
+    const metadata = {
+      id,
+      title: stringValue(formData.get("title")),
+      text: stringValue(formData.get("text")),
+      url: stringValue(formData.get("url")),
+      createdAt: new Date().toISOString(),
+      files: [],
+    };
+
+    await deletePreviousShare(cache);
+    for (let index = 0; index < files.length; index += 1) {
+      const file = files[index];
+      const key = SHARE_PREFIX + "file/" + encodeURIComponent(id) + "/" + index;
+      metadata.files.push({
+        key,
+        name: file.name || "shared-file",
+        type: file.type || "application/octet-stream",
+        size: file.size || 0,
+        lastModified: file.lastModified || Date.now(),
+      });
+      await cache.put(key, new Response(file, {
+        headers: {
+          "Content-Type": file.type || "application/octet-stream",
+          "Cache-Control": "no-store",
+        },
+      }));
+    }
+
+    await cache.put(LATEST_KEY, jsonResponse(metadata));
+    await cache.put(SHARE_PREFIX + "meta/" + encodeURIComponent(id), jsonResponse(metadata));
+  } catch (error) {
+    await storeShareError(id, error);
+  }
+
+  return Response.redirect("/?share-target=1&share-id=" + encodeURIComponent(id), 303);
+}
+
+function collectSharedFiles(formData) {
+  const files = [];
+  ["files", "file", "sharex"].forEach((name) => {
+    formData.getAll(name).forEach((value) => {
+      if (value instanceof File && value.size > 0) {
+        files.push(value);
+      }
+    });
+  });
+  return files;
+}
+
+function stringValue(value) {
+  return typeof value === "string" ? value : "";
+}
+
+function jsonResponse(payload) {
+  return new Response(JSON.stringify(payload), {
+    headers: {
+      "Content-Type": "application/json",
+      "Cache-Control": "no-store",
+    },
+  });
+}
+
+async function storeShareError(id, error) {
+  const cache = await caches.open(SHARE_CACHE);
+  await cache.put(LATEST_KEY, jsonResponse({
+    id,
+    error: error && error.message ? error.message : "Shared files could not be staged.",
+    createdAt: new Date().toISOString(),
+    files: [],
+  }));
+}
+
+async function deletePreviousShare(cache) {
+  const previous = await cache.match(LATEST_KEY);
+  if (!previous) {
+    return;
+  }
+  let metadata = null;
+  try {
+    metadata = await previous.json();
+  } catch (error) {
+    metadata = null;
+  }
+  for (const file of metadata && metadata.files ? metadata.files : []) {
+    if (file.key) {
+      await cache.delete(file.key);
+    }
+  }
+  if (metadata && metadata.id) {
+    await cache.delete(SHARE_PREFIX + "meta/" + encodeURIComponent(metadata.id));
+  }
+  await cache.delete(LATEST_KEY);
+}
--- a/backend/static/site.webmanifest
+++ b/backend/static/site.webmanifest
@@ -7,6 +7,22 @@
  "display": "standalone",
  "background_color": "#0b0b16",
  "theme_color": "#8b5cf6",
+  "share_target": {
+    "action": "/share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "title": "title",
+      "text": "text",
+      "url": "url",
+      "files": [
+        {
+          "name": "files",
+          "accept": ["*/*"]
+        }
+      ]
+    }
+  },
  "icons": [
    {
      "src": "/static/android-chrome-192x192.png",
--- a/backend/templates/layouts/base.html
+++ b/backend/templates/layouts/base.html
@@ -4,7 +4,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>{{if .Title}}{{.Title}} — {{end}}{{.AppName}}</title>
+  <title>{{if .Title}}{{.Title}} | {{end}}{{.AppName}}</title>
  <meta name="description" content="{{.Description}}">
  {{if .CanonicalURL}}<link rel="canonical" href="{{.CanonicalURL}}">{{end}}
  <meta name="robots" content="{{if .Robots}}{{.Robots}}{{else}}index,follow{{end}}">
@@ -54,11 +54,13 @@

  <script src="/static/js/05-theme.js?version={{.AppVersion}}"></script>
  <link rel="stylesheet" href="/static/css/00-base.css?version={{.AppVersion}}">
+  <link rel="stylesheet" href="/static/css/04-dialogs.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/10-layout.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/15-revamp.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/16-retro.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/17-gruvbox.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/18-cyberpunk.css?version={{.AppVersion}}">
+  <link rel="stylesheet" href="/static/css/19-popups.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/20-upload.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/30-download.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/40-docs.css?version={{.AppVersion}}">
@@ -67,8 +69,12 @@
  <link rel="stylesheet" href="/static/css/70-tokens.css?version={{.AppVersion}}">
  <link rel="stylesheet" href="/static/css/90-responsive.css?version={{.AppVersion}}">
  <script defer src="/static/js/00-utils.js?version={{.AppVersion}}"></script>
+  <script defer src="/static/js/02-pwa.js?version={{.AppVersion}}"></script>
+  <script defer src="/static/js/03-popups.js?version={{.AppVersion}}"></script>
+  <script defer src="/static/js/04-dialogs.js?version={{.AppVersion}}"></script>
  <script defer src="/static/js/10-file-browser.js?version={{.AppVersion}}"></script>
  <script defer src="/static/js/12-reactions.js?version={{.AppVersion}}"></script>
+  <script defer src="/static/js/13-share.js?version={{.AppVersion}}"></script>
  <script defer src="/static/js/20-storage-admin.js?version={{.AppVersion}}"></script>
  <script defer src="/static/js/25-admin-charts.js?version={{.AppVersion}}"></script>
  <script defer src="/static/js/30-token-copy.js?version={{.AppVersion}}"></script>
--- a/backend/templates/pages/download.html
+++ b/backend/templates/pages/download.html
@@ -5,7 +5,7 @@
  <div class="card download-card">
    <div class="card-content">
      <div class="file-emblem" aria-hidden="true">
-        <svg viewBox="0 0 24 24" role="img" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /></svg>
+        <span class="svg-icon svg-icon-document"></span>
      </div>
      <h1 id="download-title">{{if .Data.Locked}}Protected box{{else}}Box: {{.Data.Box.ID}} ({{len .Data.Files}} file{{if ne (len .Data.Files) 1}}s{{end}}){{end}}</h1>
      {{if .Data.Locked}}<p class="download-subtitle">Bucket id: {{.Data.Box.ID}}</p>{{end}}
@@ -25,11 +25,17 @@

      {{if .Data.Files}}
        {{$processing := false}}{{range .Data.Files}}{{if .Processing}}{{$processing = true}}{{end}}{{end}}
+        {{$failed := false}}{{range .Data.Files}}{{if .Failed}}{{$failed = true}}{{end}}{{end}}
        {{if $processing}}
          <div class="upload-processing-alert" role="status">
            Some files are still processing. You can share this link now, but processing files will become available shortly.
          </div>
        {{end}}
+        {{if $failed}}
+          <div class="upload-processing-alert upload-processing-alert-error" role="alert">
+            Upload processing failed for one or more files. The original upload could not be finalized by the storage backend.
+          </div>
+        {{end}}
        {{$single := eq (len .Data.Files) 1}}
        <div class="badge-row">
          <span class="badge badge-expiry">Expires {{.Data.ExpiresLabel}}</span>
@@ -37,18 +43,28 @@
        </div>

        {{if not .Data.Locked}}
+          <button class="button button-outline button-wide download-share-button" type="button" data-share-box data-share-url="/d/{{.Data.Box.ID}}" data-share-title="{{if .Data.Locked}}Protected Warpbox box{{else}}Warpbox box {{.Data.Box.ID}}{{end}}" data-share-text="Shared files on Warpbox">
+            <span class="svg-icon svg-icon-share" aria-hidden="true"></span>
+            <span data-share-box-label>Share</span>
+          </button>
+          {{if or $processing $failed}}
+            <span class="button button-outline button-wide is-disabled" aria-disabled="true">
+              {{if $failed}}Download unavailable{{else}}Files processing{{end}}
+            </span>
+          {{else}}
          {{if $single}}
            {{$first := index .Data.Files 0}}
            <a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.Name}}">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              Download
            </a>
          {{else}}
            <a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              Download zip
            </a>
          {{end}}
+          {{end}}
        {{end}}

        <div class="file-browser-window" data-file-browser-window>
@@ -64,11 +80,11 @@
          <div class="file-browser-toolbar" aria-label="File view options">
            <div class="view-toolbar">
              <button class="button button-outline icon-button" type="button" data-view-button="list" aria-pressed="false" aria-label="List view" title="List view">
-                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" /></svg>
+                <span class="svg-icon svg-icon-list" aria-hidden="true"></span>
                <span class="sr-only">List view</span>
              </button>
              <button class="button button-outline icon-button is-active" type="button" data-view-button="thumbs" aria-pressed="true" aria-label="Icon view" title="Icon view">
-                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+                <span class="svg-icon svg-icon-grid" aria-hidden="true"></span>
                <span class="sr-only">Icon view</span>
              </button>
            </div>
@@ -80,8 +96,8 @@
          </div>
          <div class="download-list file-browser is-thumbs" data-file-browser>
            {{range .Data.Files}}
-              <article class="download-item file-card {{if .Processing}}is-processing{{end}}" data-kind="{{.PreviewKind}}" {{if not .Processing}}data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}"{{end}} data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
-                {{if .Processing}}<div class="file-open" aria-label="{{.Name}} is processing">{{else}}<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">{{end}}
+              <article class="download-item file-card {{if .Processing}}is-processing{{end}} {{if .Failed}}is-failed{{end}}" data-kind="{{.PreviewKind}}" {{if and (not .Processing) (not .Failed)}}data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}"{{end}} data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
+                {{if or .Processing .Failed}}<div class="file-open" aria-label="{{.Name}} {{if .Failed}}failed processing{{else}}is processing{{end}}">{{else}}<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">{{end}}
                  <span class="file-media">
                    {{if .HasThumbnail}}
                      <img class="file-thumb" src="{{.ThumbnailURL}}" alt="" loading="lazy">
@@ -92,11 +108,12 @@
                  </span>
                  <span class="file-main">
                    <strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
-                    <small>{{.Size}} · {{if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</small>
+                    <small>{{.Size}} · {{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</small>
+                    {{if .Failed}}<small class="file-error">{{.Error}}</small>{{end}}
                  </span>
-                  <span class="file-type">{{if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</span>
+                  <span class="file-type">{{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</span>
                  <span class="file-size">{{.Size}}</span>
-                {{if .Processing}}</div>{{else}}</a>{{end}}
+                {{if or .Processing .Failed}}</div>{{else}}</a>{{end}}
                {{if not $.Data.Locked}}
                  <div class="file-reaction-dock" data-reaction-dock>
                    <div class="file-reactions" data-reaction-list>
@@ -112,7 +129,7 @@
                    </div>
                    {{if not .Reacted}}
                      <button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
-                        <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
+                        <span class="svg-icon svg-icon-emoji" aria-hidden="true"></span>
                      </button>
                    {{end}}
                  </div>
@@ -160,35 +177,35 @@
              <small>File actions</small>
              <div class="context-menu-icons" aria-label="Quick actions">
                <button type="button" role="menuitem" data-context-action="preview" title="Open preview" aria-label="Open preview">
-                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
+                  <span class="svg-icon svg-icon-open" aria-hidden="true"></span>
                </button>
                <button type="button" role="menuitem" data-context-action="copy-preview" title="Copy preview URL" aria-label="Copy preview URL">
-                  <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+                  <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
                  <span data-context-label class="sr-only">Copy</span>
                </button>
              </div>
            </div>
            <hr>
            <button type="button" role="menuitem" data-context-action="preview">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
+              <span class="svg-icon svg-icon-eye" aria-hidden="true"></span>
              <span data-context-label>Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="view">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
+              <span class="svg-icon svg-icon-open" aria-hidden="true"></span>
              <span data-context-label>View raw file</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="copy-preview">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+              <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
              <span data-context-label>Copy Preview</span>
            </button>
            <button type="button" role="menuitem" data-context-action="copy-download">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
+              <span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
              <span data-context-label>Copy Download</span>
            </button>
            <hr>
            <button type="button" role="menuitem" data-context-action="download">
-              <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
+              <span class="svg-icon svg-icon-download" aria-hidden="true"></span>
              <span data-context-label>Download</span>
            </button>
          </div>
--- a/backend/templates/pages/home.html
+++ b/backend/templates/pages/home.html
@@ -10,7 +10,7 @@
    {{end}}
  </div>

-  <form class="upload-grid" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data">
+  <form class="upload-grid" id="upload-form" action="/api/v1/upload" method="post" enctype="multipart/form-data" data-max-upload-bytes="{{.Data.MaxUploadBytes}}" data-max-upload-label="{{.Data.MaxUploadSize}}">
    <div class="card upload-main">
      <div class="card-content">
        {{if .CurrentUser}}
@@ -25,7 +25,7 @@
            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 16V4m0 0 4 4m-4-4-4 4M5 20h14" /></svg>
          </span>
          <span class="drop-title">Drop files to upload</span>
-          <span class="drop-copy">or click to browse</span>
+          <span class="drop-copy">or click to browse, paste files, or drop a folder</span>
          <span class="drop-meta">Max file size: {{.Data.MaxUploadSize}} · {{.Data.LimitSummary}}</span>
          <input id="file-input" name="file" type="file" multiple>
        </label>
@@ -76,6 +76,8 @@

        <div class="form-footer">
          <p id="file-summary">Choose one or more files to begin.</p>
+          <button class="button button-outline install-pwa-button" type="button" data-install-pwa hidden>Install Warpbox</button>
+          <button class="button button-outline folder-picker-button" type="button" data-folder-picker hidden>Choose folder</button>
          <button class="button button-primary" type="submit">Upload files</button>
          <button class="button button-danger upload-new-button" type="button" id="new-upload" hidden>New upload</button>
        </div>
Author	SHA1	Message	Date
Daniel Legt	6a7590493c	refactor(upload): use IncomingFile interface instead of multipart headers All checks were successful Build and Publish Docker Image / deploy (push) Successful in 1m58s Details Refactors the upload handler to use the `services.IncomingFile` interface instead of concrete `*multipart.FileHeader` pointers. This decouples the core upload logic from the HTTP multipart implementation, allowing for more flexible file sources. Changes include: - Introducing `namedMultipartFile` to adapt multipart headers to the new interface. - Updating `createOrAppendBox`, `checkUploadPolicy`, and `totalUploadBytes` to accept `IncomingFile`. - Renaming service calls to `CreateBoxFromIncoming` and `AppendIncomingFiles`.	2026-06-10 18:19:45 +03:00
Daniel Legt	5d77b36634	feat: support folder uploads and sanitize upload paths - Implement `cleanUploadDisplayName` in the backend to safely sanitize uploaded file paths, preserving directory structures while stripping unsafe characters and preventing path traversal. - Add folder upload capability in the frontend using the Directory Picker API. - Implement desktop notifications for completed uploads.	2026-06-10 18:14:29 +03:00
Daniel Legt	0b8d4a3ab9	chore(copy): standardize metadata formatting and descriptions - Replace middle dots (·) and em-dashes (—) with pipes (\|) and standard punctuation in page titles, descriptions, and image alt texts. - Shorten the homepage description to be more concise and direct. - Update file share description phrasing for better readability, changing "click to preview" to "Open to preview" and capitalizing "Expires".	2026-06-10 12:56:22 +03:00
Daniel Legt	0b4487ac2e	feat(upload): warn on large uploads over slow/metered connections All checks were successful Build and Publish Docker Image / deploy (push) Successful in 1m54s Details Detects if the user is on a slow (2G/3G) or metered (saveData) connection and prompts them with a confirmation dialog if they attempt to upload files totaling 200MB or more. This prevents accidental high data usage and warns users about potential long upload times. Also includes the dialogs JS and CSS in the base layout to support the confirmation modal.	2026-06-08 13:34:05 +03:00
Daniel Legt	ead4cd7492	refactor(download): migrate inline SVGs to CSS mask-based icons Replaces inline SVG elements in the download template with a reusable CSS mask-based icon system. This reduces HTML bloat and centralizes icon management. - Added a generic `.svg-icon` utility class using CSS masks. - Defined specific icon classes mapping to static SVG assets. - Updated `download.html` to use `<span>` tags with the new icon classes. - Adjusted CSS selectors in retro and download stylesheets to target `.svg-icon`.	2026-06-08 12:08:51 +03:00
Daniel Legt	af1fae1a98	feat(download): add share button to download page Introduce a new "Share" button on the download page to allow users to easily share the box link. - Add the share button markup and SVG icon to `download.html` - Include the `13-share.js` script in the base layout to handle the share action - Add CSS styling for the share button in `30-download.css`	2026-06-08 12:02:30 +03:00
Daniel Legt	d11aec96e5	feat(backend): handle processing errors and add PWA routes - Block file downloads and previews with a 424 StatusFailedDependency if file processing failed or the box has issues. - Register routes for `/service-worker.js` and `/share-target` to support PWA features. - Update README.md with an AI usage disclosure.	2026-06-08 11:53:37 +03:00
Daniel Legt	dbfdacc396	feat(download): support UTF-8 filenames in Content-Disposition Improve the Content-Disposition header formatting for file downloads by implementing RFC 5987 compliant filename encoding. This ensures that downloaded files retain their original names, including spaces and non-ASCII characters, across different browsers. - Add `contentDisposition` helper to generate both standard ASCII fallback and UTF-8 encoded filename parameters. - Sanitize filenames to prevent path traversal and replace unsafe characters with underscores in the ASCII fallback. - Update single file and ZIP downloads to use the new formatting. - Add unit tests to verify correct header generation for various filename scenarios.	2026-06-08 10:53:20 +03:00