Updated for Transfer.sh v1.3.0

Gruntfile.js

@@ -242,8 +242,15 @@ module.exports = function (grunt) {
             }
         },
         'npm-command': {
+            'videojs-update': {
+                options: {
+                    cmd: 'update',
+                    cwd: '<%= yeoman.app %>/bower_components/videojs/'
+                }
+            },
             'videojs-install': {
                 options: {
+                    cmd: 'install',
                     cwd: '<%= yeoman.app %>/bower_components/videojs/'
                 }
             },

README.md

@@ -2,6 +2,7 @@
 
 This repository contains the  web frontend for [transfer.sh](https://github.com/dutchcoders/transfer.sh/) modified by Brammp.
 
+For Transfer.sh v1.3.0 (fork of transfer.sh-web commit: b55eddc4e6574ae9dd406b2c9024fd7a2be47eac)
 
 ## Atatch to transfer.sh 
 ### Pre-build
@@ -13,7 +14,7 @@ docker run -d -v /folder:/uploads -v /root/<extactionfolder>:/webapp --publish 5
 ```
 Go Prebuild Sample :
 ```
-./transfersh-v1.1.7-linux-amd64 --provider=local --listener :8080 --temp-path=/tmp/ --basedir=/tmp/ --web-path /root/<extactionfolder>
+./transfersh-<version>-linux-amd64 --provider=local --listener :8080 --temp-path=/tmp/ --basedir=/tmp/ --web-path /root/<extactionfolder>
 ```
 
 ### Manual build
@@ -35,6 +36,14 @@ Go Prebuild Sample :
 * Bower
 * Go & go-bindata (go get -u github.com/shuLhan/go-bindata/...)
 
+### Setup enviroment on debian
+```
+apt install -y git curl nodejs npm golang
+npm install -g npm-run-all grunt bower
+go get -u github.com/shuLhan/go-bindata/...
+export PATH=$PATH:$(go env GOPATH)/bin
+```
+
 ### Initialization
 
 ```

bower.json

@@ -13,7 +13,7 @@
     "tests"
   ],
   "dependencies": {
-    "videojs": "~7.4.2",
+    "videojs": "~7.13.3",
     "bootstrap": "~3.0.0",
     "modernizr": "~2.6.2",
     "uri.js": "~1.14.1",

go.mod

@@ -0,0 +1,5 @@
+module github.com/dutchcoders/transfer.sh-web
+
+go 1.15
+
+require github.com/shuLhan/go-bindata v4.0.0+incompatible // indirect

go.sum

@@ -0,0 +1,2 @@
+github.com/shuLhan/go-bindata v4.0.0+incompatible h1:xD8LkuVZLV5OOn/IEuFdt6EEAW7deWiqgwaaSGhjAJc=
+github.com/shuLhan/go-bindata v4.0.0+incompatible/go.mod h1:pkcPAATLBDD2+SpAPnX5vEM90F7fcwHCvvLCMXcmw3g=

package.json

@@ -5,12 +5,12 @@
     "wiredep": "^4.0.0"
   },
   "devDependencies": {
-    "grunt": "^1.0.4",
+    "grunt": ">=1.0.0",
     "grunt-concurrent": "~1.0.0",
-    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-clean": "^2.0.0",
     "grunt-contrib-concat": "~0.5.0",
     "grunt-contrib-connect": "^2.0.0",
-    "grunt-contrib-copy": "~0.6.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-cssmin": "^3.0.0",
     "grunt-contrib-htmlmin": "^3.0.0",
     "grunt-contrib-imagemin": "^3.1.0",
@@ -18,8 +18,8 @@
     "grunt-contrib-less": "^2.0.0",
     "grunt-contrib-uglify": "^4.0.1",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-include-replace": "^2.0.0",
+    "grunt-include-replace": "^5.0.0",
-    "grunt-includes": "^0.4.5",
+    "grunt-includes": "^1.1.0",
     "grunt-npm-command": "^0.1.2",
     "grunt-rev": "~0.1.0",
     "grunt-svgmin": "^6.0.0",
@@ -30,6 +30,6 @@
     "time-grunt": "~1.0.0"
   },
   "engines": {
-    "node": ">=0.8.0"
+    "node": "^10.22.1"
   }
 }

