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.
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
onPastehandler that checks if the clipboard has a text/plain format available, and, if so, creates a fakeFileobject with the contents from the clipboard and a filename of "file.tsv" that is passed toonSuccessas 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.This allows pasting using keyboard. Let me know if you'd prefer to have this put in as is as a proper pull request.