diff --git a/frontend/src/uxbox/main/data/images.cljs b/frontend/src/uxbox/main/data/images.cljs index 963bf330f..5cfccc6b5 100644 --- a/frontend/src/uxbox/main/data/images.cljs +++ b/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 diff --git a/frontend/src/uxbox/main/data/users.cljs b/frontend/src/uxbox/main/data/users.cljs index 836717539..20cfb46ae 100644 --- a/frontend/src/uxbox/main/data/users.cljs +++ b/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)))))) + diff --git a/frontend/src/uxbox/main/data/workspace/persistence.cljs b/frontend/src/uxbox/main/data/workspace/persistence.cljs index e6ea65e51..3093f170b 100644 --- a/frontend/src/uxbox/main/data/workspace/persistence.cljs +++ b/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 diff --git a/frontend/src/uxbox/main/ui/settings/profile.cljs b/frontend/src/uxbox/main/ui/settings/profile.cljs index ae7bc60ed..3bc4349c2 100644 --- a/frontend/src/uxbox/main/ui/settings/profile.cljs +++ b/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 diff --git a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs index 83db070df..996f86f8b 100644 --- a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs +++ b/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")