How to make a form able to upload files in elm

Question

I am trying to make a form in elm that would be able to upload a picture and some accompanying data.

Right now all my fields are updating my model via the onInput function, and I when I press the submit button I send my data as JSON via the Http.post function. If I understand well this is the idiomatic way of doing forms in elm.

Is there a way to add file uploading capabilities to this kind of form? If possible I would like to keep control in the elm app without resorting to the standard html elements to do submitting.

Answer 1

Here you are. Some of my notes:

• http://simonh1000.github.io/2016/12/elm-s3-uploads/
  • https://github.com/simonh1000/file-reader
• https://github.com/danyx23/elm-dropzone
  • https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
• File Upload in Elm
• elm: read file content
• https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17
• Add support for https://github.com/elm-lang/html/issues/20
  • https://github.com/lovasoa/elm-fileinput
• https://www.reddit.com/r/elm/comments/4926am/uploading_files_through_elmhttp/
• http://elm-ui.info/documentation/guides/handling-files
• How to trigger click event in elm

Answer 2

Yes, native code is needed for two things:

• to access the FileReader API; and
• to 'trick' the HTTP library into allowing you to add a file to a multipart form.

This is all covered in this blog post, which accompanies the FileReader library mentioned by rofol.

Instead of native code, you can of course use ports.