mirrors/zipline
1
0
Fork 0
mirror of https://github.com/diced/zipline.git synced 2025-05-11 18:36:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ctrl+v to paste image

Browse source
This commit is contained in:
diced 2024-03-26 23:38:33 -07:00
parent c80ff22d92
commit e6a09b542e
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
1 changed files with 31 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/pages/upload/File/index.tsx
View file

@ -6,6 +6,7 @@ import {
Collapse,
Grid,
Group,
Kbd,
Paper,
Progress,
Text,
@ -16,10 +17,10 @@ import {
} from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { useClipboard, useColorScheme } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';
import { notifications, showNotification } from '@mantine/notifications';
import { IconDeviceSdCard, IconFiles, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import Link from 'next/link';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import UploadOptionsButton from '../UploadOptionsButton';
import { uploadFiles } from '../uploadFiles';
import ToUploadFile from './ToUploadFile';
@ -42,6 +43,23 @@ export default function UploadFile() {
const [progress, setProgress] = useState(0);
const [dropLoading, setLoading] = useState(false);
const handlePaste = (e: ClipboardEvent) => {
if (!e.clipboardData) return;
for (let i = 0; i !== e.clipboardData.items.length; ++i) {
if (!e.clipboardData.items[i].type.startsWith('image')) return;
const blob = e.clipboardData.items[i].getAsFile();
if (!blob) return;
setFiles([...files, blob]);
showNotification({
message: `Image ${blob.name} pasted from clipboard`,
color: 'blue',
});
}
};
const aggSize = () => files.reduce((acc, file) => acc + file.size, 0);
const upload = () => {
@ -93,6 +111,14 @@ export default function UploadFile() {
}
};
useEffect(() => {
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, []);
return (
<>
<Group gap='sm'>
@ -130,6 +156,9 @@ export default function UploadFile() {
<Text size='xl' inline>
Drag images here or click to select files
</Text>
<Text size='sm' inline mt='xs'>
Or <Kbd size='xs'>Ctrl</Kbd> + <Kbd size='xs'>V</Kbd> to paste images from clipboard
</Text>
<Text size='sm' c='dimmed' inline mt={7}>
Attach as many files as you like, they will show up below to review before uploading.
</Text>