shan shan - 1 year ago 62
React JSX Question

How to access Reagent Component's children elements correctly?

I'm a clojure/Clojurescript beginner. This is regarding my 1st Luminus web app with Reagent.
I managed to populate 8 upload buttons by an iteration and fianally using


I have a the following hiccup structure in a loop and all the looped items are return as a react component.

(let [state_ (reagent/atom (into [] (take 8 (repeat "img/image.png"))))
state' @state_
[:div {:class "col-md-3 ui segment "}
[:img {:class "ui small image"
:src (nth state' idn)}]
[:div {:class "ui icon buttons"}
[:button {:class "ui green button img-btn s-btn"}
[:i {:class "fa fa-picture-o"}]]
[:input {:class "inputfile"
:type "file"
:id (str "ad-pic-" idn)
:name (str "ad-pic-file-" idn)
:on-change (fn [e]
(this-as this
(let [el this
name (.-name el)
file (aget (.-files el) 0)
form-data (doto
(.append name file))]
(POST "/upload-pics"
{:headers {"x-csrf-token"
(.-value (.getElementById js/document "token"))}
:body form-data
:response-format :json
:keywords? true
:handler handle-response-ok
:error-handler handle-response-error})
[:button {:class "ui disabled button img-btn r-btn" }
[:i {:class "fa fa-times"}]]]]]

After creating the Component Upload buttons working as type="file" behavior. But the issue is I cannot get the uploaded file parameter to send to the backend by ajax request.

Sorry about this question being longer. I'm so much appreciate if you could look in to this. Thanks.

mac mac
Answer Source


(-> e .-target .-files (aget 0))

instead of:

(aget (.-files el) 0)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download