Improved upload API

assets/js/page_upload.jsx

+function postData(url, data) {
+    return fetch(url, {
+        body: data,
+        cache: 'no-cache',
+        credentials: 'same-origin',
+        method: 'POST',
+        mode: 'cors',
+        redirect: 'follow'
+    }).then(response => response.json())
+}
+
+const form = document.querySelector("form.upload");
+const element = document.querySelector("form.upload input[type=file]");
+const results = document.querySelector(".uploading.images");
+element.addEventListener("change", () => {
+    for (let file of element.files) {
+        const reader = new FileReader();
+        reader.addEventListener("load", (e) => {
+            const dataUrl = e.target.result;
+
+            const node = <div className="uploading image">
+                <h2 className="title fake-input" contentEditable="true" placeholder="Title"/>
+                <a className="image">
+                    <img src={dataUrl}/>
+                </a>
+                <p className="description fake-input" contentEditable="true" placeholder="Description" data-multiline/>
+            </div>;
+            results.appendChild(node);
+
+            const data = new FormData();
+            data.append("file", file, file.name);
+
+            postData("/upload/", data).then((json) => {
+                if (json.success) {
+                    node.querySelector("a.image").href = "/" + json.id;
+                    node.querySelector("a.image img").src = "/" + json.id;
+                } else {
+                    node.insertBefore(
+                        <div className="alert error">{JSON.stringify(json.errors)}</div>,
+                        node.querySelector(".description")
+                    )
+                }
+
+                console.log(json);
+            });
+        });
+        reader.readAsDataURL(file);
+    }
+})
\ No newline at end of file

package-lock.json

@@ -8,6 +8,21 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "acorn": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
+      "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-4.1.1.tgz",
+      "integrity": "sha512-JY+iV6r+cO21KtntVvFkD+iqjtdpRUpGqKWgfkCdZq1R+kbreEl8EcdcJR4SmiIgsIQT33s6QzheQ9a275Q8xw==",
+      "dev": true,
+      "requires": {
+        "acorn": "5.5.3"
+      }
+    },
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -270,6 +285,12 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -307,6 +328,46 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
       "dev": true
     },
+    "escodegen": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz",
+      "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==",
+      "dev": true,
+      "requires": {
+        "esprima": "3.1.3",
+        "estraverse": "4.2.0",
+        "esutils": "2.0.2",
+        "optionator": "0.8.2",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "esprima": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+      "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+      "dev": true
+    },
+    "estraverse": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
+    },
     "extend": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
@@ -319,6 +380,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
     "find-up": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -711,6 +778,16 @@
         "invert-kv": "1.0.0"
       }
     },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "1.1.2",
+        "type-check": "0.3.2"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -792,6 +869,12 @@
         "trim-newlines": "1.0.0"
       }
     },
+    "merge": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz",
+      "integrity": "sha1-dTHjnUlJwoGma4xabgJl6LBYlNo=",
+      "dev": true
+    },
     "mime-db": {
       "version": "1.33.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
@@ -845,6 +928,20 @@
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
       "dev": true
     },
+    "nativejsx": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/nativejsx/-/nativejsx-4.3.0.tgz",
+      "integrity": "sha512-tzLpApz/e1T8mAJg0wUba25vFr6TEoxwcc1d7xxhwrfcRDUHVtMRE5+7hKSb2jT4HaUk3iuj9KSAAkJ0O//O8A==",
+      "dev": true,
+      "requires": {
+        "acorn": "5.5.3",
+        "acorn-jsx": "4.1.1",
+        "commander": "2.15.0",
+        "escodegen": "1.9.1",
+        "glob": "7.1.2",
+        "merge": "1.2.0"
+      }
+    },
     "node-gyp": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
@@ -961,6 +1058,20 @@
         "wrappy": "1.0.2"
       }
     },
+    "optionator": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "dev": true,
+      "requires": {
+        "deep-is": "0.1.3",
+        "fast-levenshtein": "2.0.6",
+        "levn": "0.3.0",
+        "prelude-ls": "1.1.2",
+        "type-check": "0.3.2",
+        "wordwrap": "1.0.0"
+      }
+    },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -1048,6 +1159,12 @@
         "pinkie": "2.0.4"
       }
     },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
+    },
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
@@ -1427,6 +1544,15 @@
       "dev": true,
       "optional": true
     },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "1.1.2"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -1492,6 +1618,12 @@
         "string-width": "1.0.2"
       }
     },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

package.json

 {
   "scripts": {
     "sass": "node_modules/node-sass/bin/node-sass --output-style compressed assets/sass -o assets/css",
-    "build": "npm run sass"
+    "jsx": "node_modules/nativejsx/bin/nativejsx assets/js/*.jsx",
+    "build": "npm run sass && npm run jsx"
   },
   "devDependencies": {
+    "nativejsx": "^4.3.0",
     "node-sass": "^4.7.2"
   }
 }

templates/upload.html

@@ -27,44 +27,5 @@
     </form>
     <div class="uploading images"></div>
 </div>
-<script>
-    function postData(url, data) {
-        return fetch(url, {
-            body: data,
-            cache: 'no-cache',
-            credentials: 'same-origin',
-            method: 'POST',
-            mode: 'cors',
-            redirect: 'follow'
-        }).then(response => response.json())
-    }
-
-    const form = document.querySelector("form.upload");
-    const element = document.querySelector("form.upload input[type=file]");
-    const results = document.querySelector(".uploading.images");
-    element.addEventListener("change", () => {
-        for (let file of element.files) {
-            const reader = new FileReader();
-            reader.addEventListener("load", (e) => {
-                const node = document.createElement("div");
-                node.classList.add("uploading");
-                node.classList.add("image");
-                const img = document.createElement("img");
-                img.src = e.target.result;
-                node.appendChild(img);
-                results.appendChild(node);
-
-                const data = new FormData();
-                data.append("file", file, file.name);
-
-                postData("/upload/", data).then((json) => {
-                    const text = document.createElement("pre");
-                    text.innerText = JSON.stringify(json);
-                    node.appendChild(text);
-                });
-            });
-            reader.readAsDataURL(file);
-        }
-    })
-</script>
+<script src="/assets/js/page_upload.js"></script>
 {{end}}
\ No newline at end of file