Add remove file block feature

public/css/fontello-codes.css

@@ -3,4 +3,5 @@
 .icon-clipboard:before { content: '\e801'; } /* '' */
 .icon-trash:before { content: '\e802'; } /* '' */
 .icon-mail:before { content: '\e803'; } /* '' */
-.icon-help-circled:before { content: '\e804'; } /* '' */
+.icon-help-circled:before { content: '\e804'; } /* '' */
+.icon-cancel:before { content: '\e805'; } /* '' */

public/css/fontello-ie7-codes.css

@@ -3,4 +3,5 @@
 .icon-clipboard { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/css/fontello-ie7.css

@@ -14,4 +14,5 @@
 .icon-clipboard { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-help-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

public/css/fontello.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?37853598');
-  src: url('../font/fontello.eot?37853598#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff?37853598') format('woff'),
-       url('../font/fontello.ttf?37853598') format('truetype'),
-       url('../font/fontello.svg?37853598#fontello') format('svg');
+  src: url('../font/fontello.eot?5451170');
+  src: url('../font/fontello.eot?5451170#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?5451170') format('woff'),
+       url('../font/fontello.ttf?5451170') format('truetype'),
+       url('../font/fontello.svg?5451170#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?37853598#fontello') format('svg');
+    src: url('../font/fontello.svg?5451170#fontello') format('svg');
   }
 }
 */
@@ -58,4 +58,5 @@
 .icon-clipboard:before { content: '\e801'; } /* '' */
 .icon-trash:before { content: '\e802'; } /* '' */
 .icon-mail:before { content: '\e803'; } /* '' */
-.icon-help-circled:before { content: '\e804'; } /* '' */
+.icon-help-circled:before { content: '\e804'; } /* '' */
+.icon-cancel:before { content: '\e805'; } /* '' */

public/font/fontello.svg

@@ -11,6 +11,7 @@
 <glyph glyph-name="trash" unicode="&#xe802;" d="m0 569l0 68q2 37 29 63t65 25l94 0 0 31q0 39 27 67t66 27l313 0q39 0 66-27t28-67l0-31 93 0q37 0 65-25t29-63l0-68q0-26-19-44t-44-19l0-531q0-53-36-89t-88-36l-500 0q-53 0-89 36t-36 89l0 531q-26 0-44 19t-19 44z m63 0l749 0 0 62q0 14-8 23t-23 8l-687 0q-14 0-23-8t-8-23l0-62z m62-594q0-25 19-44t44-19l500 0q25 0 43 19t19 44l0 531-625 0 0-531z m63 31l0 407q0 13 8 22t23 9l62 0q14 0 23-9t9-22l0-407q0-13-9-22t-23-9l-62 0q-14 0-23 9t-8 22z m31 0l62 0 0 407-62 0 0-407z m31 719l375 0 0 31q0 14-9 23t-22 8l-313 0q-13 0-22-8t-9-23l0-31z m125-719l0 407q0 13 9 22t22 9l63 0q13 0 22-9t9-22l0-407q0-13-9-22t-22-9l-63 0q-13 0-22 9t-9 22z m31 0l63 0 0 407-63 0 0-407z m157 0l0 407q0 13 8 22t23 9l62 0q14 0 23-9t9-22l0-407q0-13-9-22t-23-9l-62 0q-14 0-23 9t-8 22z m31 0l62 0 0 407-62 0 0-407z" horiz-adv-x="875" />
 <glyph glyph-name="mail" unicode="&#xe803;" d="m0 28v644q0 8 2 18l460-460q39-39 95-39 55 0 94 39l460 460q2-9 2-18v-644q0-37-26-62t-62-26h-937q-36 0-62 26t-26 62z m63 728q13 4 25 4h937q12 0 25-4l-463-463q-13-12-31-12t-30 12z" horiz-adv-x="1113.3" />
 <glyph glyph-name="help-circled" unicode="&#xe804;" d="m500 82v107q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h107q8 0 13 5t5 13z m143 375q0 49-31 91t-77 65-95 23q-136 0-207-119-9-14 4-24l74-55q4-4 10-4 9 0 14 7 30 38 48 51 19 14 48 14 27 0 48-15t21-33q0-21-11-34t-38-25q-35-16-65-48t-29-70v-20q0-8 5-13t13-5h107q8 0 13 5t5 13q0 10 12 27t30 28q18 10 28 16t25 19 25 27 16 34 7 45z m214-107q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="cancel" unicode="&#xe805;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
 </font>
 </defs>
 </svg>

