Programming Elm

Upload Images with Ports

Currently, the new image upload feature only opens a file prompt. You need to access the selected files to actually upload them. This presents an interesting problem for Elm. Elm is a pure language, so it can’t directly access the DOM to retrieve the selected files.

But, JavaScript easily interacts with the DOM. You just need Elm and JavaScript to talk with each other. They haven’t been on speaking terms up to this point. Maybe JavaScript is a little jealous of Elm. Let’s help them reconcile with ports.

In this section, you will use ports to notify JavaScript that a user has uploaded images from Elm. Then, you will use JavaScript to read the images’ file data and update the note with images.

Notify JavaScript with a Port ...