src/download.audio.html

@@ -20,6 +20,7 @@ include "includes/download-navigation.html"
 
         include "includes/download-top.html"
 
+        <br>
         <div class="row animated fadeInDown">
             <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
                 <div class="terminal-top">
@@ -37,6 +38,10 @@ include "includes/download-navigation.html"
             </div>
         </div>
         <br/>
+
+        include "includes/download-delete.html"
+
+        <br/>
     </div>
 
 </section>

src/download.html

@@ -17,6 +17,10 @@ include "includes/download-navigation.html"
     <div class="wrapper">
 
         include "includes/download-top.html"
+        <br/>
+
+        include "includes/download-delete.html"
+        <br/>
     </div>
 </section>
 

src/download.image.html

@@ -17,6 +17,7 @@ include "includes/download-navigation.html"
 
         include "includes/download-top.html"
 
+        <br>
         <div class="row animated fadeInDown">
             <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
                 <div class="terminal-top">
@@ -28,8 +29,11 @@ include "includes/download-navigation.html"
             </div>
         </div>
         <br/>
-        <div>
+
-            <div>
+        include "includes/download-delete.html"
+
+        <br/>
+    </div>
 </section>
 
 include "includes/download-footer.html"

src/download.markdown.html

@@ -17,6 +17,7 @@ include "includes/download-navigation.html"
 
         include "includes/download-top.html"
 
+        <br>
         <div class="row animated fadeInDown">
             <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
                 <div class="terminal-top">
@@ -28,6 +29,10 @@ include "includes/download-navigation.html"
         </div>
         <br/>
 
+        include "includes/download-delete.html"
+
+        <br/>
+    </div>
 </section>
 
 

src/download.sandbox.html

@@ -19,6 +19,10 @@ include "includes/download-navigation.html"
 
         <br/>
 
+        include "includes/download-delete.html"
+
+        <br/>
+    </div>
 </section>
 
 

src/download.video.html

@@ -18,6 +18,7 @@ include "includes/download-navigation.html"
 
         include "includes/download-top.html"
 
+        <br>
         <div class="row animated fadeInDown">
             <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
                 <div class="terminal-top">
@@ -35,6 +36,10 @@ include "includes/download-navigation.html"
             </div>
         </div>
         <br/>
+
+        include "includes/download-delete.html"
+
+        <br/>
     </div>
 
 </section>

src/includes/download-delete.html

@@ -0,0 +1,13 @@
+<a href="{{.Url}}" id="fire-delete" class="btn-cta btn"> delete</i> </a> <br/><br/>
+<div class="delete-modal row animated fadeInDown hide">
+  <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
+    <div class="terminal-top">
+    </div>
+    <div class="terminal">
+      <div id="web" class="DeleteTerm">
+        <input type="text" id="deletion-token" value="" placeholder="Please enter the deletion token">
+        <a href="#" id="confirm-delete" class="btn-cta btn"> confirm</i> </a> <br/><br/>
+      </div>
+    </div>
+  </div>
+</div>

src/includes/download-footer.html

@@ -1,14 +1,27 @@
 <footer>
-    <div class="wrapper">
+  <div class="wrapper">
-                <br/>
+              <br/>
-        <img src="../images/Logo-orange.png" alt="Founded in Holland">
+      <img src="../images/Logo-orange.png" alt="Founded in Holland">
-        <p>A instance of transfer.sh<br>
+      <p>A instance of transfer.sh<br>
-          Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
+        Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
-        </p>
+      </p>
-    </div>
+  </div>
 
 </footer>
 
+    <script>
+    (function() {
+      var userVoiceKey = "{{.UserVoiceKey}}";
+      if (userVoiceKey != "") {
+        var uv = document.createElement('script');
+        uv.type = 'text/javascript';
+        uv.async = true;
+        uv.src = '//widget.uservoice.com/{{.UserVoiceKey}}.js';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(uv, s)
+      }
+    })()
+    </script>
 
     <!--[if lt IE 7]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

src/includes/download-navigation.html

