From 5343b005df9446c3cc13bdfb419db9b8720e5946 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 8 Jul 2019 13:46:31 +0900 Subject: 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 --- src/client/app/common/scripts/post-form.ts | 24 +++++++++++++++++----- .../views/components/messaging-room.form.vue | 22 ++++++++++++++++---- .../common/views/components/settings/settings.vue | 24 +++++++++++++++++++++- .../app/common/views/components/uploader.vue | 5 +++-- src/client/app/common/views/widgets/post-form.vue | 24 +++++++++++++++++----- src/client/app/store.ts | 2 ++ 6 files changed, 84 insertions(+), 17 deletions(-) (limited to 'src/client') 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 @@
{{ $t('@._settings.web-search-engine') }}
- {{ $t('@._settings.web-search-engine') }} + {{ $t('@._settings.web-search-engine') }} + + +
+ +
+
{{ $t('@._settings.paste') }}
+ {{ $t('@._settings.pasted-file-name') }} + + + {{ $t('@._settings.paste-dialog') }} + +
@@ -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 = { -- cgit v1.2.3-freya