shan shan - 1 month ago 9
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

reagent/render-component
function.

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_
ad-box
[: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
(js/FormData.)
(.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})
(set-upload-indicator))))}]
[:button {:class "ui disabled button img-btn r-btn" }
[:i {:class "fa fa-times"}]]]]]
ad-box)


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

Use:

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

instead of:

(aget (.-files el) 0)