Related to the discussion on the Clojurians Slack - https://clojurians-log.clojureverse.org/re-frame/2017-07-06.html#inst-2017-07-06T17:10:11.713261Z

01_README.md

Upload component

Context

Based heavily on [s3-beam][1], but uses re-frame events/subs to get the job done. The /sign handler is the [s3-beam][1] handler (near verbatim).

For background on (ui.core/component "...") see https://opensourcery.co.za/2017/02/12/using-semantic-ui-react-with-re-frame/

ui.ajax is just thin wrappers and/or aliases around plumbing from ajax.core from cljs-http

Problem

Although the uploading works great in isolation, the handler that kicked off the process needs access to the storage-key value returned from the object storage so it can pass that along to the backend.

Using async-flow-fx this doesn't seem possible.

[1] https://github.com/martinklepsch/s3-beam

02_uploads.cljs

(ns ui.uploads
  (:require-macros [reagent.ratom :refer [reaction]])
  (:require [re-frame.core :as re-frame]
            [reagent.ratom :as ratom]
            [ui.core :as ui]
            [ui.ajax :as ajax]))

(def interceptors
  [(when ^boolean js/goog.DEBUG re-frame/debug)
   re-frame/trim-v])

(re-frame/reg-event-fx
 :upload/start
 interceptors
 (fn [{db :db} [identifier file]]
   (let [progress {:bytes-sent  0
                   :bytes-total (.-size file)}]

     {:db       (assoc-in db [::progress identifier] progress)
      :dispatch (if (some? file)
                  [::get-upload-url identifier file]
                  [:upload/done identifier])})))


(re-frame/reg-event-fx
 ::get-upload-url
 interceptors
 (fn [_ [identifier file]]
   (let [file-name (.-name file)
         mime-type (.-type file)]
     {:http-xhrio {:method          :post
                   :uri             "/sign"
                   :params          {:file-name file-name
                                     :mime-type mime-type}
                   :format          (ajax/transit-request-format)
                   :response-format (ajax/transit-response-format)
                   :on-success      [::upload-file identifier file]
                   :on-failure      [:upload/failed identifier]}})))


(defn upload-request-body [file form-data]
  (let [data (assoc form-data :file file)
        fd   (new js/FormData)]
    (doseq [[k v] data]
      (.append fd (name k) v))
    fd))


(re-frame/reg-event-fx
 ::upload-file
 interceptors
 (fn [{db :db} [identifier file upload-url-response]]
   (let [upload-url   (:upload-url upload-url-response)
         form-data    (:form-data upload-url-response)
         storage-key  (:key upload-url-response)
         request-body (upload-request-body file form-data)]

     ;;
     ;; `storage-key` needs to be available to whoever needs it after upload completes
     ;;
     
     {:db         (update-in db [::progress identifier] assoc :key storage-key)
      :http-xhrio {:method           :post
                   :uri              upload-url
                   :body             request-body
                   :response-format  (ajax.core/raw-response-format)
                   :on-success       [:upload/done identifier storage-key]
                   :on-failure       [:upload/failed identifier]
                   :progress-handler #(re-frame/dispatch [::upload-progress
                                                          identifier
                                                          %])}})))


(re-frame/reg-event-db
 :upload/done
 interceptors
 (fn [db [identifier]]
   (update db ::progress dissoc identifier)))


(re-frame/reg-event-db
 ::upload-progress
 interceptors
 (fn [db [identifier progress-event]]
   (let [progress {:bytes-sent (.-loaded progress-event)}]
     (update-in db [::progress identifier] merge progress))))


(re-frame/reg-sub
 ::upload-progress
 (fn [db [_ identifier]]
   (get-in db [::progress identifier])))


(defn attachment [{:keys [identifier label file-selected]
                   :or   {:file-selected identity}
                   :as   options}]
  (let [input        (ui/component "Form" "Input")
        button       (ui/component "Button")
        progress-bar (ui/component "Progress")

        file-id  (gensym "attachment-")
        filename (ratom/atom "")
        progress (re-frame/subscribe [::upload-progress identifier])

        uploading? (reaction
                    (some? (:bytes-sent @progress)))
        completed? (reaction
                    (and @uploading?
                         (= (:bytes-sent @progress) (:bytes-total @progress))))
        percent    (reaction
                    (* (/ (:bytes-sent @progress) (:bytes-total @progress))
                       100))

        choose-file  (fn [e d]
                       (-> (.getElementById js/document file-id)
                           (.click)))
        file-changed (fn [e]
                       (let [files (-> e .-target .-files)
                             file  (aget files 0)
                             name' (.-name file)]
                         (reset! filename name')
                         (if (fn? file-selected)
                           (file-selected identifier file))))]

    (fn [options]
      (if @uploading?
        [:> progress-bar {:indicating true
                          :percent    @percent}]

        [:> input {:action true
                   :label  label}

         [:input {:placeholder "File"
                  :read-only   true
                  :value       @filename
                  :on-click    choose-file}]
         [:input {:id        file-id
                  :type      "file"
                  :style     {:display "none"}
                  :on-change file-changed}]

         [:> button {:icon     "attach"
                     :content  "Choose"
                     :type     "button"
                     :on-click choose-file}]]))))

03_usage.cljs

(ns somewhere
  (:require [re-frame.core :as re-frame :refer [reg-event-fx dispatch]]
            [reagent.ratom :as r]
            [ui.uploads :as uploads]))


(defn some-form []
  (let [form-data     (r/atom {})
        file-selected #(swap! form-data merge {:attachment/identifier %1
                                               :attachment/source     %2})
        on-submit     #(dispatch [:something/create @form-data])]
    
    (fn []
      [:form {:on-submit on-submit}
       [uploads/attachment
          {:identifier    (gensym "attachment-")
           :label         "File"
           :file-selected file-selected}]])))


(defn upload-flow [identifier file params]
  {:first-dispatch [:upload/start identifier file]
   :rules
   [{:when     :seen?
     :events   [(fn [[e i _]]
                  (= [e i] [:upload/done identifier]))]
     :dispatch [::create-thing params]}

    {:when   :seen?
     :events [::thing-created]
     :halt?  true}

    {:when   :seen-any-of?
     :events [[:upload/failed identifier] ::request-failed]
     :halt?  true}]})


;; This event handler just prepares and coordinates
(reg-event-fx
 :something/create
 interceptors
 (fn [{db :db} [params]]
   (let [identifier (:attachment/identifier params)
         file       (:attachment/source params)
         thing      (dissoc params :attachment/source :attachment/identifier)]
     {:db         (assoc db :loading true)
      :async-flow (upload-flow identifier file thing)})))


(reg-event-fx
 ::create-thing
 interceptors
 (fn [{db :db} [thing]]
   ;;
   ;; Here we need access to the storage-key value from the upload process :(
   ;;
   
   {:http-xhrio {:method          :post
                 :uri             "/api/things"
                 :params          thing
                 :format          (transit-request-format)
                 :response-format (transit-response-format)
                 :on-success      [::thing-created]
                 :on-failure      [::request-failed]}}))