feat(frontend): allow cropping images on drive (#11092)

* feat(frontend): allow cropping images on drive

* nanka iroiro

* folder

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

1 files changed, 15 insertions, 8 deletions

diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index 82363499b7..b2d60d36c4 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -47,6 +47,7 @@ const emit = defineEmits<{
 const props = defineProps<{
 	file: misskey.entities.DriveFile;
 	aspectRatio: number;
+	uploadFolder?: string | null;
 }>();
 
 const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
@@ -58,11 +59,17 @@ let loading = $ref(true);
 const ok = async () => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
-		croppedCanvas.toBlob(blob => {
+		croppedCanvas?.toBlob(blob => {
+			if (!blob) return;
 			const formData = new FormData();
 			formData.append('file', blob);
-			formData.append('i', $i.token);
-			if (defaultStore.state.uploadFolder) {
+			formData.append('name', `cropped_${props.file.name}`);
+			formData.append('isSensitive', props.file.isSensitive ? 'true' : 'false');
+			formData.append('comment', props.file.comment ?? 'null');
+			formData.append('i', $i!.token);
+			if (props.uploadFolder || props.uploadFolder === null) {
+				formData.append('folderId', props.uploadFolder ?? 'null');
+			} else if (defaultStore.state.uploadFolder) {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
 
@@ -82,12 +89,12 @@ const ok = async () => {
 	const f = await promise;
 
 	emit('ok', f);
-	dialogEl.close();
+	dialogEl!.close();
 };
 
 const cancel = () => {
 	emit('cancel');
-	dialogEl.close();
+	dialogEl!.close();
 };
 
 const onImageLoad = () => {
@@ -100,7 +107,7 @@ const onImageLoad = () => {
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
+	cropper = new Cropper(imgEl!, {
 	});
 
 	const computedStyle = getComputedStyle(document.documentElement);
@@ -112,13 +119,13 @@ onMounted(() => {
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper!.getCropperImage()!.$center('contain');
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper!.getCropperImage()!.$center('contain');
 		selection.$center();
 	}, 500);
 });