Abdisalan

Posted onFeb 14, 2020 • Edited onAug 25, 2020 • Originally published atabdisalan.com

How To Download A File using ReasonML

#reason

This article was originally published onmy blog

The solution is to use javascript. For now.

Some of the methods we use here, such asBlob aren't yet implemented in ReasonML (or I just couldn't find them), so we need to put some javascript into our ReasonML code using interop.

Here's a working version using codesandbox you can play with.

https://codesandbox.io/s/how-to-download-arbitrary-data-reasonml-yoxyg

Javascript Interop

In ReasonML, you can wrap javascript with[%bs.raw {| ...code goes here... |}] and it is accessible to the Reason code.

How Downloading works

First, we create a blob (Binary Large OBject) with our text MIME type.

varcontent=newBlob(["I AM TEXT"],{type:"text/plain"});

Then we create an object url that can reference the data in our Blob and we add this url to the anchor tag.

document.getElementById("download").setAttribute("href",window.URL.createObjectURL(content));

Lastly, we set the download attribute so that we can name our downloaded file.

document.getElementById("download").setAttribute("download",fileName);

In conclusion, the link to the blob causes the browser to download the file, and gives it our name.

All the code together:

index.html

<html><body><ahref=""id="download">Download File</a></body></html>

index.re

let setupDownload = [%bs.raw    {|    function() {        var fileName = "data.txt";        var content = new Blob(["I AM TEXT"], {type: "text/plain"});        document.getElementById("download")                .setAttribute("href", window.URL.createObjectURL(content));        document.getElementById("download")                .setAttribute("download", fileName);    }    |}];setupDownload();