Improve paste uploading Resolve #3023 (#4542)

* resolve #3023

* fix

* fix

* better description

* widget

* fix text

* Update post-form.vue

* Fix enter-file-name dialog title text

* Fix type

* On messaging room

* Replace moment.js to original one

* Fix formatDateTimeString

6 files changed, 84 insertions, 17 deletions

diff --git a/src/client/app/common/scripts/post-form.ts b/src/client/app/common/scripts/post-form.ts
index 1d93b4c268..7cf26f65bf 100644
--- a/src/client/app/common/scripts/post-form.ts
+++ b/src/client/app/common/scripts/post-form.ts
@@ -8,6 +8,7 @@ import { host, url } from '../../config';
 import i18n from '../../i18n';
 import { erase, unique } from '../../../../prelude/array';
 import extractMentions from '../../../../misc/extract-mentions';
+import { formatTimeString } from '../../../../misc/format-time-string';
 
 export default (opts) => ({
 	i18n: i18n(),
@@ -244,8 +245,8 @@ export default (opts) => ({
 			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
 		},
 
-		upload(file) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder);
+		upload(file: File, name?: string) {
+			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
 		},
 
 		onChangeUploadings(uploads) {
@@ -334,10 +335,23 @@ export default (opts) => ({
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
 		},
 
-		async onPaste(e) {
-			for (const item of Array.from(e.clipboardData.items)) {
+		async onPaste(e: ClipboardEvent) {
+			for (const { item, i } of Array.from(e.clipboardData.items).map((item, i) => ({item, i}))) {
 				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
+					const file = item.getAsFile();
+					const lio = file.name.lastIndexOf('.');
+					const ext = lio >= 0 ? file.name.slice(lio) : '';
+					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+					const name = this.$store.state.settings.pasteDialog
+						? await this.$root.dialog({
+								title: this.$t('@.post-form.enter-file-name'),
+								input: {
+									default: formatted
+								},
+								allowEmpty: false
+							}).then(({ canceled, result }) => canceled ? false : result)
+						: formatted;
+					if (name) this.upload(file, name);
 				}
 			}
 
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 74e30d29e8..bd63bab2c1 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -30,6 +30,7 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import * as autosize from 'autosize';
+import { formatTimeString } from '../../../../../misc/format-time-string';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/messaging-room.form.vue'),
@@ -84,13 +85,26 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		onPaste(e) {
+		async onPaste(e: ClipboardEvent) {
 			const data = e.clipboardData;
 			const items = data.items;
 
 			if (items.length == 1) {
 				if (items[0].kind == 'file') {
-					this.upload(items[0].getAsFile());
+					const file = items[0].getAsFile();
+					const lio = file.name.lastIndexOf('.');
+					const ext = lio >= 0 ? file.name.slice(lio) : '';
+					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
+					const name = this.$store.state.settings.pasteDialog
+						? await this.$root.dialog({
+							title: this.$t('@.post-form.enter-file-name'),
+							input: {
+								default: formatted
+							},
+							allowEmpty: false
+						}).then(({ canceled, result }) => canceled ? false : result)
+						: formatted;
+					if (name) this.upload(file, name);
 				}
 			} else {
 				if (items[0].kind == 'file') {
@@ -157,8 +171,8 @@ export default Vue.extend({
 			this.upload((this.$refs.file as any).files[0]);
 		},
 
-		upload(file) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder);
+		upload(file: File, name?: string) {
+			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
 		},
 
 		onUploaded(file) {
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 5f370c8be7..281524979e 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -140,7 +140,19 @@
 
 			<section>
 				<header>{{ $t('@._settings.web-search-engine') }}</header>
-				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template></ui-input>
+				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}
+					<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template>
+				</ui-input>
+			</section>
+
+			<section v-if="!$root.isMobile">
+				<header>{{ $t('@._settings.paste') }}</header>
+				<ui-input v-model="pastedFileName">{{ $t('@._settings.pasted-file-name') }}
+					<template #desc>{{ $t('@._settings.pasted-file-name-desc') }}</template>
+				</ui-input>
+				<ui-switch v-model="pasteDialog">{{ $t('@._settings.paste-dialog') }}
+					<template #desc>{{ $t('@._settings.paste-dialog-desc') }}</template>
+				</ui-switch>
 			</section>
 		</ui-card>
 
@@ -412,6 +424,16 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
 		},
 
+		pastedFileName: {
+			get() { return this.$store.state.settings.pastedFileName; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'pastedFileName', value }); }
+		},
+
+		pasteDialog: {
+			get() { return this.$store.state.settings.pasteDialog; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'pasteDialog', value }); }
+		},
+
 		showReplyTarget: {
 			get() { return this.$store.state.settings.showReplyTarget; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index 78fbcbf6b8..9f02da6c1e 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 			});
 		},
 
-		upload(file: File, folder: any) {
+		upload(file: File, folder: any, name?: string) {
 			if (folder && typeof folder == 'object') folder = folder.id;
 
 			const id = Math.random();
@@ -61,7 +61,7 @@ export default Vue.extend({
 
 					const ctx = {
 						id: id,
-						name: file.name || 'untitled',
+						name: name || file.name || 'untitled',
 						progress: undefined,
 						img: window.URL.createObjectURL(file)
 					};
@@ -75,6 +75,7 @@ export default Vue.extend({
 					data.append('file', file);
 
 					if (folder) data.append('folderId', folder);
+					if (name) data.append('name', name);
 
 					const xhr = new XMLHttpRequest();
 					xhr.open('POST', apiUrl + '/drive/files/create', true);
diff --git a/src/client/app/common/views/widgets/post-form.vue b/src/client/app/common/views/widgets/post-form.vue
index 5e577c9a43..6680a11435 100644
--- a/src/client/app/common/views/widgets/post-form.vue
+++ b/src/client/app/common/views/widgets/post-form.vue
@@ -38,6 +38,7 @@
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
+import { formatTimeString } from '../../../../../misc/format-time-string';
 
 export default define({
 	name: 'post-form',
@@ -109,10 +110,23 @@ export default define({
 			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && !this.posting && this.text) this.post();
 		},
 
-		onPaste(e) {
-			for (const item of Array.from(e.clipboardData.items)) {
+		async onPaste(e: ClipboardEvent) {
+			for (const { item, i } of Array.from(e.clipboardData.items).map((item, i) => ({item, i}))) {
 				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
+					const file = item.getAsFile();
+					const lio = file.name.lastIndexOf('.');
+					const ext = lio >= 0 ? file.name.slice(lio) : '';
+					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+					const name = this.$store.state.settings.pasteDialog
+						? await this.$root.dialog({
+								title: this.$t('@.post-form.enter-file-name'),
+								input: {
+									default: formatted
+								},
+								allowEmpty: false
+							}).then(({ canceled, result }) => canceled ? false : result)
+						: formatted;
+					if (name) this.upload(file, name);
 				}
 			}
 		},
@@ -121,8 +135,8 @@ export default define({
 			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
 		},
 
-		upload(file) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder);
+		upload(file: File, name?: string) {
+			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
 		},
 
 		onDragover(e) {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 252feb3982..18137c1ca9 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -39,6 +39,8 @@ const defaultSettings = {
 	mobileHomeProfiles: {},
 	deckProfiles: {},
 	uploadFolder: null,
+	pastedFileName: 'yyyy-MM-dd HH-mm-ss [{{number}}]',
+	pasteDialog: false,
 };
 
 const defaultDeviceSettings = {