Wie bekomme ich Dateien von <input type = 'file' ... /> in ClojureScript

Question

Ich versuche, Bilddatei im Eingabefeld zu bekommen, aber ich konnte es nicht tun. Hier ist der Code:

:on-change (fn [_] 
      (this-as this 
       (println "Files: " (.-files this)))) 

Aber (.-files this) kehrt nil.

Irgendwelche Ideen?

P.S: Ich möchte dieses Bild auf meinen Server hochladen.

Answer 1

Hier ein brauchbarer Ausschnitt aus unserem Projekt ist:

:on-change 
(fn [this] 
    (if (not (= "" (-> this .-target .-value))) 
     (let [^js/File file (-> this .-target .-files (aget 0))] 
      ;; your logic here ... 
      ;; now reset the widget to let user upload a new one 
      (set! (-> this .-target .-value) "")))) 

Hope this helfen würde.

Answer 2

müssen Sie zuerst den Dom-Knoten von irgendwo bekommen. In React world this könnte nicht das Dom sein, da sie syntaktische Ereignisse sind.

:on-change (fn [event] 
      (let [dom (goog.object/get event "target") 
        file (goog.object/getValueByKeys dom #js ["files" 0])])) 

oder mit regulären Interop Formen in ClojureScript:

:on-change (fn [event] 
      (let [files (.. event -target -files) ; returns JS Array 
        file (first files)] 
       (do-something-with file)])) 

https://reactjs.org/docs/handling-events.html

Answer 3

auf Alberts Antwort zu erweitern (und weil meine Änderungen abgelehnt wurden):

Statt goog.object/get wie unter der Verwendung (und in seiner Antwort mit o/get):

(let [dom (goog.object/get event "target") 
     file (goog.object/getValueByKeys dom #js ["files" 0])])) 

Sie auch regelmäßige Interop verwenden können Formulare in ClojureScript:

:on-change (fn [event] 
      (let [files (.. event -target -files) ; returns JS Array 
        file (first files)] 
       (do-something-with file)]))