feat: アバターデコレーションをフロントからアップロードできるように

packages/frontend/src/pages/avatar-decorations.vue

@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #caption>{{ avatarDecoration.description }}</template>
 
 				<div class="_gaps_m">
+					<MkButton rounded style="margin: 0 auto;" @click="selectImage(avatarDecoration, $event)">{{ i18n.ts.selectFile }}</MkButton>
 					<MkInput v-model="avatarDecoration.name">
 						<template #label>{{ i18n.ts.name }}</template>
 					</MkInput>
@@ -44,9 +45,17 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFolder from '@/components/MkFolder.vue';
+import { selectFile } from '@/scripts/select-file.js';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
+// ファイル選択
+async function selectImage(decoration, ev) {
+	let file = await selectFile(ev.currentTarget ?? ev.target, null);
+	decoration.name = file.name.replace(/\.(.+)$/, '');
+	decoration.url = file.url;
+}
+
 function add() {
 	avatarDecorations.value.unshift({
 		_id: Math.random().toString(36),