From 5ec09f92e5d266796902bf4815e0a4deffdb43be Mon Sep 17 00:00:00 2001 From: AssisrMatheus Date: Tue, 28 May 2024 14:25:32 -0400 Subject: [PATCH] feat: allow optimizer to accept file upload and also modify the generated svg --- src/pages/optimize/index.tsx | 93 +++++++++++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 2 deletions(-) diff --git a/src/pages/optimize/index.tsx b/src/pages/optimize/index.tsx index 0ef2834..34f654c 100644 --- a/src/pages/optimize/index.tsx +++ b/src/pages/optimize/index.tsx @@ -51,7 +51,7 @@ export default function Home() { const [uriSvg, setUriSvg] = useState(''); const [originalSvg, setOriginalSvg] = useState(''); - const optimize = useMemo( + const optimizeSvg = useMemo( () => debounce((svgString: string) => { if (svgString) { @@ -118,6 +118,63 @@ export default function Home() { [] ); + const optimizeUri = useMemo( + () => + debounce((svgString: string) => { + if (svgString) { + // A separate call to grab the datauri version + fetch('/api/optimize', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + svgString, + prefixIds: (document?.getElementById('prefixIds') as HTMLInputElement)?.checked, + removeOffCanvasPaths: (document?.getElementById('removeOffCanvasPaths') as HTMLInputElement)?.checked, + removeRasterImages: (document?.getElementById('removeRasterImages') as HTMLInputElement)?.checked, + removeColors: (document?.getElementById('removeColors') as HTMLInputElement)?.checked, + // DO NOT ADD removeXMLNS + // Tells it needs to be a dataUri result + datauri: (document?.getElementById('base64') as HTMLInputElement)?.checked + ? 'base64' + : (document?.getElementById('encUri') as HTMLInputElement)?.checked + ? 'enc' + : 'unenc' + }) + }) + .then((response) => response.json()) + .then((result) => { + if (result?.data) setUriSvg(`url('${result?.data}')`); + else setUriSvg(''); + }) + .catch((err) => { + console.error(err); + setUriSvg(''); + }); + } else { + setOptimizedSvg(undefined); + setOriginalSvg(''); + setUriSvg(''); + } + }, 300), + [] + ); + + const optimize = useCallback( + (svgString: string) => { + if (svgString) { + optimizeSvg(svgString); + optimizeUri(svgString); + } else { + setOptimizedSvg(undefined); + setOriginalSvg(''); + setUriSvg(''); + } + }, + [optimizeSvg, optimizeUri] + ); + const onType = useCallback( (event: React.ChangeEvent) => optimize(event.target.value), [optimize] @@ -128,6 +185,28 @@ export default function Home() { [optimize] ); + const onUpload = useCallback( + (event: React.ChangeEvent) => { + if (event.target.files && event.target.files[0]) { + const reader = new FileReader(); + reader.readAsText(event.target.files[0], 'UTF-8'); + /** + * When the file is read, set the innerHTML of the svg element to the result + * @param evt the event that was triggered + */ + reader.onload = function (evt) { + if (document.getElementById('svg')) { + (document.getElementById('svg')! as HTMLInputElement).value = `${evt.target!.result}`; + + optimize((document.getElementById('svg')! as HTMLInputElement).value); + } + }; + reader.onerror = console.error; + } + }, + [optimize] + ); + return (
@@ -226,13 +305,23 @@ export default function Home() { +