Skip to content

Commit 53a6021

Browse files
catapcatap
committed
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 `Seq[Array[Byte]]` from frontend to URL as simple call `FileService.asURL`, create an anchor to download it as `FileService.asAnchor` and asynchronously convert any uploaded `File` to `Array[Byte]` as `FileService.asBytesArray`, or to `InputStream` via `FileService.asInputStream`. 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. `FileService.asInputStream` is using `FileReaderSync` that is also missed inside scala-js-dom. I've opened a PR: scala-js/scala-js-dom#424 but it might be a while. Also, this is draft API but it is supported by majority of modern browsers: https://developer.mozilla.org/en-US/docs/Web/API/FileReaderSync#Browser_Compatibility
1 parent 33b4658 commit 53a6021

File tree

3 files changed

+200
-2
lines changed

3 files changed

+200
-2
lines changed

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

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
package io.udash.utils
2+
3+
import java.io.{IOException, InputStream}
4+
5+
import org.scalajs.dom._
6+
import org.scalajs.dom.html.Anchor
7+
import org.scalajs.dom.raw.Blob
8+
import scalatags.JsDom
9+
10+
import scala.scalajs.js
11+
import scala.concurrent.{Future, Promise}
12+
import scala.scalajs.js.annotation.JSGlobal
13+
import scala.scalajs.js.typedarray.ArrayBuffer
14+
import scala.util.Try
15+
16+
@js.native
17+
@JSGlobal
18+
sealed class FileReaderSync() extends js.Object {
19+
def readAsArrayBuffer(blob: Blob): ArrayBuffer = js.native
20+
}
21+
22+
sealed class FileBufferedInputStream(file: File, bufferSize: Int) extends InputStream {
23+
val fileReaderSync = new FileReaderSync()
24+
25+
var filePos: Int = 0
26+
var pos: Int = 0
27+
28+
var buffer: Array[Byte] = Array.empty
29+
30+
override def available(): Int = {
31+
val res = file.size.toInt - filePos
32+
if (res < 0) 0 else res
33+
}
34+
35+
override def read(): Int = {
36+
if (pos >= buffer.length) {
37+
import js.typedarray._
38+
39+
if (filePos >= file.size)
40+
return -1
41+
42+
val len = math.min(filePos + bufferSize, file.size.toInt)
43+
val slice = file.slice(filePos, len)
44+
buffer = new Int8Array(fileReaderSync.readAsArrayBuffer(slice)).toArray
45+
filePos += buffer.length
46+
pos = 0
47+
}
48+
val r = buffer(pos).toInt & 0xff
49+
pos += 1
50+
r
51+
}
52+
53+
override def close(): Unit = filePos = file.size.toInt
54+
55+
override def markSupported(): Boolean = true
56+
57+
var markPos: Option[Int] = None
58+
59+
override def mark(readlimit: Int): Unit =
60+
markPos = Some(pos + filePos - buffer.length)
61+
62+
override def reset(): Unit = markPos match {
63+
case Some(p) =>
64+
filePos = p
65+
pos = 0
66+
buffer = Array.empty
67+
markPos = None
68+
69+
case _ =>
70+
// do nothing
71+
}
72+
}
73+
74+
object FileService {
75+
76+
final val OctetStreamType = "application/octet-stream"
77+
78+
/**
79+
* Converts specified bytes arrays to string that contains URL
80+
* that representing the array given in the parameter with specified mime-type.
81+
*
82+
* Keep in mind that returned URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
83+
*/
84+
def asURL(bytesArrays: Seq[Array[Byte]], mimeType: String): String = {
85+
import js.typedarray._
86+
87+
val jsBytesArrays = js.Array[js.Any](bytesArrays.map(_.toTypedArray) :_ *)
88+
val blob = new Blob(jsBytesArrays, BlobPropertyBag(mimeType))
89+
URL.createObjectURL(blob)
90+
}
91+
92+
/**
93+
* Converts specified bytes arrays to string that contains URL
94+
* that representing the array given in the parameter with `application/octet-stream` mime-type.
95+
*
96+
* Keep in mind that returned URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
97+
*/
98+
def asURL(bytesArrays: Seq[Array[Byte]]): String =
99+
asURL(bytesArrays, OctetStreamType)
100+
101+
/**
102+
* Converts specified bytes array to string that contains URL
103+
* that representing the array given in the parameter with specified mime-type.
104+
*
105+
* Keep in mind that returned URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
106+
*/
107+
def asURL(byteArray: Array[Byte], mimeType: String): String =
108+
asURL(Seq(byteArray), mimeType)
109+
110+
/**
111+
* Converts specified bytes array to string that contains URL
112+
* that representing the array given in the parameter with `application/octet-stream` mime-type.
113+
*
114+
* Keep in mind that returned URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
115+
*/
116+
def asURL(byteArray: Array[Byte]): String =
117+
asURL(Seq(byteArray), OctetStreamType)
118+
119+
/**
120+
* Create an anchor element that on click downloads specified URL as a file with specified name.
121+
*/
122+
def asAnchor(filename: String, url: String): JsDom.TypedTag[Anchor] = {
123+
import JsDom.all._
124+
125+
val download = attr("download")
126+
a(href := url, download := filename)
127+
}
128+
129+
/**
130+
* Create an anchor element that on click downloads byte array as a file with specified name.
131+
*
132+
* Keep in mind that anchor's href URL should be revoked via `org.scalajs.dom.revokeObjectURL(url)`.
133+
*/
134+
def asAnchor(filename: String, bytes: Array[Byte], mimeType: String = OctetStreamType): JsDom.TypedTag[Anchor] =
135+
asAnchor(filename, asURL(Seq(bytes), mimeType))
136+
137+
/**
138+
* Asynchronously convert specified file to bytes array.
139+
*/
140+
def asBytesArray(file: File): Future[Array[Byte]] = {
141+
import js.typedarray._
142+
143+
val fileReader = new FileReader()
144+
val promise = Promise[Array[Byte]]()
145+
146+
fileReader.onerror = (e: Event) =>
147+
promise.failure(new IOException(e.toString))
148+
149+
fileReader.onabort = (e: Event) =>
150+
promise.failure(new IOException(e.toString))
151+
152+
fileReader.onload = (_: UIEvent) =>
153+
promise.complete(Try(
154+
new Int8Array(fileReader.result.asInstanceOf[ArrayBuffer]).toArray
155+
))
156+
157+
fileReader.readAsArrayBuffer(file)
158+
159+
promise.future
160+
}
161+
162+
/**
163+
* Convert specified file to InputStream with blocking I/O
164+
*
165+
* Because it is using synchronous I/O that could potentially this API can be used only inside worker.
166+
*
167+
* This method is using FileReaderSync that is part of Working Draft File API.
168+
* Anyway it is supported for majority of modern browsers
169+
*/
170+
def asInputStream(file: File, bufferSize: Int = 1024): InputStream =
171+
new FileBufferedInputStream(file, bufferSize)
172+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ class FrontendFilesView extends View {
2424
),
2525
p("You can find a working demo application in the ", a(href := References.UdashFilesDemoRepo, target := "_blank")("Udash Demos"), " repositiory."),
2626
h3("Frontend forms"),
27+
p(i("FileService"), " is an object that allows to convert ", i("Array[Byte]")," to URL, save it as file from frontend ",
28+
" and asynchronously convert ", i("File"), " to ", i("Array[Byte]"), "."),
2729
p(i("FileInput"), " is the file HTML input wrapper providing a property containing selected files. "),
2830
fileInputSnippet,
2931
p("Take a look at the following live demo:"),

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package io.udash.web.guide.views.frontend.demos
22

33
import io.udash.css.CssView
4+
import io.udash.utils.FileService
45
import io.udash.web.guide.demos.AutoDemo
56
import io.udash.web.guide.styles.partials.GuideStyles
67
import scalatags.JsDom.all._
@@ -9,8 +10,11 @@ object FileInputDemo extends AutoDemo with CssView {
910

1011
private val (rendered, source) = {
1112
import io.udash._
12-
import org.scalajs.dom.File
13+
import org.scalajs.dom.{File, URL}
1314
import scalatags.JsDom.all._
15+
import org.scalajs.dom.window
16+
17+
import scala.concurrent.ExecutionContext.Implicits.global
1418

1519
val acceptMultipleFiles = Property(true)
1620
val selectedFiles = SeqProperty.blank[File]
@@ -19,7 +23,27 @@ object FileInputDemo extends AutoDemo with CssView {
1923
FileInput(selectedFiles, acceptMultipleFiles)("files"),
2024
h4("Selected files"),
2125
ul(repeat(selectedFiles)(file => {
22-
li(file.get.name).render
26+
val content = Property(Array.empty[Byte])
27+
28+
window.setTimeout(() =>
29+
FileService.asBytesArray(file.get) foreach { bytes =>
30+
content.set(bytes)
31+
}, 3000)
32+
33+
val name = file.get.name
34+
li(showIfElse(content.transform(_.isEmpty))(
35+
span(name).render,
36+
{
37+
val anchor = FileService.asAnchor(name, content.get)(name).render
38+
39+
window.setTimeout(() => {
40+
content.set(Array.empty[Byte])
41+
URL.revokeObjectURL(anchor.href)
42+
}, 10000)
43+
44+
anchor
45+
}
46+
)).render
2347
}))
2448
)
2549
}.withSourceCode

0 commit comments

Comments
 (0)