Improved upload API

assets/js/page_upload.js

+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 = function () {
+                var $$a = document.createElement('div');
+                $$a.setAttribute('class', 'uploading image');
+                return $$a;
+            }.call(this);
+            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(function () {
+                        var $$b = document.createElement('div');
+                        $$b.setAttribute('class', 'alert error');
+                        $$b.appendChildren(JSON.stringify(json.errors));
+                        return $$b;
+                    }.call(this), node.querySelector('.description'));
+                }
+                console.log(json);
+            });
+        });
+        reader.readAsDataURL(file);
+    }
+});
\ No newline at end of file

assets/js/page_upload.jsx

@@ -18,27 +18,43 @@ element.addEventListener("change", () => {
         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 image_container = document.createElement("div");
+            image_container.classList.add("uploading", "image");
+
+            const image_title = document.createElement("h2");
+            image_title.classList.add("title", "fake-input");
+            image_title.contentEditable = "true";
+            image_title.placeholder = "Description";
+            image_container.appendChild(image_title);
+
+            const image_link = document.createElement("a");
+            image_link.classList.add("image");
+            const image = document.createElement("img");
+            image.src = dataUrl;
+            image_link.appendChild(image);
+            image_container.appendChild(image_link);
+
+            const image_description = document.createElement("p");
+            image_description.classList.add("description", "fake-input");
+            image_description.contentEditable = "true";
+            image_description.placeholder = "Description";
+            image_description.dataset["multiline"] = "true";
+            image_container.appendChild(image_description);
+
+            results.appendChild(image_container);
 
             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;
+                    image_link.href = "/" + json.id;
+                    image.src = "/" + json.id;
                 } else {
-                    node.insertBefore(
-                        <div className="alert error">{JSON.stringify(json.errors)}</div>,
-                        node.querySelector(".description")
-                    )
+                    const image_error = document.createElement("div");
+                    image_error.classList.add("alert", "error");
+                    image_error.innerText = JSON.stringify(json.errors);
+                    image_container.insertBefore(image_error, image_description);
                 }
 
                 console.log(json);
@@ -46,4 +62,4 @@ element.addEventListener("change", () => {
         });
         reader.readAsDataURL(file);
     }
-})
+});
\ No newline at end of file

package.json

 {
   "scripts": {
     "sass": "node_modules/node-sass/bin/node-sass --output-style compressed assets/sass -o assets/css",
-    "jsx": "node_modules/nativejsx/bin/nativejsx assets/js/*.jsx",
-    "build": "npm run sass && npm run jsx"
+    "build": "npm run sass"
   },
   "devDependencies": {
-    "nativejsx": "https://github.com/j3l11234/nativejsx/archive/4.2.0.2.tar.gz",
     "node-sass": "^4.7.2"
   }
 }