|
| 1 | +module FileUploadReactHooks.Main where |
| 2 | + |
| 3 | +import Prelude |
| 4 | +import Data.Foldable (for_) |
| 5 | +import Data.Maybe (Maybe(..)) |
| 6 | +import Effect (Effect) |
| 7 | +import Effect.Exception (throw) |
| 8 | +import React.Basic.DOM (render) |
| 9 | +import React.Basic.DOM as R |
| 10 | +import React.Basic.DOM.Events (currentTarget) |
| 11 | +import React.Basic.Events (handler) |
| 12 | +import React.Basic.Hooks (Component, component, fragment, useState', (/\)) |
| 13 | +import React.Basic.Hooks as React |
| 14 | +import Web.File.File as File |
| 15 | +import Web.File.FileList as FileList |
| 16 | +import Web.HTML (window) |
| 17 | +import Web.HTML.HTMLDocument (body) |
| 18 | +import Web.HTML.HTMLElement (toElement) |
| 19 | +import Web.HTML.HTMLInputElement as HTMLInputElement |
| 20 | +import Web.HTML.Window (document) |
| 21 | + |
| 22 | +main :: Effect Unit |
| 23 | +main = do |
| 24 | + body <- body =<< document =<< window |
| 25 | + case body of |
| 26 | + Nothing -> throw "Could not find body." |
| 27 | + Just b -> do |
| 28 | + fileUploadComponent <- mkFileUploadComponent |
| 29 | + render (fileUploadComponent {}) (toElement b) |
| 30 | + |
| 31 | +mkFileUploadComponent :: Component {} |
| 32 | +mkFileUploadComponent = do |
| 33 | + component "FileUploadComponent" \_ -> React.do |
| 34 | + fileList /\ setFileList <- useState' [] |
| 35 | + let |
| 36 | + handleChange t = |
| 37 | + for_ (HTMLInputElement.fromEventTarget t) \fileInput -> do |
| 38 | + maybeFiles <- HTMLInputElement.files fileInput |
| 39 | + for_ maybeFiles (setFileList <<< map File.name <<< FileList.items) |
| 40 | + pure |
| 41 | + $ fragment |
| 42 | + [ R.input |
| 43 | + { type: "file" |
| 44 | + , multiple: true |
| 45 | + , onChange: handler currentTarget handleChange |
| 46 | + } |
| 47 | + , R.pre_ |
| 48 | + [ R.text (show fileList) |
| 49 | + ] |
| 50 | + ] |
0 commit comments