fix click to upload

package-lock.json

@@ -3820,6 +3820,11 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-sage": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/react-sage/-/react-sage-0.1.5.tgz",
+      "integrity": "sha512-a/L5ILib9QitvtCY4BwFnMwaelgDfg7Hg8lNWaYlqxVHtbrvc6A/JGPwcUX/6/ye9LZ4Vo7bCRFKamdMKEpvcA=="
+    },
     "react-svg": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-11.2.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-inlinesvg": "^2.2.2",
+    "react-sage": "^0.1.5",
     "react-svg": "^11.2.1",
     "vector-drawable-svg": "^1.0.2"
   }

pages/_document.js

@@ -12,7 +12,6 @@ export default class MyDocument extends Document {
                     <link rel="manifest" href="/site.webmanifest"/>
                     <meta name="msapplication-TileColor" content="#1F1F1F"/>
                     <meta name="theme-color" content="#1F1F1F"/>
-                    <title>VectorDrawable to SVG</title>
 
                     <meta property="og:url"                content="https://vector-drawable.vercel.app/" />
                     <meta property="og:title"              content="Android VectorDrawable to SVG" />

pages/index.js

@@ -1,7 +1,9 @@
 import {ReactSVG} from "react-svg";
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import {transform} from 'vector-drawable-svg';
 import SVG from 'react-inlinesvg';
+import { useFilePicker } from 'react-sage';
+import Head from "next/head";
 
 
 const STATE_NONE = -1
@@ -52,14 +54,15 @@ async function readFileContent(file) {
 
 export default function Home() {
 
+    const { files, onClick: onDropzoneClick, errors, HiddenFileInput } = useFilePicker({
+        maxFileSize: 1,
+    })
+
     const [dragState, setDragState] = useState(STATE_NONE)
     const [isEnabled, setEnabled] = useState(false);
     const [vectorDrawableFile, setVectorDrawableFile] = useState()
     const [transformedSvg, setTransformedSvg] = useState()
 
-    function handleFileUpload() {
-        setEnabled(!isEnabled)
-    }
 
     function dragEnter(e) {
         e.stopPropagation();
@@ -73,6 +76,19 @@ export default function Home() {
         setDragState(STATE_DRAG_LEAVE)
     }
 
+
+    async function proceedFile(file) {
+        const xmlContent = await readFileContent(file);
+        const svgContent = transformXmlOrNull(xmlContent);
+        if (!svgContent) {
+            return;
+        }
+
+        setTransformedSvg(svgContent);
+        setVectorDrawableFile(file);
+        setDragState(STATE_DROP);
+    }
+
     async function fileDrop(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -81,15 +97,7 @@ export default function Home() {
         if (files.length > 0) {
             const file = files[0]
             if (isValidFileType(file.type)) {
-                const xmlContent = await readFileContent(file);
+                await proceedFile(file);
-                const svgContent = transformXmlOrNull(xmlContent);
-                if (!svgContent) {
-                    return;
-                }
-
-                setTransformedSvg(svgContent);
-                setVectorDrawableFile(file);
-                setDragState(STATE_DROP);
                 return;
             }
         }
@@ -103,7 +111,8 @@ export default function Home() {
         e.dataTransfer.dropEffect = 'copy';
     }
 
-    function clearUpload() {
+    function clearUpload(e) {
+        e.stopPropagation();
         setDragState(STATE_NONE)
         setVectorDrawableFile(null);
         setTransformedSvg(null);
@@ -121,48 +130,68 @@ export default function Home() {
         downloadBlob(filename, transformedSvg);
     }
 
+    useEffect(() => {
+        const getDataUrls = async () => {
+            if (files.length <= 0) {
+                return;
+            }
+            const file = files[0];
+            if (isValidFileType(file.type)) {
+                await proceedFile(file);
+            }
+        }
+        getDataUrls()
+    }, [files])
+
     return (
-        <div className="vd-form-center">
+        <>
-            <div className="vd-head vd-form-center">
+            <Head>
-                <h1 className="vd-title">VectorDrawable to SVG</h1>
+                <title>VectorDrawable to SVG</title>
-                <p className="vd-subtitle">Drop a valid vector drawable file here.</p>
+            </Head>
-                <div
+            <div className="vd-form-center">
-                    onDragEnter={dragEnter}
+                <HiddenFileInput accept=".xml" multiple={false} />
-                    onDragLeave={dragLeave}
+                <div className="vd-head vd-form-center">
-                    onDragOver={dragOver}
+                    <h1 className="vd-title">VectorDrawable to SVG</h1>
-                    onDrop={fileDrop}
+                    <p className="vd-subtitle">Drop a valid vector drawable file here.</p>
-                    onClick={handleFileUpload}
+                    <div
-                    className={"vd-dropzone " + dropzoneClassOfState(dragState)}>
+                        onDragEnter={dragEnter}
-                    <div className="vd-placeholder">
+                        onDragLeave={dragLeave}
-                        <ReactSVG src="plus.svg"/>
+                        onDragOver={dragOver}
-                    </div>
+                        onDrop={fileDrop}
-                    <div className="vd-image-container">
+                        onClick={onDropzoneClick}
-                        <div onClick={clearUpload} className="text-button-icon">
-                            <ReactSVG src="close.svg"/>
-                        </div>
-                        <div className="vd-image">
-                            <SVG src={transformedSvg} width={300} height={300} title="SVG"/>
-                        </div>
 
-                        <div className="vd-filename">
+                        className={"vd-dropzone " + dropzoneClassOfState(dragState)}>
-                            <p>{vectorDrawableFile?.name}</p>
+                        <div className="vd-placeholder">
+                            <ReactSVG src="plus.svg"/>
+                        </div>
+                        <div className="vd-image-container">
+                            <div onClick={clearUpload} className="text-button-icon">
+                                <ReactSVG src="close.svg"/>
+                            </div>
+                            <div className="vd-image">
+                                <SVG src={transformedSvg} width={300} height={300} title="SVG"/>
+                            </div>
+
+                            <div className="vd-filename">
+                                <p>{vectorDrawableFile?.name}</p>
+                            </div>
                         </div>
                     </div>
+
+                    <button onClick={downloadCurrentSvg} disabled={!vectorDrawableFile} className="vd-download">
+                        <ReactSVG src="/download-circular-button.svg"/>
+                        Download
+                    </button>
+
+                    <footer className="vd-footer">
+                        <div className="vd-github">
+                            <a href="https://github.com/seanghay/vector-drawable-nextjs" target="_blank">
+                                <ReactSVG src="/github.svg"/>
+                            </a>
+                        </div>
+                    </footer>
                 </div>
-
-                <button onClick={downloadCurrentSvg} disabled={!vectorDrawableFile} className="vd-download">
-                    <ReactSVG src="/download-circular-button.svg"/>
-                    Download
-                </button>
-
-                <footer className="vd-footer">
-                    <div className="vd-github">
-                        <a href="https://github.com/seanghay/vector-drawable-nextjs" target="_blank">
-                            <ReactSVG src="/github.svg"/>
-                        </a>
-                    </div>
-                </footer>
             </div>
-        </div>
+        </>
     )
 }