File size: 1,650 Bytes
8a37e0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | import { IconButton } from '@invoke-ai/ui-library';
import { useWorkflowListMenu } from 'features/nodes/store/workflowListMenu';
import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
import { memo, useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import { PiUploadSimpleBold } from 'react-icons/pi';
import { useSaveWorkflowAsDialog } from './SaveWorkflowAsDialog/useSaveWorkflowAsDialog';
const UploadWorkflowButton = () => {
const { t } = useTranslation();
const resetRef = useRef<() => void>(null);
const workflowListMenu = useWorkflowListMenu();
const saveWorkflowAsDialog = useSaveWorkflowAsDialog();
const loadWorkflowFromFile = useLoadWorkflowFromFile({
resetRef,
onSuccess: () => {
workflowListMenu.close();
saveWorkflowAsDialog.onOpen();
},
});
const onDropAccepted = useCallback(
(files: File[]) => {
if (!files[0]) {
return;
}
loadWorkflowFromFile(files[0]);
},
[loadWorkflowFromFile]
);
const { getInputProps, getRootProps } = useDropzone({
accept: { 'application/json': ['.json'] },
onDropAccepted,
noDrag: true,
multiple: false,
});
return (
<>
<IconButton
aria-label={t('workflows.uploadAndSaveWorkflow')}
tooltip={t('workflows.uploadAndSaveWorkflow')}
icon={<PiUploadSimpleBold />}
{...getRootProps()}
pointerEvents="auto"
variant="ghost"
/>
<input {...getInputProps()} />
</>
);
};
export default memo(UploadWorkflowButton);
|