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
This commit is contained in:
parent
171bba517d
commit
1140040bcc
|
@ -59,20 +59,6 @@ progressText = (progress) ->
|
||||||
else
|
else
|
||||||
txt
|
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
|
# Convert a file size to human-readable form
|
||||||
# <https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string>
|
# <https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string>
|
||||||
humanFileSize = (bytes, si) ->
|
humanFileSize = (bytes, si) ->
|
||||||
|
@ -102,6 +88,5 @@ export {
|
||||||
isBrowser,
|
isBrowser,
|
||||||
isText,
|
isText,
|
||||||
progressText,
|
progressText,
|
||||||
browserSaveFile,
|
|
||||||
humanFileSize
|
humanFileSize
|
||||||
}
|
}
|
|
@ -19,6 +19,7 @@ class FileDecrypter extends React.Component
|
||||||
progress: 0
|
progress: 0
|
||||||
key: key
|
key: key
|
||||||
iv: iv
|
iv: iv
|
||||||
|
downloaded: null
|
||||||
|
|
||||||
componentDidMount: ->
|
componentDidMount: ->
|
||||||
# Fetch metadata to show to user
|
# Fetch metadata to show to user
|
||||||
|
@ -60,9 +61,11 @@ class FileDecrypter extends React.Component
|
||||||
@setState
|
@setState
|
||||||
decrypting: true
|
decrypting: true
|
||||||
decrypted = await crypto.decryptFile @state.key, @state.iv, file
|
decrypted = await crypto.decryptFile @state.key, @state.iv, file
|
||||||
util.browserSaveFile @state.mime, @state.name, decrypted
|
blob = new Blob [decrypted],
|
||||||
|
type: @state.mime
|
||||||
@setState
|
@setState
|
||||||
decrypting: false
|
decrypting: false
|
||||||
|
downloaded: blob
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
<div className="content-pastebin">{
|
<div className="content-pastebin">{
|
||||||
|
@ -73,18 +76,31 @@ class FileDecrypter extends React.Component
|
||||||
<p>{@state.name}</p>
|
<p>{@state.name}</p>
|
||||||
<p>{@state.mime}</p>
|
<p>{@state.mime}</p>
|
||||||
<p>{util.humanFileSize @state.length}</p>
|
<p>{util.humanFileSize @state.length}</p>
|
||||||
<button
|
{
|
||||||
className="button-blue"
|
if not @state.downloaded
|
||||||
disabled={@state.downloading}
|
<button
|
||||||
onClick={@downloadFile}
|
className="button-blue"
|
||||||
>{
|
disabled={@state.downloading}
|
||||||
if not @state.downloading
|
onClick={@downloadFile}
|
||||||
"Download"
|
>{
|
||||||
else if @state.decrypting
|
if not @state.downloading
|
||||||
"Decrypting"
|
"Download"
|
||||||
|
else if @state.decrypting
|
||||||
|
"Decrypting"
|
||||||
|
else
|
||||||
|
util.progressText @state.progress
|
||||||
|
}</button>
|
||||||
else
|
else
|
||||||
util.progressText @state.progress
|
# Use an actual link here instead of triggering click
|
||||||
}</button>
|
# 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>
|
||||||
}</div>
|
}</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue