![Javascript to Elm artwork](https://is5-ssl.mzstatic.com/image/thumb/Podcasts123/v4/ae/06/b5/ae06b52b-64ae-9a7e-1f31-b293a2085da9/mza_3840978457865575010.png/100x100bb.jpg)
38: Elm File Upload
Javascript to Elm
English - May 31, 2018 10:00 - 29 minutes - 24 MB - ★★★★★ - 4 ratingsTechnology elm javascript programming Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed
Hope last weeks talk was enjoyable. Back to our refactor of meownotes. Tackling some of the more _interesting_ parts of the new notes page. Things that I've been avoiding, like file upload, mostly because I knew I'd need to modify my model, Interop some things, **AND** deal with type Maybe.
# 38: Elm File Upload
## Elm File Upload
* Setup Interops with fileSelected outgoing
* Adding an Outgoing Data type for 'File Selected' and matching case statement for sendData that takes type OutgoingData and returns a Cmd msg
* Preventing default
* It's seems so easy bc I already know it * Reminding myself about the relearning, deeper learning cycle * onWithOptions, oh boy * Json.Decoder.success - Ignore the JSON and produce a certain Elm value. * wowzer that's a lot
* Setup Interops with fileRead incoming
* function to read in file using FileReader API
* take value and send it back as JSON
* decode incoming data and pipe to update function, with pattern match on incoming data case
* You need to account for the following values:
JSInterop.FileReadImage _
Add a branch to cover this pattern!
* Totally always get when I forget to add the pattern match.
### Success
![Preview Image](https://i.imgur.com/NiatiP1.png)
## Picks
## Resources
* [Using Ports with Files](https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17) * [prevent default with onwithoptions](https://medium.com/@ckoster22/elm-preventdefault-and-onwithoptions-99a6a56e6638) * [Prevent default Example](https://medium.com/@ckoster22/elm-preventdefault-and-onwithoptions-99a6a56e6638)
## Follow
- JavaScript to Elm - Twitter: [@jstoelm](https://twitter.com/jstoelm) - Email: [[email protected]](mailto:[email protected]) - Jesse Tomchak - Twitter: [@jtomchak](https://twitter.com/jtomchak)