From 1ea7208b4dcf2b16cd752bca9347bccd5e4d3a21 Mon Sep 17 00:00:00 2001
From: liuxiaodong <lxdong.007@gmail.com>
Date: Mon, 11 Mar 2019 03:15:13 +0800
Subject: [PATCH] add uploadFile and a path tag (#88)

* add uploadFile and a path tag
* update uploadFile and circle tag
---
 karax/kajax.nim | 68 +++++++++++++++++++++++++++++++++++++++----------
 karax/vdom.nim  |  2 +-
 2 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/karax/kajax.nim b/karax/kajax.nim
index 114b29d..7fce2c9 100644
--- a/karax/kajax.nim
+++ b/karax/kajax.nim
@@ -4,6 +4,59 @@
 ## handling.
 
 import karax
+import jsffi except `&`
+import jscore
+import dom
+
+type 
+  ProgressEvent* {.importc.}= object
+    loaded*: float
+    total*: float
+
+  FormData* {.importc.} = JsObject
+
+  HttpRequest* {.importc.} = ref object
+  ThisObj {.importc.} = ref object
+    readyState, status: int
+    responseText, statusText: cstring
+
+  XMLHttpRequestUpload* {.importc.} = JsObject
+
+proc newFormData*(): FormData {.importcpp: "new FormData()".}
+proc append*(f: FormData, key: cstring, value: Blob) {.importcpp:"#.append(@)".}
+proc append*(f: FormData, key: cstring, value: cstring) {.importcpp:"#.append(@)".}
+
+proc setRequestHeader*(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
+proc statechange*(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
+proc send*(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
+proc send*(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
+proc open*(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
+proc newRequest*(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
+
+proc uploadFile*(url: cstring, file: Blob, onprogress :proc(data: ProgressEvent), 
+                cont: proc (httpStatus: int; response: cstring);
+                headers: openarray[(cstring, cstring)] = []) = 
+  proc contWrapper(httpStatus: int; response: cstring) =
+    cont(httpStatus, response)
+
+  proc upload(r: HttpRequest):XMLHttpRequestUpload {.importcpp: "#.upload".}
+  var this {.importc: "this".}: ThisObj
+
+  var formData = newFormData()
+  formData.append("upload_file",file)
+  formData.append("filename", dom.File(file).name)
+  let ajax = newRequest()
+  ajax.open("POST", url, true)
+  for a, b in items(headers):
+    ajax.setRequestHeader(a, b)
+  ajax.statechange proc() =
+    if this.readyState == 4:
+      if this.status == 200:
+        contWrapper(this.status, this.responseText)
+      else:
+        contWrapper(this.status, this.responseText)
+  ajax.upload.onprogress = onprogress
+  ajax.send(formData.to(cstring))
 
 proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
           data: cstring;
@@ -16,20 +69,8 @@ proc ajax*(meth, url: cstring; headers: openarray[(cstring, cstring)];
     cont(httpStatus, response)
     if doRedraw: redraw(kxi)
 
-  type
-    HttpRequest {.importc.} = ref object
-    ThisObj {.importc.} = ref object
-      readyState, status: int
-      responseText, statusText: cstring
-
-  proc setRequestHeader(r: HttpRequest; a, b: cstring) {.importcpp: "#.setRequestHeader(@)".}
-  proc statechange(r: HttpRequest; cb: proc()) {.importcpp: "#.onreadystatechange = #".}
-  proc send(r: HttpRequest; data: cstring) {.importcpp: "#.send(#)".}
-  proc send(r: HttpRequest, data: Blob) {.importcpp: "#.send(#)".}
-  proc open(r: HttpRequest; meth, url: cstring; async: bool) {.importcpp: "#.open(@)".}
-  proc newRequest(): HttpRequest {.importcpp: "new XMLHttpRequest(@)".}
-
   var this {.importc: "this".}: ThisObj
+
   let ajax = newRequest()
   ajax.open(meth, url, true)
   for a, b in items(headers):
@@ -81,3 +122,4 @@ proc ajaxDelete*(url: cstring; headers: openarray[(cstring, cstring)];
 
 proc toJson*[T](data: T): cstring {.importc: "JSON.stringify".}
 proc fromJson*[T](blob: cstring): T {.importc: "JSON.parse".}
+
diff --git a/karax/vdom.nim b/karax/vdom.nim
index 3dc61d9..b9c12d9 100644
--- a/karax/vdom.nim
+++ b/karax/vdom.nim
@@ -35,7 +35,7 @@ type
     mark, ruby, rt, rp, bdi, dbo, span, br, wbr,
     ins, del, img, iframe, embed, `object` = "object",
     param, video, audio, source, track, canvas, map,
-    area, svg, math,
+    area, svg, math, path, circle
 
     table, caption, colgroup, col, tbody, thead,
     tfoot, tr, td, th,