diff --git a/README.md b/README.md
index 161c8463..a13dd675 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,7 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [CatGifsReactHooks](recipes/CatGifsReactHooks) | A React port of the ["HTTP - Cat GIFs" Elm Example](https://elm-lang.org/examples/cat-gifs). |
 | :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. |
 | :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. |
+|   | :heavy_check_mark: | [FileUploadHalogenHooks](recipes/FileUploadHalogenHooks) | A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload). |
 |   | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
 |   | :heavy_check_mark: | [GroceriesHalogenHooks](recipes/GroceriesHalogenHooks) | A Halogen port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |
 |   | :heavy_check_mark: | [GroceriesReactHooks](recipes/GroceriesReactHooks) | A React port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples). |
diff --git a/recipes/FileUploadHalogenHooks/.gitignore b/recipes/FileUploadHalogenHooks/.gitignore
new file mode 100644
index 00000000..57030e7b
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/.gitignore
@@ -0,0 +1,15 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/.cache/
+/dist/
+/web-dist/
+/prod-dist/
+/prod/
diff --git a/recipes/FileUploadHalogenHooks/README.md b/recipes/FileUploadHalogenHooks/README.md
new file mode 100644
index 00000000..39bd1edb
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/README.md
@@ -0,0 +1,9 @@
+# FileUploadHalogenHooks
+
+A Halogen port of the ["Files - Upload" Elm Example](https://elm-lang.org/examples/upload).
+
+## Expected Behavior:
+
+### Browser
+
+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.
diff --git a/recipes/FileUploadHalogenHooks/spago.dhall b/recipes/FileUploadHalogenHooks/spago.dhall
new file mode 100644
index 00000000..2e14f038
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/spago.dhall
@@ -0,0 +1,10 @@
+{ name = "FileUploadHalogenHooks"
+, dependencies =
+  [ "console"
+  , "effect"
+  , "halogen-hooks"
+  , "psci-support"
+  ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/FileUploadHalogenHooks/src/**/*.purs" ]
+}
diff --git a/recipes/FileUploadHalogenHooks/src/Main.purs b/recipes/FileUploadHalogenHooks/src/Main.purs
new file mode 100644
index 00000000..45ac9441
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/src/Main.purs
@@ -0,0 +1,37 @@
+module FileUploadHalogenHooks.Main where
+
+import Prelude
+
+import Data.Tuple.Nested ((/\))
+import DOM.HTML.Indexed.InputType (InputType(..))
+import Data.Maybe (Maybe(..))
+import Effect (Effect)
+import Halogen as H
+import Halogen.Aff as HA
+import Halogen.HTML as HH
+import Halogen.HTML.Events as HE
+import Halogen.HTML.Properties as HP
+import Halogen.Hooks as Hooks
+import Halogen.VDom.Driver (runUI)
+import Web.File.File as File
+
+main :: Effect Unit
+main =
+  HA.runHalogenAff do
+    body <- HA.awaitBody
+    void $ runUI hookComponent Nothing body
+
+hookComponent
+  :: forall unusedQuery unusedInput unusedOutput anyMonad
+   . H.Component HH.HTML unusedQuery unusedInput unusedOutput anyMonad
+hookComponent = Hooks.component \_ _ -> Hooks.do
+  files /\ filesIdx <- Hooks.useState []
+  Hooks.pure $
+    HH.div_
+    [ HH.input
+        [ HP.type_ InputFile
+        , HP.multiple true
+        , HE.onFileUpload \fileArray -> Just $ Hooks.put filesIdx fileArray
+        ]
+    , HH.div_ [ HH.text $ show $ map File.name files ]
+    ]
diff --git a/recipes/FileUploadHalogenHooks/web/index.html b/recipes/FileUploadHalogenHooks/web/index.html
new file mode 100644
index 00000000..48f4021e
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Render routes</title>
+</head>
+
+<body>
+  <script src="./index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/recipes/FileUploadHalogenHooks/web/index.js b/recipes/FileUploadHalogenHooks/web/index.js
new file mode 100644
index 00000000..e7112ee8
--- /dev/null
+++ b/recipes/FileUploadHalogenHooks/web/index.js
@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/FileUploadHalogenHooks.Main/index.js").main();