Feature: Allow import from clipboard #263
Description
When copying table data from a spreadsheet application or from an HTML table, the data in the clipboard is formatted as tsv when text/plain is requested. Given that tsv files can already be processed, reading tsv data from the clipboard rather than having to upload a file would simplify the overall process in some situations.
I was able to make a proof of concept showing how this can work by making modifications to UploaderWrapper.tsx, essentially adding an onPaste handler that checks if the clipboard has a text/plain format available, and, if so, creates a fake File object with the contents from the clipboard and a filename of "file.tsv" that is passed to onSuccess as if a person had uploaded a tsv file with the contents of the clipboard. With this, I was able to paste the contents from an excel file into the import process without having to save it first. I've not done any further testing, however.
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, ClipboardEvent } from "react";
import { useDropzone } from "react-dropzone";
import { useTranslation } from "react-i18next";
import { Button } from "@chakra-ui/button";
@@ -11,6 +11,15 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
const [loading, setLoading] = useState(false);
const theme = useThemeStore((state) => state.theme);
const { t } = useTranslation();
+
+ const attemptPasteTsv = (event: ClipboardEvent<HTMLDivElement>) => {
+ if (event.clipboardData?.types.includes('text/plain')) {
+ event.preventDefault();
+ setLoading(true);
+ onSuccess(new File([event.clipboardData.getData('text/plain')], 'file.tsv'));
+ setLoading(false);
+ }
+ };
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
noClick: true,
@@ -40,6 +49,7 @@ export default function UploaderWrapper({ onSuccess, setDataError, ...props }: U
<Box padding="15px" border="1px solid var(--color-border)" borderRadius="var(--border-radius-2)">
<Box
{...getRootProps()}
+ onPaste={attemptPasteTsv}
width="100%"
height="100%"
display="flex"This allows pasting using keyboard. Let me know if you'd prefer to have this put in as is as a proper pull request.