Add profile photo uploading support.

src/uxbox/data/users.cljs

@@ -106,7 +106,7 @@
                    (rx/of)))]
       (let [params {:old-password (:old-password data)
                     :password (:password-1 data)}]
-        (->> (rp/req :update/password params)
+        (->> (rp/req :update/profile-password params)
              (rx/map password-updated)
              (rx/catch rp/client-error? on-error))))))
 
@@ -122,3 +122,18 @@
     (if errors
       (udf/assign-errors :profile/password errors)
       (UpdatePassword. data))))
+
+;; --- Update Photo
+
+(defrecord UpdatePhoto [file done]
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (->> (rp/req :update/profile-photo {:file file})
+         (rx/do done)
+         (rx/map fetch-profile))))
+
+(defn update-photo
+  ([file]
+   (UpdatePhoto. file (constantly nil)))
+  ([file done]
+   (UpdatePhoto. file done)))

src/uxbox/repo/users.cljs

@@ -24,7 +24,7 @@
          (rx/map decode-payload))))
 
 (defmethod request :update/profile
-  [type {:keys [metadata id] :as body}]
+  [type {:keys [metadata] :as body}]
   (let [body (assoc body :metadata (t/encode metadata))
         params {:url (str url "/profile/me")
                 :method :put
@@ -32,9 +32,18 @@
     (->> (send! params)
          (rx/map decode-payload))))
 
-(defmethod request :update/password
+(defmethod request :update/profile-password
   [type data]
   (let [params {:url (str url "/profile/me/password")
                 :method :put
                 :body data}]
     (send! params)))
+
+(defmethod request :update/profile-photo
+  [_ {:keys [file] :as body}]
+  (let [body (doto (js/FormData.)
+               (.append "file" file))
+        params {:url (str url "/profile/me/photo")
+                :method :post
+                :body body}]
+    (send! params)))

src/uxbox/ui/settings/profile.cljs

@@ -21,9 +21,10 @@
             [uxbox.ui.messages :as uum]
             [uxbox.data.users :as udu]
             [uxbox.data.forms :as udf]
+            [uxbox.util.interop :refer (iterable->seq)]
             [uxbox.util.dom :as dom]))
 
-;; --- Profile Form
+;; --- Constants
 
 (def formdata
   (-> (l/in [:forms :profile/main])
@@ -117,6 +118,34 @@
     :name "profile-form"
     :mixins [(mx/local) rum/reactive mx/static]}))
 
+;; --- Profile Photo Form
+
+(defn- profile-photo-form-render
+  [own]
+  (letfn [(on-change [event]
+            (let [target (dom/get-target event)
+                  file (-> (dom/get-files target)
+                           (iterable->seq)
+                           (first))]
+              (rs/emit! (udu/update-photo file))
+              (dom/clean-value! target)))]
+    (let [{:keys [photo]} (rum/react profile-l)
+          photo (if (str/empty? photo)
+                  "images/avatar.jpg"
+                  photo)]
+    (html
+     [:form.avatar-form
+      [:img {:src photo :border "0"}]
+      [:input {:type "file"
+               :value ""
+               :on-change on-change}]]))))
+
+(def profile-photo-form
+  (mx/component
+   {:render profile-photo-form-render
+    :name  profile-photo-form
+    :mixins [mx/static rum/reactive]}))
+
 ;; --- Profile Page
 
 (defn profile-page-render
@@ -128,9 +157,7 @@
     [:section.dashboard-content.user-settings
      [:section.user-settings-content
       [:span.user-settings-label "Your avatar"]
-      [:form.avatar-form
-       [:img {:src "images/avatar.jpg" :border "0"}]
-       [:input {:type "file"}]]
+      (profile-photo-form)
       (profile-form)
       ]]]))
 

src/uxbox/ui/users.cljs

@@ -6,6 +6,7 @@
 
 (ns uxbox.ui.users
   (:require [sablono.core :as html :refer-macros [html]]
+            [cuerdas.core :as str]
             [lentes.core :as l]
             [rum.core :as rum]
             [uxbox.router :as r]
@@ -56,13 +57,16 @@
 (defn user-render
   [own]
   (let [profile (rum/react profile-l)
-        local (:rum/local own)]
+        local (:rum/local own)
+        photo (if (str/empty? (:photo profile))
+                "/images/avatar.jpg"
+                (:photo profile))]
+
     (html
      [:div.user-zone {:on-mouse-enter #(swap! local assoc :open true)
                       :on-mouse-leave #(swap! local assoc :open false)}
       [:span (:fullname profile)]
-      [:img {:border "0"
-             :src "/images/avatar.jpg"}]
+      [:img {:border "0" :src photo}]
       (user-menu (:open @local))])))
 
 (def user

src/uxbox/util/dom.cljs

@@ -66,6 +66,10 @@
   [node]
   (.-checked node))
 
+(defn clean-value!
+  [node]
+  (set! (.-value node) ""))
+
 (defn ^boolean equals?
   [node-a node-b]
   (.isEqualNode node-a node-b))