From 1140040bcceab9be62a5c7ca3d3c2441122e9334 Mon Sep 17 00:00:00 2001
From: Peter Cai <peter@typeblog.net>
Date: Wed, 19 Feb 2020 16:08:15 +0800
Subject: [PATCH] FileDecrypter: use an actual link to save the file

triggering click on a hidden element will not always work. Plus that
it's good to have user consent
---
 src/util.coffee              | 15 --------------
 src/web/fileDecrypter.coffee | 40 +++++++++++++++++++++++++-----------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/util.coffee b/src/util.coffee
index 8301295..9d97d52 100644
--- a/src/util.coffee
+++ b/src/util.coffee
@@ -59,20 +59,6 @@ progressText = (progress) ->
   else
     txt
 
-# Browser: save a file from ArrayBuffer
-browserSaveFile = (mime, name, file) ->
-  link = document.createElement 'a'
-  link.style.display = 'none';
-  document.body.appendChild link
-
-  blob = new Blob [file],
-    type: mime
-  objUrl = URL.createObjectURL blob
-
-  link.href = objUrl
-  link.download = name
-  link.click()
-
 # Convert a file size to human-readable form
 # <https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string>
 humanFileSize = (bytes, si) ->
@@ -102,6 +88,5 @@ export {
   isBrowser,
   isText,
   progressText,
-  browserSaveFile,
   humanFileSize
 }
\ No newline at end of file
diff --git a/src/web/fileDecrypter.coffee b/src/web/fileDecrypter.coffee
index 19098d0..5e584b6 100644
--- a/src/web/fileDecrypter.coffee
+++ b/src/web/fileDecrypter.coffee
@@ -19,6 +19,7 @@ class FileDecrypter extends React.Component
       progress: 0
       key: key
       iv: iv
+      downloaded: null
 
   componentDidMount: ->
     # Fetch metadata to show to user
@@ -60,9 +61,11 @@ class FileDecrypter extends React.Component
     @setState
       decrypting: true
     decrypted = await crypto.decryptFile @state.key, @state.iv, file
-    util.browserSaveFile @state.mime, @state.name, decrypted
+    blob = new Blob [decrypted],
+      type: @state.mime
     @setState
       decrypting: false
+      downloaded: blob
 
   render: ->
     <div className="content-pastebin">{
@@ -73,18 +76,31 @@ class FileDecrypter extends React.Component
           <p>{@state.name}</p>
           <p>{@state.mime}</p>
           <p>{util.humanFileSize @state.length}</p>
-          <button
-            className="button-blue"
-            disabled={@state.downloading}
-            onClick={@downloadFile}
-          >{
-            if not @state.downloading
-              "Download"
-            else if @state.decrypting
-              "Decrypting"
+          {
+            if not @state.downloaded
+              <button
+                className="button-blue"
+                disabled={@state.downloading}
+                onClick={@downloadFile}
+              >{
+                if not @state.downloading
+                  "Download"
+                else if @state.decrypting
+                  "Decrypting"
+                else
+                  util.progressText @state.progress
+              }</button>
             else
-              util.progressText @state.progress
-          }</button>
+              # Use an actual link here instead of triggering click
+              # on a hidden link, because on some browsers it doesn't work
+              <a
+                className="button-blue"
+                href={URL.createObjectURL @state.downloaded}
+                download={@state.name}
+              >
+                Save File
+              </a>
+          }
         </div>
     }</div>