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

WIP for #514

Maurits van der Schee 5 years ago
parent
10b6250807
commit
21f8273da0
2 changed files with 58 additions and 0 deletions
Split View Show Diff Stats
  1. 57
    0
      examples/clients/upload/vanilla.html
  2. 1
    0
      examples/index.html

+ 57
- 0
examples/clients/upload/vanilla.html View File 

@@ -0,0 +1,57 @@
1 
+<html>
2 
+<head>
3 
+<meta charset="utf-8" />
4 
+<script>
5 
+
6 
+if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
7 
+    alert("Your browser is too old to support HTML5 File API");
8 
+}
9 
+
10 
+function showImagePreview() {
11 
+    var demoImage = document.querySelector('img');
12 
+    var file = document.querySelector('input[type=file]').files[0];
13 
+    var reader = new FileReader();
14 
+    reader.onload = function (event) {
15 
+        console.log(reader.result)
16 
+        demoImage.src = reader.result;
17 
+    }
18 
+    console.log(file)
19 
+    reader.readAsDataURL(file);
20 
+}
21 
+
22 
+function uploadImageFile() {
23 
+    var req = new XMLHttpRequest();
24 
+    req.onreadystatechange = function () {
25 
+        if (req.readyState==4) {
26 
+            console.log(req.responseText);
27 
+            listImageFiles();
28 
+        }
29 
+    }
30 
+    url = '/api.php/records/categories';
31 
+    req.open("POST", url);
32 
+    req.send(JSON.stringify({"name":"upload","icon":null}));
33 
+}
34 
+
35 
+function listImageFiles() {
36 
+    var req = new XMLHttpRequest();
37 
+    req.onreadystatechange = function () {
38 
+        if (req.readyState==4) {
39 
+            console.log(req.responseText);
40 
+            document.getElementById('output').innerHTML = JSON.stringify(JSON.parse(req.responseText), undefined, 4);
41 
+        }
42 
+    }
43 
+    url = '/api.php/records/categories';
44 
+    req.open("GET", url);
45 
+    req.send();
46 
+}
47 
+</script>
48 
+</head>
49 
+<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">
55 
+    </form>
56 
+</body>
57 
+</html>

+ 1
- 0
examples/index.html View File 

@@ -7,6 +7,7 @@
7 7 
         <ul>
8 8 
             <li><a href="/examples/clients/auth.php/vanilla.html">Auth.php + VanillaJS</a></li>
9 9 
             <li><a href="/examples/clients/auth0/vanilla.html">Auth0 + VanillaJS</a></li>
10 
+            <li><a href="/examples/clients/upload/vanilla.html">Upload + VanillaJS</a></li>
10 11 
             <li><a href="/examples/clients/vanilla.html">VanillaJS</a></li>
11 12 
             <li><a href="/examples/clients/angular.html">Angular</a></li>
12 13 
             <li><a href="/examples/clients/angular2.html">Angular 2</a></li>

Write Preview
Loading…
Cancel
Save