Use a download button instead of downloading a file automatically

customize.dist/main.css

@@ -603,6 +603,14 @@ html.cp,
   font-family: lato, Helvetica, sans-serif;
   font-size: 1.02em;
 }
+.cp .unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 .cp h1,
 .cp h2,
 .cp h3,

customize.dist/translations/messages.fr.js

@@ -366,6 +366,7 @@ define(function () {
     out.upload_name = "Nom du fichier";
     out.upload_size = "Taille";
     out.upload_progress = "État";
+    out.download_button = "Déchiffrer et télécharger";
 
     // general warnings
     out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. <a href='/about.html#pinning'>En savoir plus...</a>";

customize.dist/translations/messages.js

@@ -371,6 +371,7 @@ define(function () {
     out.upload_name = "File name";
     out.upload_size = "Size";
     out.upload_progress = "Progress";
+    out.download_button = "Decrypt & Download";
 
     // general warnings
     out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. <a href='/about.html#pinning'>Learn more...</a>";

www/file/file.css

@@ -7,7 +7,8 @@ body {
   padding: 0px;
   display: inline-block;
 }
-#file {
+#file,
+#dl {
   display: block;
   height: 100%;
   width: 100%;
@@ -21,7 +22,8 @@ body {
   position: absolute;
   z-index: -1;
 }
-#upload-form {
+#upload-form,
+#download-form {
   padding: 0px;
   margin: 0px;
   position: relative;
@@ -31,7 +33,8 @@ body {
   margin: 50px auto;
   max-width: 80vw;
 }
-#upload-form label {
+#upload-form label,
+#download-form label {
   line-height: 50vh;
   text-align: center;
   position: relative;

www/file/file.less

@@ -9,7 +9,7 @@ html, body {
     padding: 0px;
     display: inline-block;
 }
-#file {
+#file, #dl {
     display: block;
     height: 100%;
     width: 100%;
@@ -25,7 +25,7 @@ html, body {
     z-index: -1;
 }
 
-#upload-form {
+#upload-form, #download-form {
     padding: 0px;
     margin: 0px;
 
@@ -35,8 +35,7 @@ html, body {
     display: block;
     margin: 50px auto;
     max-width: 80vw;
-}
-#upload-form label {
+    label {
         line-height: 50vh;
         text-align: center;
         position: relative;
@@ -45,7 +44,7 @@ html, body {
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
+}
 .hovering {
     background-color: rgba(255, 0, 115, 0.5) !important;
 }

www/file/inner.html

@@ -13,9 +13,14 @@
     <div id="upload-form" style="display: none;">
         <input type="file" name="file" id="file" class="inputfile" />
         <label for="file" class="block unselectable" data-localization-title="upload_choose"
-            data-localization="upload_choose"><span class="block" id="progress">&nbsp;</span></label>
+            data-localization="upload_choose"></label>
     </div>
-    <table id="status">
+    <div id="download-form" style="display: none;">
+        <input type="button" name="dl" id="dl" class="inputfile" />
+        <label for="dl" class="block unselectable" data-localization-title="download_button"
+            data-localization="download_button"></label>
+    </div>
+    <table id="status" style="display: none;">
         <tr>
             <td data-localization="upload_name">File name</td>
             <td data-localization="upload_size">Size</td>

www/file/main.js

@@ -21,8 +21,9 @@ define([
     var ifrw = $('#pad-iframe')[0].contentWindow;
     var $iframe = $('#pad-iframe').contents();
     var $form = $iframe.find('#upload-form');
-    //var $progress = $form.find('#progress');
+    var $dlform = $iframe.find('#download-form');
     var $label = $form.find('label');
+    var $dllabel = $dlform.find('label');
     var $table = $iframe.find('#status');
 
     Cryptpad.addLoadingScreen();
@@ -100,8 +101,6 @@ define([
                 var b64Key = Nacl.util.encodeBase64(key);
                 Cryptpad.replaceHash(Cryptpad.getFileHashFromKeys(id, b64Key));
 
-                //$form.hide();
-
                 APP.toolbar.addElement(['fileshare'], {});
 
                 var title = document.title = metadata.name;
@@ -250,6 +249,12 @@ define([
         Title.updateTitle(Cryptpad.initialName || getTitle() || Title.defaultTitle);
 
         if (!uploadMode) {
+            $dlform.show();
+            Cryptpad.removeLoadingScreen();
+            $dlform.find('#dl').click(function (e) {
+
+                if (myFile) { exportFile(); }
+
                 var src = Cryptpad.getBlobPathFromHex(hexFileName);
                 return Cryptpad.fetch(src, function (e, u8) {
                     if (e) { return void Cryptpad.alert(e); }
@@ -263,7 +268,6 @@ define([
 
                     FileCrypto.decrypt(u8, key, function (e, data) {
                         if (e) {
-                        Cryptpad.removeLoadingScreen();
                             return console.error(e);
                         }
                         console.log(data);
@@ -271,9 +275,12 @@ define([
                         myFile = data.content;
                         myDataType = data.metadata.type;
                         Title.updateTitle(title || Title.defaultTitle);
-                    Cryptpad.removeLoadingScreen();
+                        exportFile();
                     });
                 });
+
+            });
+            return;
         }
 
         if (!Cryptpad.isLoggedIn()) {