From be8262ef5b7ee46b1072d6d9125f48489d6c36f6 Mon Sep 17 00:00:00 2001 From: caushcani Date: Wed, 4 Dec 2024 23:20:41 +0100 Subject: [PATCH 1/4] start pasting images --- .gitignore | 1 + .../components/launches/add.edit.model.tsx | 58 +++++++++++++++++-- .../src/components/launches/editor.tsx | 1 + .../src/components/media/media.component.tsx | 22 +++---- .../src/components/media/new.uploader.tsx | 5 ++ .../components/settings/teams.component.tsx | 2 +- 6 files changed, 70 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 3d97dd0e5..27a89505d 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ tmp .env # dependencies node_modules +uploads # IDEs and editors /.idea diff --git a/apps/frontend/src/components/launches/add.edit.model.tsx b/apps/frontend/src/components/launches/add.edit.model.tsx index 58b4c4cff..afd6398e0 100644 --- a/apps/frontend/src/components/launches/add.edit.model.tsx +++ b/apps/frontend/src/components/launches/add.edit.model.tsx @@ -50,6 +50,9 @@ import { useUser } from '@gitroom/frontend/components/layout/user.context'; import { makeId } from '@gitroom/nestjs-libraries/services/make.is'; import Image from 'next/image'; import { weightedLength } from '@gitroom/helpers/utils/count.length'; +import { useVariables } from '@gitroom/react/helpers/variable.context'; +import Uppy from '@uppy/core'; +import { getUppyUploadPlugin } from '@gitroom/react/helpers/uppy.upload'; function countCharacters(text: string, type: string): number { if (type !== 'x') { @@ -383,6 +386,38 @@ export const AddEditModal: FC<{ }); }, [data, postFor, selectedIntegrations]); + + const {backendUrl, storageProvider} = useVariables(); + + const uploadImageToServer = (_file: any, index:number) => { + const uppy2 = new Uppy({ + autoProceed: true, + restrictions: { + maxNumberOfFiles: 1, + // allowedFileTypes: allowedFileTypes.split(','), + maxFileSize: 1000000000, + }, + }); + + const { plugin, options } = getUppyUploadPlugin(storageProvider, fetch, backendUrl) + uppy2.use(plugin, options) + // Set additional metadata when a file is added + + uppy2.addFile(_file) + + uppy2.on('complete', (result) => { + if(result){ + const targetImage = result?.successful![0].response?.body + const newMedia = [...( value?.image || []), targetImage]; + + const addToState = { target: { name:"image", value: newMedia } }; + + const r = changeImage(index) + r(addToState) + } + }); + } + return ( <> {user?.tier?.ai && ( @@ -486,6 +521,21 @@ export const AddEditModal: FC<{ preview="edit" // @ts-ignore onChange={changeValue(index)} + onPaste={(event) => { + const clipboardData = event.clipboardData || window.clipboardData; + if (clipboardData && clipboardData.items) { + console.log("clipboardData.items", clipboardData.items) + for (const item of clipboardData.items) { + if (item.type.indexOf('image') !== -1) { + const blob = item.getAsFile(); + console.log("blob", blob); + uploadImageToServer(blob, index) + } + } + } else { + // console.log('Text Data:', clipboardData.getData('text')); + } + }} /> {showError && @@ -596,10 +646,10 @@ export const AddEditModal: FC<{ {!canSendForPublication ? 'Not matching order' : postFor - ? 'Submit for order' - : !existingData.integration - ? 'Add to calendar' - : 'Update'} + ? 'Submit for order' + : !existingData.integration + ? 'Add to calendar' + : 'Update'} {!postFor && (
diff --git a/apps/frontend/src/components/launches/editor.tsx b/apps/frontend/src/components/launches/editor.tsx index e2906b018..07fbc801b 100644 --- a/apps/frontend/src/components/launches/editor.tsx +++ b/apps/frontend/src/components/launches/editor.tsx @@ -54,6 +54,7 @@ export const Editor = forwardRef< textareaPurpose: `Assist me in writing social media posts.`, chatApiConfigs: {}, }} + onPaste={props.onPaste} /> ) : ( diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx index d9393e584..1f826af00 100644 --- a/apps/frontend/src/components/media/media.component.tsx +++ b/apps/frontend/src/components/media/media.component.tsx @@ -215,25 +215,19 @@ export const MultiMediaComponent: FC<{ }> = (props) => { const { name, label, error, description, onChange, value } = props; const user = useUser(); - useEffect(() => { - if (value) { - setCurrentMedia(value); - } - }, []); const [modal, setShowModal] = useState(false); const [mediaModal, setMediaModal] = useState(false); - const [currentMedia, setCurrentMedia] = useState(value); const mediaDirectory = useMediaDirectory(); const changeMedia = useCallback( (m: { path: string; id: string }) => { - const newMedia = [...(currentMedia || []), m]; - setCurrentMedia(newMedia); + const newMedia = [...(value || []), m]; + // setCurrentMedia(newMedia); onChange({ target: { name, value: newMedia } }); }, - [currentMedia] + [value] ); const showModal = useCallback(() => { @@ -246,11 +240,11 @@ export const MultiMediaComponent: FC<{ const clearMedia = useCallback( (topIndex: number) => () => { - const newMedia = currentMedia?.filter((f, index) => index !== topIndex); - setCurrentMedia(newMedia); + const newMedia = value?.filter((f, index) => index !== topIndex); + // setCurrentMedia(newMedia); onChange({ target: { name, value: newMedia } }); }, - [currentMedia] + [value] ); const designMedia = useCallback(() => { @@ -310,8 +304,8 @@ export const MultiMediaComponent: FC<{
- {!!currentMedia && - currentMedia.map((media, index) => ( + {!!value && + value.map((media, index) => ( <>
{ @@ -84,9 +85,13 @@ export function MultipartFileUploaderAfter({ uppy2.on('complete', (result) => { onUploadSuccess(result); + console.log('uppy complete:', result) }); uppy2.on('upload-success', (file, response) => { + console.log('uppy upload success:file', file) + console.log('uppy upload success:response', response) + // @ts-ignore uppy.setFileState(file.id, { // @ts-ignore diff --git a/apps/frontend/src/components/settings/teams.component.tsx b/apps/frontend/src/components/settings/teams.component.tsx index 509919bb3..5ff001581 100644 --- a/apps/frontend/src/components/settings/teams.component.tsx +++ b/apps/frontend/src/components/settings/teams.component.tsx @@ -210,7 +210,7 @@ export const TeamsComponent = () => {