nas
/
todo_api
Watch 2
Star 1
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Closes #514

Maurits van der Schee 5 years ago
parent
21f8273da0
commit
f7025cedf0
1 changed files with 24 additions and 8 deletions
Split View Show Diff Stats
  1. 24
    8
      examples/clients/upload/vanilla.html

+ 24
- 8
examples/clients/upload/vanilla.html View File 

@@ -8,7 +8,7 @@ if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
8 8 
 }
9 9
10 10 
 function showImagePreview() {
11 
-    var demoImage = document.querySelector('img');
11 
+    var demoImage = document.querySelector('img#preview');
12 12 
     var file = document.querySelector('input[type=file]').files[0];
13 13 
     var reader = new FileReader();
14 14 
     reader.onload = function (event) {
 
@@ -20,6 +20,7 @@ function showImagePreview() {
20 20 
 }
21 21
22 22 
 function uploadImageFile() {
23 
+    var demoImage = document.querySelector('img#preview');
23 24 
     var req = new XMLHttpRequest();
24 25 
     req.onreadystatechange = function () {
25 26 
         if (req.readyState==4) {
 
@@ -29,15 +30,29 @@ function uploadImageFile() {
29 30 
     }
30 31 
     url = '/api.php/records/categories';
31 32 
     req.open("POST", url);
32 
-    req.send(JSON.stringify({"name":"upload","icon":null}));
33 
+    var icon = demoImage.src.split(";")[1].split(",")[1];
34 
+    req.send(JSON.stringify({"name":"upload","icon":icon}));
33 35 
 }
34 36
35 37 
 function listImageFiles() {
38 
+    var ul = document.querySelector('ul');
36 39 
     var req = new XMLHttpRequest();
37 40 
     req.onreadystatechange = function () {
38 41 
         if (req.readyState==4) {
39 42 
             console.log(req.responseText);
40 
-            document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText), undefined, 4);
43 
+            output.innerHTML = "";
44 
+            var categories = JSON.parse(req.responseText).records;
45 
+            for (var i=0;i<categories.length;i++) {
46 
+                var li = document.createElement('li');
47 
+                var img = document.createElement('img');
48 
+                var span = document.createElement('span');
49 
+                img.style = 'height:2em;margin:0 .5em;';
50 
+                img.src = "data:image/png;base64," + categories[i].icon;
51 
+                span.innerHTML = categories[i].name;
52 
+                li.appendChild(img);
53 
+                li.appendChild(span);
54 
+                ul.appendChild(li);
55 
+            }
41 56 
         }
42 57 
     }
43 58 
     url = '/api.php/records/categories';
 
@@ -47,11 +62,12 @@ function listImageFiles() {
47 62 
 </script>
48 63 
 </head>
49 64 
 <body onload="listImageFiles()">
50 
-    <pre id="output"></pre>
51 
-    <form onsubmit="uploadImageFile()">
52 
-        <input type="file" onchange="showImagePreview()" accept="image/*"><br><br>
53 
-        <img src="" width="150" alt="Thumb preview...">
54 
-        <input type="submit" value="Upload">
65 
+    <ul id="output"></ul>
66 
+    <hr>
67 
+    <form onsubmit="uploadImageFile(); return false;">
68 
+        <img src="" id="preview" style="height:2em;margin:0 .5em;" alt="PNG preview..."><br><br>
69 
+        <input type="file" onchange="showImagePreview()" accept="image/png"><br><br>
70 
+        <input type="submit" value="Upload PNG">
55 71 
     </form>
56 72 
 </body>
57 73 
 </html>

Write Preview
Loading…
Cancel
Save