Uppy example in clojurescript

uppy.cljs

(ns my.namespace.uppy
  (:require [re-frame.core :as rf]
            [reagent.core :as r]
            [cs2.handlers :refer [debug-panel]]
            [cs2.i18n :refer [tr]]
            [clojure.string :as string]
            [cs2.util :as util]
            [cs2.components.widgets.modal :as modal]
            [taoensso.timbre :refer [debug info error fatal warn]]))

;; use as inspiration :-)


(defn image-uploader
  [{:keys [id endpoint on-insert]
    :as   opts
    :or   {endpoint "/file-upload"}}
   & [active-tab-doc]]
  (let [this             (r/atom nil)
        target           (str "image-uploader-target-" (name id))
        dashboard-target (str "image-uploader-dashboard-target-" (name id))]
    (r/create-class
     {:component-did-mount
      (fn image-uploader-component-did-mount
        [component]
        (reset! this
                (let [uppy   (js/Uppy.
                              #js {:debug        true
                                   :autoProceed  false
                                   :restrictions #js {:allowedFileTypes #js [".jpg" ".jpeg" ".png" ".pdf"]}})
                      uppy   (.use uppy
                                   js/Dashboard
                                   #js {
                                        :trigger              ".uppy-DashboardItem-edit"
                                        :inline               true
                                        #_#_:locale               #js {:strings
                                                                   #js{:dropPaste "Sleep bestanden hier naar toe, of ",
                                                                       :browse    "kies bestand van je computer"}}
                                        :target               (str "." dashboard-target)
                                        :replaceTargetContent false ;true
                                        :maxHeight            450
                                        :metaFields           '({:id          "caption"
                                                                 :name        "Caption"
                                                                 :placeholder "describe what the image is about" })})
                      ;;crop images <3
                      uppy   (.use uppy
                                 js/ImageEditor
                                 #js {:target  js/Dashboard
                                      :quality 0.8})
                      #_uppy #_ (.on uppy
                                     "file-added"
                                     (fn [file]
                                       (debug "file added")
                                       (debug file)))

                      uppy (.on uppy
                                "upload-success"
                                (fn [file resp upload-url]
                                  (let [resp (js->clj resp :keywordize-keys true)]
                                    (rf/dispatch [:media/add-image resp])
                                    (when on-insert
                                      (on-insert (:body resp)))
                                    (when active-tab-doc
                                      (reset! active-tab-doc :media-grid)))))
                      uppy (.use uppy
                                 js/XHRUpload
                                 #js {:endpoint  endpoint
                                      :formData  true
                                      :fieldName "file"})
                      uppy (.run uppy)]
                  uppy)))
      :display-name   (str "image-uploader-" (name id))
      :reagent-render (fn []
                        [:div.uppy-wrap
                         [:div {:class-name dashboard-target}]
                         #_[:div {:id target}]])})))


;;; usage, 

(defn my-widget
  []
  [:div [image-uploader {:id "myuploader" :on-insert #(do-something %)}]])