✨ Add validations when updating profile photo

frontend/src/uxbox/main/data/images.cljs

@@ -357,6 +357,7 @@
 (def max-file-size (* 5 1024 1024))
 
 ;; TODO: unify with upload-image at main/data/workspace/persistence.cljs
+;;       and update-photo at main/data/users.cljs
 ;; https://tree.taiga.io/project/uxboxproject/us/440
 
 (defn create-images

frontend/src/uxbox/main/data/users.cljs

@@ -12,7 +12,9 @@
    [potok.core :as ptk]
    [uxbox.common.spec :as us]
    [uxbox.config :as cfg]
+   [uxbox.main.store :as st]
    [uxbox.main.repo :as rp]
+   [uxbox.main.data.messages :as dm]
    [uxbox.util.router :as rt]
    [uxbox.util.i18n :as i18n :refer [tr]]
    [uxbox.util.storage :refer [storage]]
@@ -151,15 +153,50 @@
              (rx/ignore))))))
 
 
-;; --- Update Photoo
+;; --- Update Photo
 
 (s/def ::file #(instance? js/File %))
+(def allowed-file-types #{"image/jpeg" "image/png" "image/webp"})
+(def max-file-size (* 5 1024 1024))
+
+;; TODO: unify with create-images at main/data/images.cljs
+;;       and upload-image at main/data/workspace/persistence.cljs
+;; https://tree.taiga.io/project/uxboxproject/us/440
 
 (defn update-photo
-  [{:keys [file] :as params}]
+  [file]
   (us/verify ::file file)
   (ptk/reify ::update-photo
     ptk/WatchEvent
     (watch [_ state stream]
-      (->> (rp/mutation :update-profile-photo {:file file})
-           (rx/map (constantly fetch-profile))))))
+      (let [check-file
+            (fn [file]
+              (when (> (.-size file) max-file-size)
+                (throw (ex-info (tr "errors.image-too-large") {})))
+              (when-not (contains? allowed-file-types (.-type file))
+                (throw (ex-info (tr "errors.image-format-unsupported") {})))
+              file)
+
+             on-success #(do (println "hola") (st/emit! dm/hide))
+
+             on-error #(do (st/emit! dm/hide)
+                           (if (.-message %)
+                             (rx/of (dm/error (.-message %)))
+                             (rx/of (dm/error (tr "errors.unexpected-error")))))
+
+             prepare
+             (fn [file]
+               {:file file})]
+
+      (st/emit! (dm/show {:content (tr "image.loading")
+                          :type :info
+                          :timeout nil}))
+
+      (->> (rx/of file)
+           (rx/map check-file)
+           (rx/map prepare)
+           (rx/mapcat #(rp/mutation :update-profile-photo %))
+           (rx/do on-success)
+           (rx/map (constantly fetch-profile))
+           (rx/catch on-error))))))
+

frontend/src/uxbox/main/data/workspace/persistence.cljs

@@ -298,6 +298,7 @@
 (def max-file-size (* 5 1024 1024))
 
 ;; TODO: unify with create-images at main/data/images.cljs
+;;       and update-photo at main/data/users.cljs
 ;; https://tree.taiga.io/project/uxboxproject/us/440
 
 (defn upload-image

frontend/src/uxbox/main/ui/settings/profile.cljs

@@ -17,6 +17,7 @@
    [uxbox.main.refs :as refs]
    [uxbox.main.store :as st]
    [uxbox.main.ui.components.forms :refer [input submit-button form]]
+   [uxbox.main.ui.components.file-uploader :refer [file-uploader]]
    [uxbox.main.ui.icons :as i]
    [uxbox.main.ui.messages :as msgs]
    [uxbox.main.ui.modal :as modal]
@@ -97,27 +98,27 @@
 
 (mf/defc profile-photo-form
   [{:keys [locale] :as props}]
-  (let [profile (mf/deref refs/profile)
+  (let [file-input (mf/use-ref nil)
+        profile (mf/deref refs/profile)
         photo (:photo-uri profile)
         photo (if (or (str/empty? photo) (nil? photo))
                 "images/avatar.jpg"
                 photo)
 
-        on-change
-        (fn [event]
-          (let [target (dom/get-target event)
-                file (-> (dom/get-files target)
-                         (array-seq)
-                         (first))]
-            (st/emit! (udu/update-photo {:file file}))
-            (dom/clean-value! target)))]
+        on-image-click #(dom/click (mf/ref-val file-input))
+
+        on-file-selected
+        (fn [file]
+          (st/emit! (udu/update-photo file)))]
+
     [:form.avatar-form
      [:div.image-change-field
-      [:span.update-overlay (t locale "settings.update-photo-label")]
+      [:span.update-overlay {:on-click on-image-click} (t locale "settings.update-photo-label")]
       [:img {:src photo}]
-      [:input {:type "file"
-               :value ""
-               :on-change on-change}]]]))
+      [:& file-uploader {:accept "image/jpeg,image/png"
+                         :multi false
+                         :input-ref file-input
+                         :on-selected on-file-selected}]]]))
 
 ;; --- Profile Page
 

frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs

@@ -43,7 +43,7 @@
                 aspect-ratio (/ (:width image) (:height image))]
             (st/emit! (dw/create-and-add-shape :image shape aspect-ratio))))
 
-        on-file-selected
+        on-files-selected
         (fn [files]
           (run! #(st/emit! (dw/upload-image % on-uploaded)) files))]
 
@@ -78,7 +78,7 @@
           [:& file-uploader {:accept "image/jpeg,image/png,image/webp"
                              :multi true
                              :input-ref file-input
-                             :on-selected on-file-selected}]]]
+                             :on-selected on-files-selected}]]]
        [:li.tooltip.tooltip-right
         {:alt (t locale "workspace.toolbar.curve")
          :class (when (= selected-drawtool :curve) "selected")