Skip to content

Commit b9b4f2e

Browse files
JordanMartinezJordanMartinez
authored
Add FileUploadHalogenHooks (#151)
* Add FileUploadHalogenHooks * Update FileUploadHalogenHooks to point to Elm example directly
1 parent fe26d01 commit b9b4f2e

File tree

7 files changed

+87
-0
lines changed

7 files changed

+87
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ Running a web-compatible recipe:
9595
| | :heavy_check_mark: | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
9696
| :heavy_check_mark: | | [DiceCLI](recipes/DiceCLI) | This recipe shows how to create an interactive command line prompt that repeatedly generates a random number between 1 and 6. |
9797
| :heavy_check_mark: | :heavy_check_mark: | [DiceLog](recipes/DiceLog) | This recipe shows how to log a random integer between 1 and 6 (representing a roll of a die) in either the node.js or web browser console. |
98+
| | :heavy_check_mark: | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
9899
| | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
99100
| | :heavy_check_mark: | [GroceriesHalogenHooks](recipes/GroceriesHalogenHooks) | A Halogen port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |
100101
| | :heavy_check_mark: | [GroceriesReactHooks](recipes/GroceriesReactHooks) | A React port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |

‎recipes/FileUploadHalogenHooks/.gitignore

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
/.spago
11+
/.cache/
12+
/dist/
13+
/web-dist/
14+
/prod-dist/
15+
/prod/

‎recipes/FileUploadHalogenHooks/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# FileUploadHalogenHooks
2+
3+
A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload).
4+
5+
## Expected Behavior:
6+
7+
### Browser
8+
9+
The browser will display an upload button and the names of the last-uploaded files. When the user clicks the upload button and uploads 1 or more files, the label will show the names of those files.

‎recipes/FileUploadHalogenHooks/spago.dhall

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{ name = "FileUploadHalogenHooks"
2+
, dependencies =
3+
[ "console"
4+
, "effect"
5+
, "halogen-hooks"
6+
, "psci-support"
7+
]
8+
, packages = ../../packages.dhall
9+
, sources = [ "recipes/FileUploadHalogenHooks/src/**/*.purs" ]
10+
}

‎recipes/FileUploadHalogenHooks/src/Main.purs

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
module FileUploadHalogenHooks.Main where
2+
3+
import Prelude
4+
5+
import Data.Tuple.Nested ((/\))
6+
import DOM.HTML.Indexed.InputType (InputType(..))
7+
import Data.Maybe (Maybe(..))
8+
import Effect (Effect)
9+
import Halogen as H
10+
import Halogen.Aff as HA
11+
import Halogen.HTML as HH
12+
import Halogen.HTML.Events as HE
13+
import Halogen.HTML.Properties as HP
14+
import Halogen.Hooks as Hooks
15+
import Halogen.VDom.Driver (runUI)
16+
import Web.File.File as File
17+
18+
main :: Effect Unit
19+
main =
20+
HA.runHalogenAff do
21+
body <- HA.awaitBody
22+
void $ runUI hookComponent Nothing body
23+
24+
hookComponent
25+
:: forall unusedQuery unusedInput unusedOutput anyMonad
26+
. H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
27+
hookComponent = Hooks.component \_ _ -> Hooks.do
28+
files /\ filesIdx <- Hooks.useState []
29+
Hooks.pure $
30+
HH.div_
31+
[ HH.input
32+
[ HP.type_ InputFile
33+
, HP.multiple true
34+
, HE.onFileUpload \fileArray -> Just $ Hooks.put filesIdx fileArray
35+
]
36+
, HH.div_ [ HH.text $ show $ map File.name files ]
37+
]

‎recipes/FileUploadHalogenHooks/web/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Render routes</title>
7+
</head>
8+
9+
<body>
10+
<script src="./index.js"></script>
11+
</body>
12+
13+
</html>

‎recipes/FileUploadHalogenHooks/web/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
"use strict";
2+
require("../../../output/FileUploadHalogenHooks.Main/index.js").main();

0 commit comments

Comments
 (0)