Updated for Transfer.sh v1.4.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/404.html

@@ -147,10 +147,6 @@
         <li>a mistyped address</li>
         <li>an out-of-date link</li>
     </ul>
-    <script>
-        var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
-    </script>
-    <script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
 </div>
 </body>
 </html>

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">
@@ -31,12 +32,16 @@ include "includes/download-navigation.html"
                            controls
                            preload="auto"
                            data-setup='{}'>
-                        <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        <source src="{{.URL}}" type="{{.ContentType}}"></source>
                     </audio>
                 </div>
             </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,19 +17,23 @@ 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">
 
                 </div>
                 <div id="terminal" class="terminal preview-image">
-                    <img src="{{.Url}}"  alt="">
+                    <img src="{{.URL}}"  alt="">
                 </div>
             </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">
@@ -29,12 +30,16 @@ include "includes/download-navigation.html"
                            controls
                            preload="auto"
                            data-setup='{}'>
-                        <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        <source src="{{.URL}}" type="{{.ContentType}}"></source>
                     </video>
                 </div>
             </div>
         </div>
         <br/>
+
+        include "includes/download-delete.html"
+
+        <br/>
     </div>
 
 </section>

src/includes/download-delete.html

@@ -0,0 +1,14 @@
+<a href="{{.URL}}" id="fire-delete" class="btn-cta btn"> delete</i> </a> <br/><br/>
+<div class="delete-modal row animated fadeInDown">
+  <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">
+        <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 id="error"></div>
+    </div>
+  </div>
+</div>

src/includes/download-footer.html

@@ -1,15 +1,13 @@
 <footer>
-    <div class="wrapper">
+  <div class="wrapper">
-                <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]>
       <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]-->

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,13 @@
 <footer>
-    <div class="wrapper">
-                <br/>
         <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