@@ -1,8 +1,8 @@
-    <div id="navigation">
+<div id="navigation">
-        <div class="wrapper">
+    <div class="wrapper">
-            <a href="{{.WebAddress}}">
+        <a href="{{.WebAddress}}">
-                <img class="navimg" src="../images/HeadImg.png" alt="Brammp's Transfer.sh service">
+            <img class="navimg" src="/images/HeadImg.png" alt="Transfer.sh service">
-                <h1>{{.Hostname}}</h1>
+            <h1>transfer.sh@{{.Hostname}}</h1>
-            </a>
+        </a>
-        </div>
+    </div>
-    </div>
+</div>

src/includes/download-top.html

@@ -3,8 +3,7 @@
         <h4>type: <b>{{.ContentType}}</b></h4>
         <h4>size: <b>{{.ContentLength | format "#,###."}}</b> bytes</h4>
 
-        <a href="{{.UrlGet}}" class="btn-cta btn download-btn"> Download</i> </a> <br/><br/>
+        <a href="{{.UrlGet}}" class="btn-cta btn"> download</i> </a> <br/><br/>
         <div class="qrcode">
                 <img src="data:image/png;base64,{{.QRCode}}"/>
-        </div>
+        </div>
-        <br>

src/includes/footer.html

@@ -1,18 +1,15 @@
 <footer>
-    <div class="wrapper">
+  <div class="wrapper">
-                <br/>
+              <br/>
-        <img src="images/Logo-orange.png" alt="Founded in Holland">
+      <img src="../images/Logo-orange.png" alt="Founded in Holland">
-        <p>A instance of transfer.sh<br>
+      <p>A instance of transfer.sh<br>
-          Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
+        Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
-        </p>
+      </p>
-    </div>
+  </div>
 
 </footer>
 
 
-    <!--[if lt IE 7]>
+  <!--[if lt IE 7]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-    <![endif]-->
+  <![endif]-->
-
-   
-  

src/includes/ga.html

