From 8199fdac4447019be8e8b071edb9299b472e65b1 Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 4 Apr 2025 14:15:33 +0200
Subject: [PATCH 1/5] feat: warn when uploading of public files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ‘Private’ checkbox is too inconspicuous, people do not realise how dangerous it can be not to activate it.
---
 frappe/public/js/frappe/file_uploader/FilePreview.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index 6f81e4c5fb..529cdf17c6 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -38,6 +38,11 @@
 				<span v-if="file.error_message" class="file-error text-danger">
 					{{ file.error_message }}
 				</span>
+				<span v-if="!file.private" class="text-danger">
+					{{
+						__("Warning: This file is public. Mark it private to hide it from others.")
+					}}
+				</span>
 			</div>
 		</div>
 		<div class="file-actions">

From 5c023ccb92ed90a1d859d2d9d7587b5eca662c2a Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 4 Apr 2025 15:10:48 +0200
Subject: [PATCH 2/5] fix: hide 'Private' checkbox if uploaded or upload failed

---
 frappe/public/js/frappe/file_uploader/FilePreview.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index 529cdf17c6..f222b54198 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -119,6 +119,9 @@ let allow_toggle_optimize = computed(() => {
 		!props.file.failed
 	);
 });
+let allow_toggle_private = computed(() => {
+	return props.allow_toggle_private && !uploaded.value && !props.file.failed;
+});
 let is_cropable = computed(() => {
 	let croppable_types = ["image/jpeg", "image/png"];
 	return (

From c934dc7e961f58f6858bfb045e56816021625c88 Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 4 Apr 2025 15:17:23 +0200
Subject: [PATCH 3/5] refactor: improve layout to accomodate warning and error
 message

Previously, `.file-preview` took care of the horizontal layout and outline. Now outline is extracted into an outer `.file-preview-outline` that allows adding content in the vertical axis.

Bootstrap's alert classes are used for styling messages.
---
 .../js/frappe/file_uploader/FilePreview.vue   | 153 +++++++++---------
 1 file changed, 79 insertions(+), 74 deletions(-)

diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index f222b54198..4bc01ecac9 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -1,74 +1,78 @@
 <template>
-	<div class="file-preview">
-		<div class="file-icon">
-			<img v-if="is_image" :src="src" :alt="file.name" />
-			<div class="fallback" v-else v-html="frappe.utils.icon('file', 'md')"></div>
-		</div>
-		<div>
-			<div>
-				<a class="flex" :href="file.doc.file_url" v-if="file.doc" target="_blank">
-					<span class="file-name">{{ file.name }}</span>
-				</a>
-				<span class="file-name" v-else>{{ file.name }}</span>
+	<div class="file-preview-outline">
+		<div class="file-preview">
+			<div class="file-icon">
+				<img v-if="is_image" :src="src" :alt="file.name" />
+				<div class="fallback" v-else v-html="frappe.utils.icon('file', 'md')"></div>
 			</div>
+			<div>
+				<div>
+					<a class="flex" :href="file.doc.file_url" v-if="file.doc" target="_blank">
+						<span class="file-name">{{ file.name }}</span>
+					</a>
+					<span class="file-name" v-else>{{ file.name }}</span>
+				</div>
 
-			<div>
-				<span class="file-size">
-					{{ file_size }}
-				</span>
-			</div>
+				<div>
+					<span class="file-size">
+						{{ file_size }}
+					</span>
+				</div>
 
-			<div class="flex config-area">
-				<label v-if="allow_toggle_optimize" class="frappe-checkbox"
-					><input
-						type="checkbox"
-						:checked="optimize"
-						@change="emit('toggle_optimize')"
-					/>{{ __("Optimize") }}</label
-				>
-				<label v-if="allow_toggle_private" class="frappe-checkbox"
-					><input
-						type="checkbox"
-						:checked="file.private"
-						@change="emit('toggle_private')"
-					/>{{ __("Private") }}</label
-				>
+				<div class="flex config-area">
+					<label v-if="allow_toggle_optimize" class="frappe-checkbox"
+						><input
+							type="checkbox"
+							:checked="optimize"
+							@change="emit('toggle_optimize')"
+						/>{{ __("Optimize") }}</label
+					>
+					<label v-if="allow_toggle_private" class="frappe-checkbox"
+						><input
+							type="checkbox"
+							:checked="file.private"
+							@change="emit('toggle_private')"
+						/>{{ __("Private") }}</label
+					>
+				</div>
 			</div>
-			<div>
-				<span v-if="file.error_message" class="file-error text-danger">
-					{{ file.error_message }}
-				</span>
-				<span v-if="!file.private" class="text-danger">
-					{{
-						__("Warning: This file is public. Mark it private to hide it from others.")
-					}}
-				</span>
+			<div class="file-actions">
+				<ProgressRing
+					v-show="file.uploading && !uploaded && !file.failed"
+					primary="var(--primary-color)"
+					secondary="var(--gray-200)"
+					:radius="24"
+					:progress="progress"
+					:stroke="3"
+				/>
+				<div v-if="uploaded" v-html="frappe.utils.icon('solid-success', 'lg')"></div>
+				<div v-if="file.failed" v-html="frappe.utils.icon('solid-error', 'lg')"></div>
+				<div class="file-action-buttons">
+					<button
+						v-if="is_cropable"
+						class="btn btn-crop muted"
+						@click="emit('toggle_image_cropper')"
+						v-html="frappe.utils.icon('crop', 'md')"
+					></button>
+					<button
+						v-if="!uploaded && !file.uploading && !file.failed"
+						class="btn muted"
+						@click="emit('remove')"
+						v-html="frappe.utils.icon('delete', 'md')"
+					></button>
+				</div>
 			</div>
 		</div>
-		<div class="file-actions">
-			<ProgressRing
-				v-show="file.uploading && !uploaded && !file.failed"
-				primary="var(--primary-color)"
-				secondary="var(--gray-200)"
-				:radius="24"
-				:progress="progress"
-				:stroke="3"
-			/>
-			<div v-if="uploaded" v-html="frappe.utils.icon('solid-success', 'lg')"></div>
-			<div v-if="file.failed" v-html="frappe.utils.icon('solid-error', 'lg')"></div>
-			<div class="file-action-buttons">
-				<button
-					v-if="is_cropable"
-					class="btn btn-crop muted"
-					@click="emit('toggle_image_cropper')"
-					v-html="frappe.utils.icon('crop', 'md')"
-				></button>
-				<button
-					v-if="!uploaded && !file.uploading && !file.failed"
-					class="btn muted"
-					@click="emit('remove')"
-					v-html="frappe.utils.icon('delete', 'md')"
-				></button>
+		<div style="width: 100%">
+			<div v-if="file.error_message" class="alert alert-danger mb-0 mt-2" role="alert">
+				{{ file.error_message }}
+			</div>
+			<div
+				v-if="!file.private && !file.error_message"
+				class="alert alert-warning mb-0"
+				role="alert"
+			>
+				{{ __("Warning: This file is public. Mark it private to hide it from others.") }}
 			</div>
 		</div>
 	</div>
@@ -152,24 +156,30 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.file-preview-outline {
+	padding: 0.75rem;
+	border: 1px solid transparent;
+	display: flex;
+	flex-direction: column;
+}
+
 .file-preview {
 	display: flex;
 	align-items: center;
-	padding: 0.75rem;
-	border: 1px solid transparent;
+	flex-direction: row;
 }
 
-.file-preview + .file-preview {
+.file-preview-outline + .file-preview-outline {
 	border-top-color: var(--border-color);
 }
 
-.file-preview:hover {
+.file-preview-outline:hover {
 	background-color: var(--bg-color);
 	border-color: var(--dark-border-color);
 	border-radius: var(--border-radius);
 }
 
-.file-preview:hover + .file-preview {
+.file-preview-outline:hover + .file-preview-outline {
 	border-top-color: transparent;
 }
 
@@ -250,9 +260,4 @@ onMounted(() => {
 .config-area {
 	gap: 0.5rem;
 }
-
-.file-error {
-	font-size: var(--text-sm);
-	font-weight: var(--text-bold);
-}
 </style>

From 7baf105c20f8b8ab57d774e5b4bc98e2f357e5ab Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 4 Apr 2025 15:18:10 +0200
Subject: [PATCH 4/5] fix: display message from frappe.throw() in backend

---
 .../js/frappe/file_uploader/FileUploader.vue  | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/frappe/public/js/frappe/file_uploader/FileUploader.vue b/frappe/public/js/frappe/file_uploader/FileUploader.vue
index 03eddc8a00..9d53d9f776 100644
--- a/frappe/public/js/frappe/file_uploader/FileUploader.vue
+++ b/frappe/public/js/frappe/file_uploader/FileUploader.vue
@@ -595,23 +595,22 @@ function upload_file(file, i) {
 					}
 				} else if (xhr.status === 403) {
 					file.failed = true;
-					let response = JSON.parse(xhr.responseText);
-					file.error_message = `Not permitted. ${response._error_message || ""}.`;
-
-					try {
-						// Append server messages which are useful hint for perm issues
-						let server_messages = JSON.parse(response._server_messages);
-
-						server_messages.forEach((m) => {
-							m = JSON.parse(m);
-							file.error_message += `\n ${m.message} `;
-						});
-					} catch (e) {
-						console.warning("Failed to parse server message", e);
+					let response = parse_error_response(xhr.responseText);
+					file.error_message = `Not permitted. ${response.error_message || ""}.`;
+					if (response.server_messages.length) {
+						file.error_message += `\n${response.server_messages.join("\n")}`;
 					}
 				} else if (xhr.status === 413) {
 					file.failed = true;
 					file.error_message = "Size exceeds the maximum allowed file size.";
+				} else if (xhr.status === 417) {
+					// regular frappe.throw() in backend
+					file.failed = true;
+					file.error_message = null;
+					let response = parse_error_response(xhr.responseText);
+					if (response.server_messages.length) {
+						file.error_message = response.server_messages.join("\n");
+					}
 				} else {
 					file.failed = true;
 					file.error_message =
@@ -679,6 +678,26 @@ function upload_file(file, i) {
 		xhr.send(form_data);
 	});
 }
+function parse_error_response(response_text) {
+	let response = JSON.parse(response_text);
+	let error_message = response._error_message;
+	let server_messages = [];
+
+	try {
+		server_messages.push(
+			...JSON.parse(response._server_messages).map((m) => {
+				let parsed = JSON.parse(m);
+				return parsed.message;
+			})
+		);
+	} catch (e) {
+		console.warning("Failed to parse server message", e);
+	}
+	return {
+		error_message,
+		server_messages,
+	};
+}
 function capture_image() {
 	const capture = new frappe.ui.Capture({
 		animate: false,

From d0e27ffcbddd368b7740340f46b16718778f9614 Mon Sep 17 00:00:00 2001
From: barredterra <14891507+barredterra@users.noreply.github.com>
Date: Fri, 4 Apr 2025 15:59:46 +0200
Subject: [PATCH 5/5] refactor: improve wording

---
 frappe/public/js/frappe/file_uploader/FilePreview.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index 4bc01ecac9..d413ff815b 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -72,7 +72,11 @@
 				class="alert alert-warning mb-0"
 				role="alert"
 			>
-				{{ __("Warning: This file is public. Mark it private to hide it from others.") }}
+				{{
+					__(
+						"This file is public and can be accessed by anyone, even without logging in. Mark it private to limit access."
+					)
+				}}
 			</div>
 		</div>
 	</div>