Previous Episode: 37: Elm View Showdown
Next Episode: 39: Rust For Better Elm

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)

Twitter Mentions