diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js new file mode 100644 index 0000000000000000000000000000000000000000..f6df5cb8973727f0634282e0d0c208d41cac83c0 --- /dev/null +++ b/assets/js/page_upload.js @@ -0,0 +1,44 @@ +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 diff --git a/assets/js/page_upload.jsx b/assets/js/page_upload.jsx index 071298995c712f3bd5fb855435ffc4cf39999b65..5dea72e909cd43e603c8b8d04de265594228fc00 100644 --- a/assets/js/page_upload.jsx +++ b/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 +}); \ No newline at end of file diff --git a/package.json b/package.json index ea028add97dcae0653c704078306fcbf2bc0fc53..87979da683f4763913ba84d8de646c5d3b64a717 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,9 @@ { "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" } }