public/fontello-config.json

@@ -6,6 +6,12 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59397,
+      "src": "fontawesome"
+    },
     {
       "uid": "17ebadd1e3f274ff0205601eef7b9cc4",
       "css": "help-circled",

public/js/lufi-up.js

@@ -84,6 +84,31 @@ function addItem(name, url, size, del_at_first_view, created_at, delay, short, t
     localStorage.setItem('files', JSON.stringify(files));
 }
 
+// Remove a file block
+function destroyBlock(el) {
+    el.parentNode.parentNode.remove();
+
+    var a = document.getElementsByClassName('link-input');
+    if (a.length === 0) {
+        document.getElementById('misc').innerHTML = '';
+        document.getElementById('results').style.display = 'none';
+    } else {
+        updateMailLink();
+    }
+}
+
+// Update the mail link
+function updateMailLink() {
+    var a = document.getElementsByClassName('link-input');
+    var l = new Array();
+    var i;
+    for (i = 0; i < a.length; i++) {
+        l.push(a[i].id);
+    }
+    var u = baseURL+'m?links='+JSON.stringify(l);
+    document.getElementById('mailto').href = u;
+}
+
 // Start uploading the files (called from <input> and from drop zone)
 function handleFiles(f) {
     window.files = f;
@@ -116,7 +141,7 @@ function uploadFile(i, delay, del_at_first_view) {
     var r  = document.getElementById('ul-results');
     var w  = document.createElement('li');
     w.setAttribute('class', 'list-group-item');
-    w.innerHTML='<div></a><p id="name-'+window.fc+'">'+file.name+'</p></div><div class="progress"><div id="progress-'+window.fc+'" style="width: 0%;" data-key="'+randomkey+'" data-name="'+file.name+'" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar"><span class="sr-only">'+file.name+'0%</span></div></div>';
+    w.innerHTML='<div><a href="#" onclick="destroyBlock(this);"><span class="pull-right icon icon-cancel"></span></a><p id="name-'+window.fc+'">'+file.name+'</p></div><div class="progress"><div id="progress-'+window.fc+'" style="width: 0%;" data-key="'+randomkey+'" data-name="'+file.name+'" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar"><span class="sr-only">'+file.name+'0%</span></div></div>';
     r.appendChild(w);
 
     sliceAndUpload(randomkey, i, parts, 0, delay, del_at_first_view, null);
@@ -179,7 +204,6 @@ function updateProgressBar(data) {
     if (j + 1 === parts) {
         var n       = document.getElementById('name-'+window.fc);
         var d       = document.createElement('div');
-        var baseURL = document.location.href.replace(/#$/, '');
         var url     = baseURL+'r/'+short+'#'+key;
         var del_url = baseURL+'d/'+short+'/'+data.token;
         var links   = encodeURIComponent('["'+short+'"]');
@@ -225,14 +249,7 @@ function updateProgressBar(data) {
         if (misc.innerHTML === '') {
             misc.innerHTML = '<a href="#" onclick="copyAllToClipboard();" class="btn btn-info">'+i18n.copyAll+'</a> <a id="mailto" href="'+baseURL+'m?links='+links+'" class="btn btn-info">'+i18n.mailTo+'</a>';
         } else {
-            var a = document.getElementsByClassName('link-input');
-            var l = new Array();
-            var i;
-            for (i = 0; i < a.length; i++) {
-                l.push(a[i].id);
-            }
-            var u = baseURL+'m?links='+JSON.stringify(l);
-            document.getElementById('mailto').href = u;
+            updateMailLink();
         }
 
         // Add the file to localStorage

templates/index.html.ep

@@ -63,8 +63,9 @@
     </div>
 </div>
 %= javascript begin
-var ws_url = '<%= url_for('upload')->to_abs() %>';
-var i18n   = {
+var ws_url  = '<%= url_for('upload')->to_abs() %>';
+var baseURL = '<%= url_for('/')->to_abs() %>';
+var i18n    = {
     confirmExit: '<%= l('You have attempted to leave this page. The upload will be canceled. Are you sure?') %>',
     copyAll:     '<%= l('Copy all links to clipboard') %>',
     cpText:      '<%= l('Copy to clipboard') %>',