Skip to content

Instantly share code, notes, and snippets.

@mmport80

mmport80/FileUpload.Elm

Created October 31, 2014 11:13
Show Gist options
  • Save mmport80/68d142e346cf906f4d9d to your computer and use it in GitHub Desktop.
Save mmport80/68d142e346cf906f4d9d to your computer and use it in GitHub Desktop.
Download ZIP
File Upload Port Example for Elm
Raw
FileUpload.Elm
module FileUpload where
import String
port output : Signal [String]
port output = String.lines <~ openFromFile
port openFromFile : Signal String
Raw
FileUpload.html
<html>
<head>
<script type="text/javascript" src="http://elm-lang.org/elm-runtime.js"></script>
<script type="text/javascript" src="build/FileUpload.js"></script>
</head>
<body>
<p>
File upload using Elm ports
<p>
<input type="file" id="fileinput"/>
</body>
<script type="text/javascript" src="Ports.js"></script>
</html>
Raw
Ports.js
//text output -- it no html or graphical output
var fileupload = Elm.worker(Elm.FileUpload, {
openFromFile: ""
});
var upload = document.getElementsByTagName('input')[0]
upload.onchange = function (e) {
reader = new FileReader();
reader.onload = function (event) {
data = event.target.result;
//file's text data is sent to 'openfromfile' port
fileupload.ports.openFromFile.send(data);
}
reader.readAsText(upload.files[0]);
};
function logger(x) { console.log(x) }
//data from 'output' port is sent to logger function
fileupload.ports.output.subscribe(logger);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment