Introduced a simple way to work with files inside frontend

The usecase of this code is something like this: let image that user is making a
protonmail or any another application where content inside frontend (=browser
storage) some secret user's data that shouldn't be exposed to backend. Secret
key for example or anything like that.

This code allows to developer to convert any `Array[Byte]` from frontend to URL
as simple call `FileService.bytesAsURL()`, create an anchor to download it as
`FileService.anchor()` and asynchronously convert any uploaded file to
`Array[Byte]` as `FileService.convert()`.

Unfortunately scalatags doesn't support `download` attribute and I need to make
it by hand. I've opened a PR: com-lihaoyi/scalatags#212 to
introduce it, but it might be a while until it is included to release.

Author: catap

core/.js/src/main/scala/io/udash/utils/FileService.scala

@@ -0,0 +1,67 @@
+package io.udash.utils
+
+import java.io.IOException
+
+import org.scalajs.dom._
+import org.scalajs.dom.html.Anchor
+import scalatags.JsDom
+
+import scala.scalajs.js
+import scala.concurrent.{Future, Promise}
+import scala.util.Try
+
+object FileService {
+
+  final val OctetStreamType = "application/octet-stream"
+
+  /**
+   *  Converts specified bytes array to string that contains URL
+   *  that representing the array given in the parameter with optionally specified mime-type.
+   *
+   *  Keep in mind that returned URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
+   */
+  def bytesAsURL(bytes: Array[Byte], mimeType: String = OctetStreamType): String = {
+    import js.typedarray._
+
+    val jsBytes = js.Array[js.Any](bytes.toTypedArray)
+    val blob = new Blob(jsBytes, BlobPropertyBag(mimeType))
+    URL.createObjectURL(blob)
+  }
+
+  /**
+   * Create an anchor element that on click downloads byte array as a file with specified name.
+   *
+   * Keep in mind that anchor's href URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
+   */
+  def anchor(filename: String, bytes: Array[Byte], mimeType: String = OctetStreamType): JsDom.TypedTag[Anchor] = {
+    import JsDom.all._
+
+    val download = attr("download")
+    a(href := bytesAsURL(bytes, mimeType), download := filename)
+  }
+
+  /**
+   * Asynchronously convert specified file to bytes array.
+   */
+  def convert(file: File): Future[Array[Byte]] = {
+    import js.typedarray._
+
+    val fileReader = new FileReader()
+    val promise = Promise[Array[Byte]]()
+
+    fileReader.onerror = (e: Event) =>
+      promise.failure(new IOException(e.toString))
+
+    fileReader.onabort = (e: Event) =>
+      promise.failure(new IOException(e.toString))
+
+    fileReader.onload = (_: UIEvent) =>
+      promise.complete(Try(
+        new Int8Array(fileReader.result.asInstanceOf[ArrayBuffer]).toArray
+      ))
+
+    fileReader.readAsArrayBuffer(file)
+
+    promise.future
+  }
+}

guide/guide/.js/src/main/scala/io/udash/web/guide/views/frontend/FrontendFilesView.scala

@@ -24,6 +24,8 @@ class FrontendFilesView extends View {
     ),
     p("You can find a working demo application in the ", a(href := References.UdashFilesDemoRepo, target := "_blank")("Udash Demos"), " repositiory."),
     h3("Frontend forms"),
+    p(i("FileService"), " is an object that allows to convert ", i("Array[Byte]")," to URL, save it as file from fronted ",
+      " and asynchronously load file to bytes array. "),
     p(i("FileInput"), " is the file HTML input wrapper providing a property containing selected files. "),
     fileInputSnippet,
     p("Take a look at the following live demo:"),

guide/guide/.js/src/main/scala/io/udash/web/guide/views/frontend/demos/FileInputDemo.scala

@@ -1,6 +1,7 @@
 package io.udash.web.guide.views.frontend.demos
 
 import io.udash.css.CssView
+import io.udash.utils.FileService
 import io.udash.web.guide.demos.AutoDemo
 import io.udash.web.guide.styles.partials.GuideStyles
 import scalatags.JsDom.all._
@@ -12,14 +13,24 @@ object FileInputDemo extends AutoDemo with CssView {
     import org.scalajs.dom.File
     import scalatags.JsDom.all._
 
+    import scala.concurrent.ExecutionContext.Implicits.global
+
     val acceptMultipleFiles = Property(true)
     val selectedFiles = SeqProperty.blank[File]
 
     div(
       FileInput(selectedFiles, acceptMultipleFiles)("files"),
       h4("Selected files"),
       ul(repeat(selectedFiles)(file => {
-        li(file.get.name).render
+        val content = Property(Array.empty[Byte])
+        FileService.convert(file.get) foreach { bytes =>
+          content.set(bytes)
+        }
+        val name = file.get.name
+        li(showIfElse(content.transform(_.isEmpty))(
+          span(name).render,
+          FileService.anchor(name, content.get)(name).render
+        )).render
       }))
     )
   }.withSourceCode