@@ -1,18 +0,0 @@
-    <script>
-      var gaKey = "{{.GAKey}}";
-      if (gaKey != "") {
-        (function(i, s, o, g, r, a, m) {
-          i['GoogleAnalyticsObject'] = r;
-          i[r] = i[r] || function() {
-            (i[r].q = i[r].q || []).push(arguments)
-          }, i[r].l = 1 * new Date();
-          a = s.createElement(o),
-            m = s.getElementsByTagName(o)[0];
-          a.async = 1;
-          a.src = g;
-          m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-        ga('create', gaKey, 'transfer.sh');
-        ga('send', 'pageview');
-      }
-    </script>

src/includes/navigation.html

@@ -1,8 +1,8 @@
-    <div id="navigation">
+<div id="navigation">
-        <div class="wrapper">
+    <div class="wrapper">
-            <a href="{{.WebAddress}}">
+        <a href="{{.WebAddress}}">
-                <img class="navimg" src="./images/HeadImg.png" alt="Brammp's Transfer.sh service">
+            <img class="navimg" src="/images/HeadImg.png" alt="Transfer.sh service">
-                <h1>transfer.sh@{{.Hostname}}</h1>
+            <h1>transfer.sh@{{.Hostname}}</h1>
-            </a>
+        </a>
-        </div>
+    </div>
-    </div>
+</div>

src/index.html

@@ -11,6 +11,25 @@ include "includes/head.html"
 
 <body>
 
+<script>
+    var gaKey = "{{.GAKey}}";
+    if (gaKey != "") {
+        (function (i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r;
+            i[r] = i[r] || function () {
+                (i[r].q = i[r].q || []).push(arguments)
+            }, i[r].l = 1 * new Date();
+            a = s.createElement(o),
+                    m = s.getElementsByTagName(o)[0];
+            a.async = 1;
+            a.src = g;
+            m.parentNode.insertBefore(a, m)
+        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+        ga('create', gaKey, 'transfer.sh');
+        ga('send', 'pageview');
+    }
+</script>
+
 include "includes/navigation.html"
 
 <section id="home">
@@ -24,11 +43,11 @@ include "includes/navigation.html"
                 </div>
                 <div id="terminal" class="terminal">
                     <code class="code-wrapper"><span class="code-title"># Upload using cURL</span>
-                        $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt {{.WebAddress}}66nb8/hello.txt
+                        $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt {{.WebAddress}}{{.SampleToken}}/hello.txt
 
                         <span class="code-title"># Using the shell function</span>
                         $ transfer hello.txt
-                        ##################################################### 100.0% {{.WebAddress}}eibhM/hello.txt
+                        ##################################################### 100.0% {{.WebAddress}}{{.SampleToken2}}/hello.txt
                     </code>
                 </div>
                 <div id="web">
@@ -54,7 +73,7 @@ include "includes/navigation.html"
             </div>
 
             <div>
-                <a href="#features" class="btn-cta btn-home">Learn more</i> </a>
+                <a href="#features" class="btn-cta btn-home">learn more</i> </a>
             </div>
         </div>
 </section>
@@ -72,6 +91,24 @@ include "includes/navigation.html"
                 <i class="icon-link"></i>
                 <h3>Share files with a URL</h3>
             </div>
+            <div class="col-md-3 col-xs-6">
+                <i class="icon-database"></i>
+                {{ if .MaxUploadSize }}
+                <h3>Upload up to {{ .MaxUploadSize }}</h3>
+                {{ else }}
+                <h3>Unlimited upload</h3>
+                {{ end }}
+            </div>
+            <div class="col-md-3 col-xs-6">
+                <i class="icon-clock"></i>
+                {{ if .PurgeTime }}
+                <h3>Files stored for {{ .PurgeTime }}</h3>
+                {{ else }}
+                <h3>Files stored forever</h3>
+                {{ end }}
+            </div>
+        </div>
+        <div class="row  animated fadeInDown">
             <div class="col-md-3 col-xs-6">
                 <i class="icon-lock"></i>
                 <h3>Encrypt your files</h3>
@@ -105,13 +142,13 @@ include "includes/navigation.html"
                 <div class="terminal">
                     <code class="code-wrapper"><span class="code-title"># Uploading is easy using curl</span>
                         $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt
-                    {{.WebAddress}}66nb8/hello.txt
+                    {{.WebAddress}}{{.SampleToken}}/hello.txt
 
                         $ curl -H "Max-Downloads: 1" -H "Max-Days: 5" --upload-file ./hello.txt {{.WebAddress}}hello.txt
-                    {{.WebAddress}}66nb8/hello.txt
+                    {{.WebAddress}}{{.SampleToken}}/hello.txt
 
                         <span class="code-title"># Download the file</span>
-                        $ curl {{.WebAddress}}66nb8/hello.txt -o hello.txt
+                        $ curl {{.WebAddress}}{{.SampleToken}}/hello.txt -o hello.txt
                     </code>
                 </div>
             </div>
@@ -144,15 +181,15 @@ include "includes/navigation.html"
                             $ curl -i -F filedata=@/tmp/hello.txt -F filedata=@/tmp/hello2.txt {{.WebAddress}}
 
                             <span class="code-title"># Combining downloads as zip or tar archive</span>
-                            $ curl {{.WebAddress}}(15HKz/hello.txt,15HKz/hello.txt).tar.gz
+                            $ curl {{.WebAddress}}({{.SampleToken}}/hello.txt,{{.SampleToken2}}/world.txt).tar.gz
-                            $ curl {{.WebAddress}}(15HKz/hello.txt,15HKz/hello.txt).zip
+                            $ curl {{.WebAddress}}({{.SampleToken}}/hello.txt,{{.SampleToken2}}/world.txt).zip
                         </code>
                     </div>
 
 
                 </div>
                 <div class="col-md-6 ">
-                    <h3>Encrypt your files before the transfer</h3>
+                    <h3>Encrypt your files with gpg before the transfer</h3>
                     <div class="terminal-top">
                     </div>
                     <div class="terminal">
@@ -160,7 +197,7 @@ include "includes/navigation.html"
                             $ cat /tmp/hello.txt|gpg -ac -o-|curl -X PUT --upload-file "-" {{.WebAddress}}test.txt
 
                             <span class="code-title"># Download and decrypt</span>
-                            $ curl {{.WebAddress}}1lDau/test.txt|gpg -o- > /tmp/hello.txt
+                            $ curl {{.WebAddress}}{{.SampleToken}}/test.txt|gpg -o- > /tmp/hello.txt
                         </code>
                     </div>
                 </div>
@@ -212,7 +249,7 @@ include "includes/navigation.html"
                             <span class="code-title"># Encrypt for recipient(s)</span>
                             $ cat somebackupfile.tar.gz | keybase encrypt [them] | curl --upload-file '-' {{.WebAddress}}test.txt
                             <span class="code-title"># Decrypt</span>
-                            $ curl {{.WebAddress}}sqUFi/test.md |keybase decrypt
+                            $ curl {{.WebAddress}}{{.SampleToken}}/test.md |keybase decrypt
                         </code>
                     </div>
                 </div>
@@ -262,6 +299,81 @@ include "includes/navigation.html"
                     </div>
                 </div>
             </div>
+            
+            <div class="row">
+                <div class="col-md-6">
+                    <h3>Upload a file using Unofficially client in Python</h3>
+                    <div class="terminal-top">
+                    </div>
+                    <div class="terminal">
+                        <code class="code-wrapper">
+                            <span class="code-title"># transfersh-cli (https://github.com/tanrax/transfersh-cli)</span>
+                            $ transfersh photos.zip
+                            <span class="code-title"># Uploading file</span>
+                            <span class="code-title"># Download from here: {{.WebAddress}}{{.SampleToken}}/photos.zip</span>
+                            <span class="code-title"># It has also been copied to the clipboard!</span>
+                        </code>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <h3>Encrypt your files with openssl before the transfer</h3>
+                    <div class="terminal-top">
+                    </div>
+                    <div class="terminal">
+                        <code class="code-wrapper"><span class="code-title"># Encrypt files with password using openssl</span>
+                            $ cat /tmp/hello.txt|openssl aes-256-cbc -pbkdf2 -e|curl -X PUT --upload-file "-" {{.WebAddress}}test.txt
+
+                            <span class="code-title"># Download and decrypt</span>
+                            $ curl {{.WebAddress}}{{.SampleToken}}/test.txt|openssl aes-256-cbc -pbkdf2 -d > /tmp/hello.txt
+                        </code>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="row">
+                <div class="col-md-6">
+                    <h3>Upload a file or directory in Windows</h3>
+                    <div class="terminal-top">
+                    </div>
+                    <div class="terminal">
+                        <code class="code-wrapper"><span class="code-title">#Save this as transfer.cmd in Windows 10 (which has curl.exe)</span>
+@echo off
+setlocal EnableDelayedExpansion EnableExtensions
+goto main
+:usage
+  echo No arguments specified. &gt;&amp;2
+  echo Usage: &gt;&amp;2
+  echo   transfer ^&lt;file^|directory^&gt; &gt;&amp;2        
+  echo   ... ^| transfer ^&lt;file_name^&gt; &gt;&amp;2       
+  exit /b 1
+:main
+  if "%~1" == "" goto usage
+  timeout.exe /t 0 &gt;nul 2&gt;nul || goto not_tty
+  set "file=%~1"
+  for %%A in ("%file%") do set "file_name=%%~nxA"
+  if exist "%file_name%" goto file_exists
+    echo %file%: No such file or directory &gt;&amp;2
+    exit /b 1
+:file_exists
+  if not exist "%file%\" goto not_a_directory
+  set "file_name=%file_name%.zip"
+  pushd "%file%" || exit /b 1
+  set "full_name=%temp%\%file_name%"
+  powershell.exe -Command "Get-ChildItem -Path . -Recurse | Compress-Archive -DestinationPath ""%full_name%"""
+  curl.exe --progress-bar --upload-file "%full_name%" "{{.WebAddress}}%file_name%"
+  popd
+  goto :eof
+:not_a_directory
+  curl.exe --progress-bar --upload-file "%file%" "{{.WebAddress}}%file_name%"
+  goto :eof
+:not_tty
+  set "file_name=%~1"
+  curl.exe --progress-bar --upload-file - "{{.WebAddress}}%file_name%"
+  goto :eof
+                        </code>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </section>

src/index.txt

@@ -5,11 +5,17 @@ made with <3 by DutchCoders
 Upload:
 $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt
 
-Encrypt & upload:
+Encrypt with gpg & upload:
 $ cat /tmp/hello.txt|gpg -ac -o-|curl -X PUT --upload-file "-" {{.WebAddress}}test.txt
 
-Download & decrypt:
+Download & decrypt with gpg:
-$ curl {{.WebAddress}}1lDau/test.txt|gpg -o- > /tmp/hello.txt
+$ curl {{.WebAddress}}{{.SampleToken}}/test.txt|gpg -o- > /tmp/hello.txt
+
+Encrypt with openssl & upload:
+$ cat /tmp/hello.txt|openssl aes-256-cbc -pbkdf2 -e|curl -X PUT --upload-file "-" {{.WebAddress}}test.txt
+
+Download & decrypt with openssl:
+$ curl {{.WebAddress}}{{.SampleToken}}/test.txt|openssl aes-256-cbc -pbkdf2 -d > /tmp/hello.txt
 
 Grep pound from syslog and transfer
 cat /var/log/syslog|grep pound|curl --upload-file - {{.WebAddress}}pound.log
@@ -22,7 +28,7 @@ $ keybase track [them]
 $ cat somebackupfile.tar.gz | keybase encrypt [them] | curl --upload-file '-' {{.WebAddress}}test.txt
 
 # decrypt
-$ curl {{.WebAddress}}sqUFi/test.md |keybase decrypt
+$ curl {{.WebAddress}}{{.SampleToken}}/test.md |keybase decrypt
 
 Upload to Virustotal:
 $ curl -X PUT --upload-file nhgbhhj {{.WebAddress}}test.txt/virustotal

src/scripts/base.js

@@ -30,10 +30,45 @@ $(document).ready(function() {
         return 'There are still ' + queue.length + ' files being uploaded.';
     });
 
+    function deleteFile(baseURL) {
+        var deleteModal = $('.delete-modal');
+        if (deleteModal.hasClass('show')) {
+            deleteModal.removeClass('show');
+        } else {
+            deleteModal.addClass('show');
+        }
+
+        deleteModal.find('input[placeholder]').each(function () {
+            $(this).attr('size', $(this).attr('placeholder').length);
+        });
+
+        $('#confirm-delete').on('click', function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            var deletionToken = $('#deletion-token').val();
+            if (deletionToken.length > 0) {
+                var xhr = new XMLHttpRequest();
+                xhr.onreadystatechange = function() {
+                    if (xhr.readyState === 4) {
+                        if (xhr.status === 200) {
+                            deleteModal.find('#web').html('<span style="clear:both">File deleted</span></div>');
+                        } else {
+                            deleteModal.find('#web').append('<span>Error (' + xhr.status + ') during deletion of file</span>');
+                        }
+                    }
+                };
+
+                // start deletion
+                xhr.open('DELETE', baseURL + '/' + deletionToken, true);
+                xhr.send();
+            }
+        });
+    }
+
     function upload(file) {
         $('.browse').addClass('uploading');
 
-        var li = $('<li style="clear:both;"/>');
+        var li = $('<li style="clear:both;"/><br/><br/>');
 
         li.append($('<div><div class="upload-progress"><span></span><div class="bar" style="width:0%;">####################################################</div></div><p>Uploading... ' + file.name + '</p></div>'));
         $(li).appendTo($('.queue'));
@@ -44,19 +79,20 @@ $(document).ready(function() {
             var pc = parseInt((e.loaded / e.total * 100));
             $('.upload-progress', $(li)).show();
             $('.upload-progress .bar', $(li)).css('width', pc + '%');
-            $('.upload-progress span  ', $(li)).empty().append(pc + '%');
+            $('.upload-progress span', $(li)).empty().append(pc + '%');
 
         }, false);
 
         xhr.onreadystatechange = function() {
             if (xhr.readyState === 4) {
-                /*            $('.upload-progress', $(li)).hide();*/
                 $('#web').addClass('uploading');
-                // progress.className = (xhr.status == 200 ? "success" : "failure");
                 if (xhr.status === 200) {
-                    $(li).html('<a target="_blank" href="' + xhr.responseText + '">' + xhr.responseText + '</a>');
+                    var deletionToken = xhr.getResponseHeader('X-Url-Delete').split('/').pop();
+                    var url = $('<p></p>').text(xhr.responseText).html();
+                    $(li).html('<a target="_blank" href="' + url + '">' + url + '</a><br/><br/>' +
+                        '<span class="code-title"># Deletion token</span><br/>' + deletionToken + '<hr/>');
                 } else {
-                    $(li).html('<span>Error (' + xhr.status + ') during upload of file ' + file.name + '</span>');
+                    $(li).html('<span>Error (' + xhr.status + ') during upload of file ' + file.name + '</span><hr/>');
                 }
 
                 // file uploaded successfully, remove from queue
@@ -65,7 +101,7 @@ $(document).ready(function() {
                     queue.splice(index, 1);
                 }
 
-                files.push(URI(xhr.responseText.replace('\n', '')).path());
+                files.push(URI($('<p></p>').text(xhr.responseText.replace('\n', '')).html()).path());
 
                 $('.download-zip').attr('href', URI('(' + files.join(',') + ').zip').absoluteTo(location.href).toString());
                 $('.download-tar').attr('href', URI('(' + files.join(',') + ').tar.gz').absoluteTo(location.href).toString());
@@ -87,8 +123,11 @@ $(document).ready(function() {
     }).bind('dragover', function(event) {
         event.preventDefault();
         // show drop indicator
-
+        $('#terminal').addClass('dragged');
+        $('#web').addClass('dragged');
     }).bind('dragleave', function() {
+        $('#terminal').removeClass('dragged');
+        $('#web').removeClass('dragged');
 
     }).bind('drop dragdrop', function(event) {
         var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
@@ -115,6 +154,12 @@ $(document).ready(function() {
         });
     });
 
+    $('a#fire-delete').on('click', function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        deleteFile($(this).attr('href'));
+    });
+
     // clipboard
     if (window.location.href.indexOf('download') > -1 ) {
 

src/scripts/mainbk.js

@@ -2,7 +2,7 @@ $(document).ready(function () {
 
     // Terminal typing animation
     $("#from-terminal p").typed({
-        strings: ["curl --upload-file ./hello.txt {{.WebAddress}}hello.txt\n{{.WebAddress}}66nb8/hello.txt \n "],
+        strings: ["curl --upload-file ./hello.txt {{.WebAddress}}hello.txt\n{{.WebAddress}}{{.SampleToken}}/hello.txt \n "],
         typeSpeed: 0,
         loop: true,
     });

src/styles/config.less

@@ -6,16 +6,10 @@
 @dark-gray: #3b3b3b;
 @dark-blue: #1e70bf;
 @white: #fff;
-
 @term: #000;
-
 @navbar-default-bg:    #fff;
-
-
 @text-color: @light-blue;
 @link-color: @dark-blue;
-
-
 @progress-bg:    @light-gray;
 
 // Typography

src/styles/custom.less

@@ -0,0 +1,13 @@
+.DeleteTerm {
+    margin: auto !important;
+    padding-left: 15% !important;
+    border: 3px;
+}
+input#deletion-token::placeholder {
+    color: white !important;
+}
+
+input#deletion-token {
+    background: black !important;
+    color: white !important;
+}

src/styles/main.css

@@ -6667,4 +6667,16 @@ audio {
   -webkit-appearance: none;
   background: red;
 }
+.DeleteTerm {
+  margin: auto !important;
+  padding-left: 15% !important;
+  border: 3px;
+}
+input#deletion-token::placeholder {
+  color: white !important;
+}
+input#deletion-token {
+  background: black !important;
+  color: white !important;
+}
 /*# sourceMappingURL=styles/main.css.map */

src/styles/main.less

@@ -12,5 +12,4 @@
 @import "includes/video-js";
 @import "includes/transfersh-icons";
 @import "includes/preview";
-
+@import "custom";
-