Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

disable pasting which is causing a flurry of requests

Browse Source
This commit is contained in:
Abi Raja 2023-12-21 10:56:47 -05:00
parent 0c43b5e7cf
commit 9b59b2d595
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/components/ImageUpload.tsx
View File

@ -1,4 +1,5 @@
import { useState, useEffect, useMemo, useCallback } from "react"; import { useState, useEffect, useMemo } from "react";
// useCallback
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
// import { PromptImage } from "../../../types"; // import { PromptImage } from "../../../types";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -89,39 +90,39 @@ function ImageUpload({ setReferenceImages }: Props) {
}, },
}); });
const pasteEvent = useCallback( // const pasteEvent = useCallback(
(event: ClipboardEvent) => { // (event: ClipboardEvent) => {
const clipboardData = event.clipboardData; // const clipboardData = event.clipboardData;
if (!clipboardData) return; // if (!clipboardData) return;
const items = clipboardData.items; // const items = clipboardData.items;
const files = []; // const files = [];
for (let i = 0; i < items.length; i++) { // for (let i = 0; i < items.length; i++) {
const file = items[i].getAsFile(); // const file = items[i].getAsFile();
if (file && file.type.startsWith("image/")) { // if (file && file.type.startsWith("image/")) {
files.push(file); // files.push(file);
} // }
} // }
// Convert images to data URLs and set the prompt images state // // Convert images to data URLs and set the prompt images state
Promise.all(files.map((file) => fileToDataURL(file))) // Promise.all(files.map((file) => fileToDataURL(file)))
.then((dataUrls) => { // .then((dataUrls) => {
if (dataUrls.length > 0) { // if (dataUrls.length > 0) {
setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string)); // setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
} // }
}) // })
.catch((error) => { // .catch((error) => {
// TODO: Display error to user // // TODO: Display error to user
console.error("Error reading files:", error); // console.error("Error reading files:", error);
}); // });
}, // },
[setReferenceImages] // [setReferenceImages]
); // );
// TODO: Make sure we don't listen to paste events in text input components // TODO: Make sure we don't listen to paste events in text input components
useEffect(() => { // useEffect(() => {
window.addEventListener("paste", pasteEvent); // window.addEventListener("paste", pasteEvent);
}, [pasteEvent]); // }, [pasteEvent]);
useEffect(() => { useEffect(() => {
return () => files.forEach((file) => URL.revokeObjectURL(file.preview)); return () => files.forEach((file) => URL.revokeObjectURL(file.preview));