Merge pull request #27851 from blaggacao/fix/file-uploader

feat: enhance constructor configurability and fix UI issues

frappe/public/js/frappe/file_uploader/FilePreview.vue

@@ -19,14 +19,14 @@
 			</div>
 
 			<div class="flex config-area">
-				<label v-if="is_optimizable" class="frappe-checkbox"
+				<label v-if="allow_toggle_optimize" class="frappe-checkbox"
 					><input
 						type="checkbox"
 						:checked="optimize"
 						@change="emit('toggle_optimize')"
 					/>{{ __("Optimize") }}</label
 				>
-				<label class="frappe-checkbox"
+				<label v-if="allow_toggle_private" class="frappe-checkbox"
 					><input
 						type="checkbox"
 						:checked="file.private"
@@ -79,6 +79,12 @@ let emit = defineEmits(["toggle_optimize", "toggle_private", "toggle_image_cropp
 // props
 const props = defineProps({
 	file: Object,
+	allow_toggle_private: {
+		default: true,
+	},
+	allow_toggle_optimize: {
+		default: true,
+	},
 });
 
 // variables
@@ -98,9 +104,15 @@ let uploaded = computed(() => {
 let is_image = computed(() => {
 	return props.file.file_obj.type.startsWith("image");
 });
-let is_optimizable = computed(() => {
+let allow_toggle_optimize = computed(() => {
 	let is_svg = props.file.file_obj.type == "image/svg+xml";
-	return is_image.value && !is_svg && !uploaded.value && !props.file.failed;
+	return (
+		props.allow_toggle_optimize &&
+		is_image.value &&
+		!is_svg &&
+		!uploaded.value &&
+		!props.file.failed
+	);
 });
 let is_cropable = computed(() => {
 	let croppable_types = ["image/jpeg", "image/png"];

frappe/public/js/frappe/file_uploader/FileUploader.vue

@@ -181,13 +181,18 @@
 					v-for="(file, i) in files"
 					:key="file.name"
 					:file="file"
+					:allow_toggle_private="allow_toggle_private"
+					:allow_toggle_optimize="allow_toggle_optimize"
 					@remove="remove_file(file)"
 					@toggle_private="file.private = !file.private"
 					@toggle_optimize="file.optimize = !file.optimize"
 					@toggle_image_cropper="toggle_image_cropper(i)"
 				/>
 			</div>
-			<div class="flex align-center" v-if="show_upload_button && currently_uploading === -1">
+			<div
+				class="flex align-items-center justify-content-end"
+				v-if="show_upload_button && currently_uploading === -1"
+			>
 				<button class="btn btn-primary btn-sm margin-right" @click="() => upload_files()">
 					<span v-if="files.length === 1">
 						{{ __("Upload file") }}
@@ -196,9 +201,6 @@
 						{{ __("Upload {0} files", [files.length]) }}
 					</span>
 				</button>
-				<div class="text-muted text-medium">
-					{{ __("Click on the lock icon to toggle public/private") }}
-				</div>
 			</div>
 		</div>
 		<ImageCropper
@@ -274,6 +276,18 @@ const props = defineProps({
 	upload_notes: {
 		default: null, // "Images or video, upto 2MB"
 	},
+	allow_web_link: {
+		default: true,
+	},
+	allow_take_photo: {
+		default: true,
+	},
+	allow_toggle_private: {
+		default: true,
+	},
+	allow_toggle_optimize: {
+		default: true,
+	},
 });
 
 // variables
@@ -291,14 +305,16 @@ let trigger_upload = ref(false);
 let close_dialog = ref(false);
 let hide_dialog_footer = ref(false);
 let allow_take_photo = ref(false);
-let allow_web_link = ref(true);
 let google_drive_settings = ref({
 	enabled: false,
 });
 let wrapper_ready = ref(false);
 
 // created
-allow_take_photo.value = window.navigator.mediaDevices;
+if (props.allow_take_photo) {
+	allow_take_photo.value = window.navigator.mediaDevices;
+}
+
 if (frappe.user_id !== "Guest") {
 	frappe.call({
 		// method only available after login

frappe/public/js/frappe/file_uploader/file_uploader.bundle.js

@@ -21,6 +21,10 @@ class FileUploader {
 		attach_doc_image,
 		frm,
 		make_attachments_public,
+		allow_web_link,
+		allow_take_photo,
+		allow_toggle_private,
+		allow_toggle_optimize,
 	} = {}) {
 		frm && frm.attachments.max_reached(true);
 
@@ -55,6 +59,10 @@ class FileUploader {
 			disable_file_browser,
 			attach_doc_image,
 			make_attachments_public,
+			allow_web_link,
+			allow_take_photo,
+			allow_toggle_private,
+			allow_toggle_optimize,
 		});
 		SetVueGlobals(app);
 		this.uploader = app.mount(this.wrapper);