feat(frontend): アップロードするファイルの名前をランダム文字列にできるように (#13688)

* feat(frontend): アップロードするファイルの名前をランダム文字列にできるように

* Update Changelog

* refactor

* 設定項目を移動

* fix

* 「オリジナルのファイル名を保持」に変更

* 拡張子を付加するように
This commit is contained in:
かっこかり 2024-04-13 12:51:37 +09:00 committed by GitHub
parent eb1ef1484a
commit f5100cc81f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 27 additions and 3 deletions

View File

@ -10,6 +10,7 @@
- Fix: Play作成時に設定した公開範囲が機能していない問題を修正 - Fix: Play作成時に設定した公開範囲が機能していない問題を修正
### Client ### Client
- Feat: アップロードするファイルの名前をランダム文字列にできるように
- Enhance: 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるように - Enhance: 自分のノートの添付ファイルから直接ファイルの詳細ページに飛べるように
- Enhance: 広告がMisskeyと同一ドメインの場合はRouterで遷移するように - Enhance: 広告がMisskeyと同一ドメインの場合はRouterで遷移するように
- Enhance: リアクション・いいねの総数を表示するように - Enhance: リアクション・いいねの総数を表示するように

8
locales/index.d.ts vendored
View File

@ -4936,6 +4936,14 @@ export interface Locale extends ILocale {
* UIを使用する * UIを使用する
*/ */
"useNativeUIForVideoAudioPlayer": string; "useNativeUIForVideoAudioPlayer": string;
/**
*
*/
"keepOriginalFilename": string;
/**
*
*/
"keepOriginalFilenameDescription": string;
"_bubbleGame": { "_bubbleGame": {
/** /**
* *

View File

@ -1230,6 +1230,8 @@ useTotp: "ワンタイムパスワードを使う"
useBackupCode: "バックアップコードを使う" useBackupCode: "バックアップコードを使う"
launchApp: "アプリを起動" launchApp: "アプリを起動"
useNativeUIForVideoAudioPlayer: "動画・音声の再生にブラウザのUIを使用する" useNativeUIForVideoAudioPlayer: "動画・音声の再生にブラウザのUIを使用する"
keepOriginalFilename: "オリジナルのファイル名を保持"
keepOriginalFilenameDescription: "この設定をオフにすると、アップロード時にファイル名が自動でランダム文字列に置き換えられます。"
_bubbleGame: _bubbleGame:
howToPlay: "遊び方" howToPlay: "遊び方"

View File

@ -44,6 +44,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.keepOriginalUploading }}</template> <template #label>{{ i18n.ts.keepOriginalUploading }}</template>
<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template> <template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
</MkSwitch> </MkSwitch>
<MkSwitch v-model="keepOriginalFilename">
<template #label>{{ i18n.ts.keepOriginalFilename }}</template>
<template #caption>{{ i18n.ts.keepOriginalFilenameDescription }}</template>
</MkSwitch>
<MkSwitch v-model="alwaysMarkNsfw" @update:modelValue="saveProfile()"> <MkSwitch v-model="alwaysMarkNsfw" @update:modelValue="saveProfile()">
<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template> <template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
</MkSwitch> </MkSwitch>
@ -96,6 +100,7 @@ const meterStyle = computed(() => {
}); });
const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading')); const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
const keepOriginalFilename = computed(defaultStore.makeGetterSetter('keepOriginalFilename'));
misskeyApi('drive').then(info => { misskeyApi('drive').then(info => {
capacity.value = info.capacity; capacity.value = info.capacity;

View File

@ -5,6 +5,7 @@
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { v4 as uuid } from 'uuid';
import { readAndCompressImage } from '@misskey-dev/browser-image-resizer'; import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
import { getCompressionConfig } from './upload/compress-config.js'; import { getCompressionConfig } from './upload/compress-config.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
@ -39,13 +40,16 @@ export function uploadFile(
if (folder && typeof folder === 'object') folder = folder.id; if (folder && typeof folder === 'object') folder = folder.id;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const id = Math.random().toString(); const id = uuid();
const reader = new FileReader(); const reader = new FileReader();
reader.onload = async (): Promise<void> => { reader.onload = async (): Promise<void> => {
const filename = name ?? file.name ?? 'untitled';
const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
const ctx = reactive<Uploading>({ const ctx = reactive<Uploading>({
id: id, id,
name: name ?? file.name ?? 'untitled', name: defaultStore.state.keepOriginalFilename ? filename : id + extension,
progressMax: undefined, progressMax: undefined,
progressValue: undefined, progressValue: undefined,
img: window.URL.createObjectURL(file), img: window.URL.createObjectURL(file),

View File

@ -446,6 +446,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: false, default: false,
}, },
keepOriginalFilename: {
where: 'device',
default: true,
},
sound_masterVolume: { sound_masterVolume: {
where: 'device', where: 'device',