Как просмотреть изображение и имя файла для загрузки файла в Clojure? - PullRequest
Новая
       12

Как просмотреть изображение и имя файла для загрузки файла в Clojure?

0 голосов
/ 01 мая 2019

Я хочу загрузить изображение, показать предварительный просмотр изображения и связанное с ним имя файла - все в Clojure.

Пример на http://jsfiddle.net/LvsYc/638/ демонстрирует, что я хочу сделать, за исключением того, что я хочу это в Clojure / ClojureScript.

Я попытался переписать код по вышеуказанной ссылке, иудалось вывести имя файла на консоль с помощью (js / console.log).В моем файле два глобальных атома, один для имени изображения, а другой для самого изображения.Мой код ниже - моя попытка.

Что мне нужно сделать, чтобы 1).получить имя файла из журнала консоли и отобразить его в: span.file-name, используя эти атомы, и 2) отобразить предварительный просмотр изображения? 

(def image (atom "#"))
(def image-name (atom nil))


(def file-upload-selector
  "Implements a file-upload button, allowing the user to 
   navigate to a file on their desktop and select it."
  (let 
      [reader (js/FileReader.)
       _ (set! (.-onload reader)
               (fn [e]
                 (reset! image
                         (-> e .-target .-result  ))))
       read-url
       (fn [input]
         (reset! image-name (-> input .-target .-files (aget 0) .-name))

         (js/console.log (-> input .-target .-files (aget 0) .-name))
                   (when-let [file-input (.-files input)]  
                     (.readAsDataURL reader (aget file-input 0))))]


      (fn []
        [:div.file.has-name.is-boxed
         [:label.file-label
          [:input.file-input {:type "file"
                              :name "User_Photo"
                              :id "file"
                              :on-change read-url}]
          [:span.file-cta
           [:span.file-icon
            [:i.fas.fa-upload]]
           [:span.file-label "Upload profile picture" ]

           ][:img {:src image :alt "your image" }]
          [:span.file-name {:id  "filename" } image-name
           ]]])))

1 Ответ

0 голосов
/ 07 мая 2019

Нашел решение, которое сработало для меня.После исследования в Интернете мне понадобилась следующая ссылка на github.

https://github.com/jlangr/image-upload/blob/master/src/cljs/image_upload/core.cljs

Соответствующий код от @ jlangr. 

  (let [file (first (array-seq (.. file-added-event -target -files)))
        file-reader (js/FileReader.)]
    (set! (.-onload file-reader)
          (fn [file-load-event]
            (reset! preview-src (-> file-load-event .-target .-result))
            (let [img (.getElementById js/document img-id)]
              (set! (.-onload img)
                    (fn [image-load]
                      (.log js/console "dimensions:" (.-width img) "x" (.-height img)))))))
    (.readAsDataURL file-reader file))) 



 (defn image-upload-fn []
  [:div [:h2 "image-upload"]
   [:input {:type "file" :on-change load-image}]
   [:img {:id img-id :src @preview-src}]])
...