@@ -24,11 +24,13 @@ 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 +56,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 +74,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 +125,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 +164,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 +180,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 +232,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 +282,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,46 @@ $(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>');
+                            deleteModal.find('#error').html('')
+                        } else {
+                            deleteModal.find('#error').html('<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 +80,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 +102,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 +124,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 +155,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

@@ -1,22 +1,20 @@
 // Colors
 
+@blue: #1e70bf;
 @light-gray:#4c505c;
 @light-blue: #86acd1;
+@dark-blue: #fff;
+@term: #000;
 @red: #e96e57;
 @dark-gray: #3b3b3b;
-@dark-blue: #1e70bf;
 @white: #fff;
-
 @term: #000;
 
-@navbar-default-bg:    #fff;
+@navbar-default-bg:#383c49;
-
+@page-default-bg:#383c49;
-
+@text-color:  @light-blue;
-@text-color: @light-blue;
+@link-color:  @blue;
-@link-color: @dark-blue;
+@progress-bg: @light-gray;
-
-
-@progress-bg:    @light-gray;
 
 // Typography
 @font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

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/includes/contact.less

@@ -2,14 +2,14 @@
     text-align: center;
     i {
         font-size: 160px;
-        color: @light-gray;
+        color: @blue;
     }
     padding: 100px 0;
 }
 
 #share {
     text-align:center;
-    background: @dark-blue;
+    background: @blue;
     color: #fff;
     i {
         font-size: 50px;
@@ -28,11 +28,10 @@
 
 footer {
     text-align: center;
-    background: @light-blue;
+    background: @dark-blue;
     padding: 30px 0;
     p {
         margin: 0;
-        color: @white;
     }
     i {
         color: @red;
@@ -46,7 +45,7 @@ footer {
     background: @dark-gray;
     text-align: center;
     i {
-        color: @light-gray;
+        color: @blue;
         font-size: 160px;
     }
     padding: 40px 0;
@@ -59,7 +58,7 @@ footer {
     code {
         display:block;
         padding: 20px;
-        background: @dark-gray;
+        background: @light-gray;
         font-family: @font-family-mono;
     }
 }

src/styles/includes/global.less

@@ -1,7 +1,7 @@
 body {
     max-width: 100%;
     margin: 0 auto;
-    background-color: #383c49;
+    background-color: @page-default-bg;
 }
 
 .browsehappy {
@@ -16,7 +16,7 @@ body {
     ul {
         list-style: none;
         max-width: 400px;
-       // marghomein: 0 auto;
+        marghomein: 0 auto;
     }
     li {
         display: inline-block;
@@ -26,13 +26,13 @@ body {
         text-align: center;
         font-family: @font-family-mono;
         margin-bottom: 15px;
-        color: @light-blue;
+        color: @dark-blue;
         font-size: 35px;
     }
     a {
         text-decoration: none;
         font-size: 15px;
-        color: @dark-blue;
+        color: @dark-gray;
     }
 }
 
@@ -48,9 +48,9 @@ body {
 .btn-cta {
     .transition(all @animation-duration);
     padding: 10px 50px;
-    border: 2px solid @light-blue;
+    border: 2px solid @red;
     font-size: 20px;
-    color: @light-blue;
+    color: @red;
     border-radius: 10px;
     display: inline-block;
     text-decoration: none;
@@ -59,16 +59,6 @@ body {
         border-color: @dark-blue;
         color: @dark-blue;
     }
-    &:focus {
-        text-decoration: none;
-        border-color: @dark-blue;
-        color: @dark-blue;
-    }
-}
-
-.download-btn {
-    color: @red;
-    border-color: @red;
 }
 
 .wrapper {
@@ -77,6 +67,10 @@ body {
     .container;
 }
 
+section {
+   // padding: 50px 0
+}
+
 img {
     max-width: 100%;
     margin: 0 auto;
@@ -84,7 +78,7 @@ img {
 
 a {
     text-decoration: underline;
-    color: @light-blue;
+    color: @dark-blue;
     &:hover {
         text-decoration: none;
         color: inherit;

src/styles/includes/home.less

@@ -14,6 +14,14 @@
     .btn-home {
         margin: 50px 0 25px 0;
     }
+    hr {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        margin-right: 20px;
+        border: 0;
+        border-top: 1px solid #eeeeee;
+        height: 0;
+    }
 }
 
 
@@ -65,6 +73,9 @@
     }
       .border-bottom-radius (5px);
 
+}
+ .dragged {
+        background: lighten(@term, 40%)!important;
 }
 
 .terminal {
@@ -76,8 +87,7 @@
 
     .border-bottom-radius (5px);
     background: @term;
- //   background: url(../images/terminal.svg);
+    backbground-repeat: no-repeat;
- //   backbground-repeat: no-repeat;
     background-size: cover;
 }
 
@@ -133,8 +143,8 @@
     h3 {color: #fff;
         font-size: 25px;
     }
-    background: @light-gray;
+    background: @blue;
     .btn-cta {
-        border-color: @light-blue;
+        border-color: @dark-blue;
     }
 }

src/styles/includes/pages.less

@@ -11,7 +11,7 @@
         font-size: 18px
     }
     i {
-        color: @dark-blue;
+        color: @blue;
         font-size: 100px;
     }
     padding:100px 0;
@@ -39,7 +39,7 @@
 
 #share {
     text-align:center;
-    background: @dark-blue;
+    background: @blue;
     color: #fff;
     i {
         font-size: 50px;
@@ -74,7 +74,7 @@
         margin: 0 auto;
         margin-bottom: 10px;
     }
-    background: @dark-gray;
+    background: @light-gray;
     padding: 50px 0;
     a {
         font-size: 20px;
@@ -107,7 +107,7 @@ footer {
     text-align: center;
     i {
         font-size: 160px;
-        color: @light-gray;
+        color: @blue;
     }
     padding:100px 0;
     @media (min-width: @screen-sm-min) {

src/styles/includes/preview.less

@@ -1,3 +1,12 @@
+.delete-modal {
+  display: none;
+}
+
+.delete-modal .show {
+  display: block;
+}
+
+
 .preview-wrapper {
     padding-bottom: 30px;
 }
@@ -62,7 +71,7 @@ padding: 0px;
   width: 50%;
   max-width: 500px;
   min-width: 300px;
-  background-color: @light-gray;
+  background-color: @blue;
   border-radius: 2px;
   transform: translateX(-50%) translateY(-50%);
   opacity: 0;
@@ -82,7 +91,7 @@ padding: 0px;
 		color: #fff;
 	}
   input {
-    background-color: @dark-gray;
+    background-color: @light-gray;
     color: @text-color;
     border: 0;
     font-size: 1em;

src/styles/includes/reviews.less

@@ -1,5 +1,5 @@
 #reviews {
-    background: @dark-gray;
+    background: @light-gray;
     padding: 130px 0;
     .twitter-profile {
         float: left;

src/styles/includes/video-js.less

@@ -23,10 +23,10 @@
 // The default color of control backgrounds is mostly black but with a little
 // bit of blue so it can still be seen on all-black video frames, which are common.
 // Try changing to #900
-@primary-background-color: @light-gray;  // #2B333F default
+@primary-background-color: @blue;  // #2B333F default
 @red-primary-background-color: red(@primary-background-color);
 @green-primary-background-color: green(@primary-background-color);
-@light-gray-primary-background-color: blue(@primary-background-color);
+@blue-primary-background-color: blue(@primary-background-color);
 
 // Try changing to true
 @center-big-play-button: true; // true default
@@ -91,20 +91,20 @@
   /* IE8 - has no alpha support */
   background-color: @primary-background-color;
   /* Opacity: 1.0 = 100%, 0.0 = 0% */
-  background-color: rgba(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color, 0.7);
+  background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
 }
 
 // Make a slightly lighter version of the main background
 // for the slider background.
-@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color), 33%);
+@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
 @red-slider-bg-color: red(@slider-bg-color);
 @green-slider-bg-color: green(@slider-bg-color);
-@light-gray-slider-bg-color: blue(@slider-bg-color);
+@blue-slider-bg-color: blue(@slider-bg-color);
 
 /* Slider - used for Volume bar and Progress bar */
 .video-js .vjs-slider {
   background-color: @slider-bg-color;
-  background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
+  background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
 }
 
 /* The slider bar color is used for the progress bar and the volume bar
@@ -118,18 +118,18 @@
 /* The main progress bar also has a bar that shows how much has been loaded. */
 .video-js .vjs-load-progress {
   /* For IE8 we'll lighten the color */
-  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 25%);
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
 }
 
 /* The load progress bar also has internal divs that represent
    smaller disconnected loaded time ranges */
 .video-js .vjs-load-progress div {
   /* For IE8 we'll lighten the color */
-  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 50%);
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.75);
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
 }
 
 

src/styles/main.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
-@import "../bower_components/videojs/dist/video-js.min.css";
+@import "../bower_components/videojs/dist/video-js.css";
 article,
 aside,
 details,
@@ -5949,7 +5949,6 @@ body {
   animation-name: wobble;
 }
 body {
-  max-width: 100%;
   margin: 0 auto;
   background-color: #383c49;
 }
@@ -5965,6 +5964,7 @@ body {
 #navigation ul {
   list-style: none;
   max-width: 400px;
+  marghomein: 0 auto;
 }
 #navigation li {
   display: inline-block;
@@ -5974,13 +5974,13 @@ body {
   text-align: center;
   font-family: "Droid Sans Mono", monospace;
   margin-bottom: 15px;
-  color: #86acd1;
+  color: #fff;
   font-size: 35px;
 }
 #navigation a {
   text-decoration: none;
   font-size: 15px;
-  color: #1e70bf;
+  color: #3b3b3b;
 }
 .page-title {
   text-align: center;
@@ -5995,26 +5995,17 @@ body {
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   padding: 10px 50px;
-  border: 2px solid #86acd1;
+  border: 2px solid #e96e57;
   font-size: 20px;
-  color: #86acd1;
+  color: #e96e57;
   border-radius: 10px;
   display: inline-block;
   text-decoration: none;
 }
 .btn-cta:hover {
   text-decoration: none;
-  border-color: #1e70bf;
+  border-color: #fff;
-  color: #1e70bf;
+  color: #fff;
-}
-.btn-cta:focus {
-  text-decoration: none;
-  border-color: #1e70bf;
-  color: #1e70bf;
-}
-.download-btn {
-  color: #e96e57;
-  border-color: #e96e57;
 }
 .wrapper {
   margin: 0 auto;
@@ -6061,7 +6052,7 @@ img {
 }
 a {
   text-decoration: underline;
-  color: #86acd1;
+  color: #fff;
 }
 a:hover {
   text-decoration: none;
@@ -6096,6 +6087,14 @@ img.navimg {
 #home .btn-home {
   margin: 50px 0 25px 0;
 }
+#home hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+  height: 0;
+}
 #web,
 .terminal {
   word-wrap: break-word;
@@ -6151,12 +6150,16 @@ img.navimg {
 #web a {
   color: #fff;
 }
+.dragged {
+  background: #666666 !important;
+}
 .terminal {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   background: #000;
+  backbground-repeat: no-repeat;
   background-size: cover;
 }
 .terminal a {
@@ -6191,7 +6194,7 @@ img.navimg {
   color: #fff;
   text-align: center;
   padding: 40px 0;
-  background: #4c505c;
+  background: #1e70bf;
 }
 #thank-you .col-md-4 {
   text-align: center;
@@ -6213,7 +6216,7 @@ img.navimg {
   font-size: 25px;
 }
 #thank-you .btn-cta {
-  border-color: #86acd1;
+  border-color: #fff;
 }
 #features {
   background: #3b3b3b;
@@ -6279,7 +6282,7 @@ img.navimg {
 }
 #tor {
   text-align: center;
-  background: #3b3b3b;
+  background: #4c505c;
   padding: 50px 0;
 }
 #tor img {
@@ -6316,7 +6319,7 @@ footer img {
 }
 #contact i {
   font-size: 160px;
-  color: #4c505c;
+  color: #1e70bf;
 }
 @media (min-width: 768px) {
   #contact i {
@@ -6328,7 +6331,7 @@ footer img {
   margin-bottom: 40px;
 }
 #reviews {
-  background: #3b3b3b;
+  background: #4c505c;
   padding: 130px 0;
 }
 #reviews .twitter-profile {
@@ -6439,14 +6442,14 @@ blockquote.tweet-xl a {
 .video-js .vjs-big-play-button,
 .video-js .vjs-menu-button .vjs-menu-content {
   /* IE8 - has no alpha support */
-  background-color: #4c505c;
+  background-color: #1e70bf;
   /* Opacity: 1.0 = 100%, 0.0 = 0% */
-  background-color: rgba(76, 80, 92, 0.7);
+  background-color: rgba(30, 112, 191, 0.7);
 }
 /* Slider - used for Volume bar and Progress bar */
 .video-js .vjs-slider {
-  background-color: #a0a4b0;
+  background-color: #97c3ef;
-  background-color: rgba(160, 164, 176, 0.5);
+  background-color: rgba(151, 195, 239, 0.5);
 }
 /* The slider bar color is used for the progress bar and the volume bar
    (the first two can be removed after a fix that's coming) */
@@ -6458,9 +6461,9 @@ blockquote.tweet-xl a {
 /* The main progress bar also has a bar that shows how much has been loaded. */
 .video-js .vjs-load-progress {
   /* For IE8 we'll lighten the color */
-  background: #e6e7ea;
+  background: #ffffff;
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(160, 164, 176, 0.5);
+  background: rgba(151, 195, 239, 0.5);
 }
 /* The load progress bar also has internal divs that represent
    smaller disconnected loaded time ranges */
@@ -6468,7 +6471,7 @@ blockquote.tweet-xl a {
   /* For IE8 we'll lighten the color */
   background: #ffffff;
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(160, 164, 176, 0.75);
+  background: rgba(151, 195, 239, 0.75);
 }
 :not(.vjs-has-started) .vjs-control-bar {
   display: flex;
@@ -6555,6 +6558,12 @@ blockquote.tweet-xl a {
 .icon-gplus:before {
   content: "p";
 }
+.delete-modal {
+  display: none;
+}
+.delete-modal .show {
+  display: block;
+}
 .preview-wrapper {
   padding-bottom: 30px;
 }
@@ -6612,7 +6621,7 @@ html {
   width: 50%;
   max-width: 500px;
   min-width: 300px;
-  background-color: #4c505c;
+  background-color: #1e70bf;
   border-radius: 2px;
   transform: translateX(-50%) translateY(-50%);
   transition: opacity 0.2s ease;
@@ -6632,7 +6641,7 @@ html {
   color: #fff;
 }
 .copy-link-wrapper input {
-  background-color: #3b3b3b;
+  background-color: #4c505c;
   color: #86acd1;
   border: 0;
   font-size: 1em;

src/styles/main.less

@@ -8,9 +8,8 @@
 @import "includes/home";
 @import "includes/pages";
 @import "includes/reviews";
-@import "../bower_components/videojs/dist/video-js.min.css";
+@import "../bower_components/videojs/dist/video-js.css";
 @import "includes/video-js";
 @import "includes/transfersh-icons";
 @import "includes/preview";
-
+@import "custom";
-