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,14 +76,8 @@ export default function Home() {
         setDragState(STATE_DRAG_LEAVE)
     }
 
-    async function fileDrop(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const files = e.dataTransfer.files;
 
-        if (files.length > 0) {
+    async function proceedFile(file) {
-            const file = files[0]
-            if (isValidFileType(file.type)) {
         const xmlContent = await readFileContent(file);
         const svgContent = transformXmlOrNull(xmlContent);
         if (!svgContent) {
@@ -90,6 +87,17 @@ export default function Home() {
         setTransformedSvg(svgContent);
         setVectorDrawableFile(file);
         setDragState(STATE_DROP);
+    }
+
+    async function fileDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer.files;
+
+        if (files.length > 0) {
+            const file = files[0]
+            if (isValidFileType(file.type)) {
+                await proceedFile(file);
                 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,8 +130,26 @@ 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 (
+        <>
+            <Head>
+                <title>VectorDrawable to SVG</title>
+            </Head>
             <div className="vd-form-center">
+                <HiddenFileInput accept=".xml" multiple={false} />
                 <div className="vd-head vd-form-center">
                     <h1 className="vd-title">VectorDrawable to SVG</h1>
                     <p className="vd-subtitle">Drop a valid vector drawable file here.</p>
@@ -131,7 +158,8 @@ export default function Home() {
                         onDragLeave={dragLeave}
                         onDragOver={dragOver}
                         onDrop={fileDrop}
-                    onClick={handleFileUpload}
+                        onClick={onDropzoneClick}
+
                         className={"vd-dropzone " + dropzoneClassOfState(dragState)}>
                         <div className="vd-placeholder">
                             <ReactSVG src="plus.svg"/>
@@ -164,5 +192,6 @@ export default function Home() {
                     </footer>
                 </div>
             </div>
+        </>
     )
 }