FileUpload.purs

module Component.FileUploader where 

import Prelude (($), (<$>), (>>=), (=<<), (<<<), unit, bind, void, pure)
import Control.Monad.Except (runExcept)
import Control.Bind (join)
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Traversable (sequence)
import Effect.Console (log, logShow)
import Foreign as Foreign
import React.Basic (Component, JSX, StateUpdate(..), element, capture, capture_, createComponent, make, send)
import React.Basic (fragment) as R
import React.Basic.DOM as R
import React.UIkit (ukGrid, ukIcon, ukFormCustom) as R
import React.UIkit (UIkit)
import React.UIkit as UIkit 
import React.Basic.Events (handler)
import React.Basic.DOM.Events (currentTarget) 
import Web.File.FileList 
import Web.File.File 
import Web.File.FileReader 
import Web.HTML.HTMLInputElement as Input 

component :: Component Props 
component = createComponent "FileUploader"

type Props = {}

inputInitialLabel :: String 
inputInitialLabel = "Attach CSV file by dropping them here or "

onFileChange currentTarget = do
    maybeFilesList <- sequence $ Input.files <$> Input.fromEventTarget currentTarget 
    fr <- fileReader
    maybeBlob <- pure  $ do
        mfl  <- maybeFilesList
        fl   <- mfl
        toBlob <$> item 0 fl 

    _ <- sequence $ (\b -> readAsText b fr) <$> maybeBlob
        

    f <- result fr 
    let r = runExcept $ Foreign.readString f
    logShow r



fileUploader :: Props -> JSX 
fileUploader = make component { initialState, render }
    where 
        initialState = { inputLabel: inputInitialLabel, uikit: (Nothing :: Maybe UIkit) }

        render = \self -> R.fragment 
            [ R.div 
              { className: "js-upload uk-placeholder uk-text-center"
              , children: 
                [ R.ukIcon "icon: cloud-upload" {}
                , R.span 
                  { className: "uk-text-middle"
                  , children: [ R.text self.state.inputLabel ]
                  }
                , R.ukFormCustom 
                  { children:
                    [ R.input 
                      { "type": "file" 
                      , onChange: handler currentTarget onFileChange
                      }

                    , R.span 
                      { className: "uk-link"
                      , children: [ R.text "selecting one" ]
                      }
                    ]
                  }
                ]
              }
            , R.progress 
              { id: "js-progressbar"
              , className: "uk-progress"
              , value: "0"
              , max: 100.00
              , hidden: true
              }
            ]